design
Độ tương phản WCAG cho Bảng điều khiển SaaS: Bài kiểm tra 5 phút phát hiện hầu hết các lỗi sai
Hầu hết các bảng điều khiển SaaS đều lặng lẽ không đạt tiêu chuẩn độ tương phản WCAG ở các chỉ số, biểu đồ đường và trạng thái vô hiệu hóa mà chẳng ai để ý. Đây là bảng tóm tắt, các mẫu lỗi thường gặp và một bài kiểm tra 5 phút bạn có thể thực hiện ngay hôm nay.
Published 2026-05-31 · 8 min read
Affiliate disclosure
Some links below are affiliate links. I may earn a commission from qualifying purchases at no extra cost to you. I only recommend tools I have used or tested.
TL;DR
- Văn bản thông thường cần độ tương phản 4.5:1 (mức AA); văn bản lớn cần 3:1.
- Các thành phần giao diện, biểu tượng, viền tiêu điểm (focus rings) và các thành phần biểu đồ cần 3:1 (SC 1.4.11).
- Khoảng ba phần tư các bảng điều khiển SaaS không đạt độ tương phản trên ít nhất một thành phần quan trọng — thường là các chỉ số mờ, màu xanh lá (success-green) trên nền trắng, nhãn biểu đồ, viền tiêu điểm hoặc các trạng thái chỉ hiển thị khi di chuột vào.
- Các "cái bẫy" phổ biến: văn bản phụ màu slate-400 (3.1:1, không đạt) và màu green-500 trên nền trắng (2.5:1, không đạt).
- Một bài kiểm tra 5 phút (chụp màn hình → trình kiểm tra độ tương phản → chế độ tương phản cao của hệ điều hành → công cụ kiểm tra tự động) có thể phát hiện các lỗi sai rõ ràng trước khi khách hàng của bạn phát hiện ra.
Bảng điều khiển của bạn rất có thể đang không đạt tiêu chuẩn WCAG. Của tôi trước đây cũng vậy.
Tôi thường thực hiện một bài kiểm tra nhỏ đối với mọi bảng điều khiển SaaS mà tôi thấy. Một quy luật thường lặp lại: các trang tiếp thị thường không sao. Các trang cài đặt cũng ổn. Nhưng chính bảng điều khiển (phần cốt lõi của sản phẩm) lại không đạt độ tương phản WCAG trên ít nhất một thành phần quan trọng trong khoảng ba phần tư các trường hợp.
Những "nghi phạm" thường gặp:
- Các chỉ số phụ bị làm mờ — những con số nhỏ, ít được nhấn mạnh.
- Nhãn trục biểu đồ — các đường mảnh và văn bản cực nhỏ.
- Nút bấm "ma" (Ghost buttons) — độ tương phản thấp ngay từ thiết kế.
- Văn bản màu xanh lá (thành công) trên nền trắng — trông thì ổn, nhưng đo lại thì cực kỳ tệ.
- Trạng thái bị vô hiệu hóa của nút chính.
Đây chính xác là những thành phần mà các nhà thiết kế thường xuyên chỉnh sửa nhiều nhất, và cũng chính xác là những thứ bị điều chỉnh sai lệch khỏi bảng màu an toàn của thương hiệu dưới áp lực tiến độ dự án.
Bài viết này sẽ đề cập đến bài kiểm tra 5 phút mà tôi thực hiện, bốn quy tắc về độ tương phản đáng để ghi nhớ, và các công cụ (bao gồm một công cụ kiểm tra tỷ lệ tương phản miễn phí) giúp phát hiện các lỗi sai trước khi có khách hàng khiếu nại về khả năng tiếp cận.
Các quy tắc tương phản, được tóm gọn
Hướng dẫn về Khả năng Tiếp cận Nội dung Web (WCAG) của W3C xác định hai mức độ tương phản cho văn bản. Sau nhiều năm gỡ lỗi trên các bảng điều khiển thực tế, tôi đã rút gọn chúng lại thành một bảng duy nhất dán trên giấy ghi chú cạnh màn hình của mình:
| Loại văn bản | AA (tối thiểu) | AAA (khuyến nghị) |
|---|---|---|
| Văn bản chính (dưới 18pt thường hoặc 14pt đậm) | 4.5:1 | 7:1 |
| Văn bản lớn (18pt+ thường hoặc 14pt+ đậm) | 3:1 | 4.5:1 |
| Thành phần giao diện + đối tượng đồ họa (biểu tượng, viền tiêu điểm, thành phần biểu đồ) | 3:1 | — |
Những thông số này được lấy từ Tiêu chí Thành công 1.4.3 của WCAG 2.1 (Tối thiểu về Độ tương phản) và 1.4.11 (Độ tương phản Phi văn bản). Chúng không thể thương lượng để tuân thủ pháp luật trong hầu hết các khu vực pháp lý, và một cách đáng ngạc nhiên là chúng khá khớp với những gì mắt chúng ta cảm thấy dễ đọc.
Hai hệ quả thực tế mà hầu hết các nhóm thường bỏ sót:
-
Đường biểu đồ (sparklines) và nét vẽ biểu đồ là các thành phần giao diện, không phải văn bản. Chúng thuộc quy tắc 3:1, nhưng
#cbd5e1(slate-300) trên nền trắng chỉ đạt 1.65:1. Hầu hết các biểu đồ trong bảng điều khiển mà tôi thấy đều không đạt tiêu chuẩn này và không ai khắc phục cả. -
Các trạng thái vô hiệu hóa được miễn yêu cầu về độ tương phản theo SC 1.4.3, nhưng chỉ khi chúng thực sự không có tính tương tác. Nếu một nút "bị vô hiệu hóa" vẫn kích hoạt một mẹo công cụ (tooltip) hoặc hiển thị lỗi khi được nhấp vào, nó có tính tương tác và các quy tắc vẫn sẽ được áp dụng.
5 mẫu lỗi lặp đi lặp lại trong mọi bảng điều khiển mà tôi kiểm tra
Sau khi kiểm tra hàng loạt giao diện SaaS, đây là 5 lỗi sai giống hệt nhau lặp đi lặp lại:
1. Các chỉ số phụ bị làm mờ. "Cập nhật lần cuối 2 giờ trước" trong màu #94a3b8 (slate-400) trên nền #f8fafc. Tỷ lệ đó là 3.1:1, không đạt mức AA cho văn bản chính. Cách khắc phục chỉ là làm tối thêm một tông màu (slate-500 đạt 4.6:1). Các nhà thiết kế thường mặc định dùng slate-400 vì nó "trông thanh lịch"; nhưng nó cũng vi phạm quy định.
2. Văn bản thành công/nguy hiểm trên nền trắng. #22c55e (Tailwind green-500) trên nền trắng chỉ đạt 2.5:1. Một sự thất bại thảm hại. Hãy sử dụng green-700 (#15803d) ở mức tối thiểu 4.7:1. Điều này làm vấp phải hầu hết mọi bảng điều khiển sử dụng khung màu mặc định mà không tinh chỉnh lại.
3. Nhãn trục biểu đồ. Các đường kẻ và văn bản nhỏ trong màu #94a3b8 sẽ không đạt. Biểu đồ cần ít nhất slate-500 (4.6:1) cho nhãn và độ tương phản ≥ 3:1 cho chính các đường kẻ.
4. Viền tiêu điểm (Focus rings). Thiết kế xu hướng "không viền tiêu điểm" phá vỡ hoàn toàn tiêu chí 2.4.7 (Tiêu điểm Hiển thị). Nếu bạn đã loại bỏ viền tiêu điểm mặc định, bạn cần một viền tùy chỉnh có độ tương phản ≥ 3:1 so với nền. Dự án A11y có một hướng dẫn chi tiết về tầm nhìn của tiêu điểm rất đáng để đọc một lần.
5. Độ tương phản chỉ khi di chuột vào. Một nút không đạt độ tương phản ở trạng thái tĩnh nhưng lại đạt khi di chuột vào sẽ không đáp ứng được tiêu chí. Trạng thái tĩnh chính là thứ sẽ bị đem đi kiểm tra.
Bài kiểm tra 5 phút
Đây là quy trình làm việc tôi thực hiện trên bất kỳ bảng điều khiển nào trước khi ra mắt một thiết kế lại. Năm bước, năm phút:
1. Mở trang cần kiểm tra. Chọn màn hình đông đúc dữ liệu nhất, chứ không phải trạng thái để trống.
2. Chụp màn hình. Kéo nó vào một trình kiểm tra độ tương phản. Đối với từng cặp màu mà bạn lo ngại, hãy lấy mẫu các giá trị điểm ảnh và kiểm tra tỷ lệ.
3. Tạo một bảng màu "an toàn" dự kiến bằng cách sử dụng trình tạo bảng màu. Ngay cả khi bạn không sử dụng kết quả đầu ra, các tỷ lệ tương phản mà nó hiển thị cho từng cặp màu cũng là một bước kiểm tra nhanh cho bảng màu hiện tại của bạn.
4. Kiểm tra với cài đặt khả năng tiếp cận "Tăng cường độ tương phản" ở cấp độ hệ điều hành (trên macOS: Cài đặt hệ thống → Trợ năng → Hiển thị). Khoảng 8% người dùng bật tính năng này. Nếu các thành phần "tinh tế" của bạn hoàn toàn biến mất, chứng tỏ bạn đang gặp vấn đề.
5. Chạy trang thông qua một công cụ kiểm tra tự động (Axe DevTools, Lighthouse, WAVE). Các công cụ này có thể chỉ phát hiện được khoảng 30-40% các vấn đề, nhưng chúng sẽ phát hiện ra những lỗi mà bạn sẽ thấy xấu hổ nhất nếu để lọt qua.
Bài kiểm tra này không thể thay thế việc thuê một chuyên gia tư vấn về khả năng tiếp cận cho một sản phẩm thực tế. Nhưng nó đủ để phát hiện những lỗi sai rõ ràng vẫn bị đưa lên môi trường trực tuyến vào mỗi chiều thứ Sáu.
Những nơi các công cụ tự động bỏ sót
Ba nguyên nhân lỗi mà các công cụ kiểm tra tự động không thể phát hiện:
- Độ tương phản phụ thuộc vào dữ liệu. Nếu trạng thái "thấp" của bạn là gray-300 và "cao" là red-600, độ tương phản giữa chúng là hoàn toàn ổn. Nhưng độ tương phản của từng trạng thái riêng lẻ so với nền vẫn cần phải ≥ 3:1, và một công cụ kiểm tra sẽ không biết rằng trạng thái "thấp" có thể xuất hiện một mình.
- Độ tương phản kép. Các lớp phủ trong suốt xếp chồng lên nhau (kiểu thiết kế glassmorphism hiện đại) làm thay đổi độ tương phản tùy thuộc vào những gì nằm phía sau chúng. Các công cụ kiểm tra tĩnh chỉ nhìn thấy màu của lớp tiền cảnh.
- Sự thay đổi ngữ cảnh thông qua trạng thái. Một nhãn trạng thái chuyển từ màu xám sang màu vàng hổ phách không thay đổi độ tương phản so với nền; nó thay đổi về mặt ý nghĩa. Những người dùng mù màu có thể hoàn toàn bỏ qua sự thay đổi này. Hướng dẫn về các mẫu bảng điều khiển trợ năng của Smashing Magazine bao gồm các signaling đa kênh này rất hay.
Cách khắc phục cho cả ba lỗi này là giống nhau: kết hợp mọi tín hiệu màu sắc với một tín hiệu phi màu sắc (biểu tượng, nhãn, độ dày chữ). Cần thực hiện cả hai cách để đảm bảo an toàn.
Một bảng màu thực tế
Nếu bạn muốn một điểm bắt đầu hầu như luôn luôn vượt qua mức AA khi được sử dụng đúng cách:
- Văn bản chính: slate-700 (
#334155) trên slate-50 (#f8fafc) = 10.8:1 - Văn bản phụ: slate-500 (
#64748b) = 5.3:1 (vượt qua mức AA cho văn bản, không đạt mức AAA) - Màu nhấn trên nền trắng: bất kỳ màu nào trong dải trọng số 600 của các khung CSS lớn
- Thành công: green-700 (
#15803d) = 4.7:1 - Nguy hiểm: red-700 (
#b91c1c) = 6.0:1
Hãy chạy bất kỳ giá trị tùy chỉnh nào thông qua công cụ kiểm tra độ tương phản màu trước khi đưa vào sử dụng. Hai phút tranh luận với một nhà thiết kế sẽ đáng giá hơn hai giờ tinh chỉnh lại bảng màu sau khi nhận được khiếu nại từ khách hàng.
Sự thay đổi trong tư duy
Hầu hết các lỗi về độ tương phản không phải do các nhà thiết cố tình phớt lờ khả năng tiếp cận. Đó là do họ theo đuổi sự "thanh lịch" mà không nhận ra rằng sự lựa chọn thanh lịch đó lại là thứ không thể đọc được. Cách khắc phục là đặt một bước kiểm tra độ tương phản ngay cạnh mọi quyết định màu sắc trong hệ thống thiết kế, chứ không phải để đến cuối cùng mới làm như một bước tuân thủ.
Nếu bạn không làm gì khác từ bài viết này: hãy mở bảng điều khiển hiện tại của bạn lên, gọi một công cụ kiểm tra độ tương phản màu, và kiểm tra ba màu văn bản bị làm mờ nhất. Bạn gần như chắc chắn sẽ tìm thấy ít nhất một lỗi. Hãy dành 10 phút để sửa nó trước cuộc đánh giá thiết kế tiếp theo. Đây là nhiệm vụ về khả năng tiếp cận có tỷ suất hoàn vốn (ROI) cao nhất mà bạn có thể làm lúc này.
Tóm lại: Hãy ghi nhớ ba tỷ lệ (4.5:1 cho văn bản chính, 3:1 cho văn bản lớn, 3:1 cho giao diện/biểu đồ) và kiểm tra độ tương phản ngay khi đưa ra quyết định màu sắc, thay vì để đến phút chót như một thủ tục tuân thủ. Năm phút hôm nay sẽ giúp bạn tránh được một khiếu nại từ khách hàng sau này.
Đừng quên viền tiêu điểm
Độ tương phản không chỉ liên quan đến văn bản và biểu tượng — mà còn liên quan đến chỉ báo tiêu điểm cho thấy người dùng sử dụng bàn phím đang thao tác trên phần tử nào. Tiêu chí WCAG 2.4.7 (Tiêu điểm Hiển thị, mức AA) yêu cầu chỉ báo đó phải có thể nhìn thấy được, và một đường viền mờ 1 pixel biến mất trên một nút màu sẽ khiến những người lướt web không cần chuột gặp khó khăn. Lỗi phổ biến nhất của sai lầm này là việc loại bỏ đường viền (outline) mặc định của trình duyệt để trông "gọn gàng" hơn. Đừng làm vậy: hãy giữ một kiểu tiêu điểm hiển thị với độ tương phản thực sự so với cả thành phần và trang, đồng thời kiểm tra trạng thái tiêu điểm của mọi thành phần có tính tương tác, chứ không chỉ màu ở trạng thái tĩnh và màu khi di chuột.
Nguồn
- W3C: WCAG 2.1 Success Criterion 1.4.3: Contrast (Minimum)
- The A11y Project: Never remove CSS outlines
- Smashing Magazine: Accessibility best practices for tabs and dashboards
