Công Cụ Kiểm Tra Độ Tương Phản Màu
Nhập màu chữ và màu nền để có tỷ lệ tương phản WCAG 2.2, kết quả đạt hoặc không đạt ở AA và AAA cho cỡ chữ thường, chữ lớn và đồ họa giao diện, cùng các màu gần nhất đạt chuẩn. Dùng cho slide, áp phích, hình minh họa và trang web. Công cụ chạy trong trình duyệt — không có gì được tải lên. Miễn phí, không cần đăng ký.
Kết quả tương phản
4,47:1
Tỷ lệ tương phản
Chữ thường — Một chú cáo nâu nhanh nhẹn nhảy qua con chó lười (16 px).
Chữ lớn, 24 px (18 pt)
Chữ lớn đậm, 18,7 px (14 pt)
Nút hoặc biểu tượng
Hiển thị đã làm tròn xuống hai chữ số thập phân: WCAG không làm tròn một kết quả sát ngưỡng lên, nên 4,499 không đạt 4,5.
| Yêu cầu | Cần | Kết quả |
|---|---|---|
| Chữ thường, AA (1.4.3) | 4,5:1 | Không đạt |
| Chữ thường, AAA (1.4.6) | 7:1 | Không đạt |
| Chữ lớn, AA (1.4.3) | 3:1 | Đạt |
| Chữ lớn, AAA (1.4.6) | 4,5:1 | Không đạt |
| Thành phần giao diện và đồ họa, AA (1.4.11) | 3:1 | Đạt |
Chữ lớn nghĩa là ít nhất 18 pt (24 px) ở độ đậm thường, hoặc 14 pt (khoảng 18,7 px) ở độ đậm. Trên slide và áp phích, chữ nội dung thường lớn; chú thích cuối trang và chú thích thì thường không.
Các màu gợi ý đạt chuẩn
Đổi màu chữ
Đổi màu nền
Mỗi gợi ý giữ nguyên sắc độ và chỉ thay đổi độ sáng, theo bước nhỏ nhất đạt chuẩn.
Cách Sử Dụng Công Cụ Kiểm Tra Độ Tương Phản Màu
- 1. Nhập hai màu. Gõ từng màu theo HEX (
#777777),rgb(),hsl()hoặc tên CSS, hoặc dùng bộ chọn màu. Hoán đổi sẽ đổi chỗ hai màu, tiện cho việc kiểm tra phiên bản chữ sáng trên nền tối và ngược lại. - 2. Đọc tỷ lệ và bảng. Tỷ lệ chạy từ 1:1 (hai màu giống nhau) đến 21:1 (đen trên trắng). Bảng so sánh tỷ lệ với từng yêu cầu WCAG và ghi Đạt hoặc Không đạt bằng chữ, không chỉ bằng màu sắc.
- 3. Xác định cỡ chữ. Chữ lớn có yêu cầu thấp hơn. Phần xem trước hiển thị chữ thường, chữ lớn, chữ lớn đậm và một nút có viền để bạn tự đánh giá trường hợp của mình.
- 4. Sửa một cặp không đạt. Chọn mức bạn muốn đạt và dùng màu chữ hoặc màu nền được gợi ý. Công cụ giữ nguyên sắc độ và chỉ thay đổi độ sáng, theo bước nhỏ nhất đủ để đạt.
WCAG 2.2 Yêu Cầu Gì
Các Nguyên Tắc Truy Cập Nội Dung Web (WCAG) 2.2 đặt tỷ lệ tương phản tối thiểu trong ba tiêu chí thành công. Tỷ lệ là (L₁ + 0,05) ÷ (L₂ + 0,05), trong đó L₁ là độ sáng tương đối của màu sáng hơn và L₂ của màu tối hơn.
| Tiêu chí | Mức | Chữ thường | Chữ lớn |
|---|---|---|---|
| 1.4.3 Tương phản (Tối thiểu) | AA | 4,5:1 | 3:1 |
| 1.4.6 Tương phản (Nâng cao) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Tương phản phi văn bản | AA | 3:1 cho thành phần giao diện và đồ họa có ý nghĩa | — |
Chữ lớn là ít nhất 18 pt, hoặc 14 pt đậm — tức 24 px và khoảng 18,7 px trên màn hình 96 dpi. Logo, chữ trang trí thuần túy và các điều khiển không hoạt động được miễn khỏi 1.4.3. Quy tắc 3:1 trong 1.4.11 bao gồm các phần của một điều khiển cần để nhận ra nó (viền nút, đường viền ô đánh dấu), các trạng thái của nó như tiêu điểm, và các đồ họa mà người đọc cần để hiểu nội dung, chẳng hạn các đường trong biểu đồ.
Tỷ Lệ Được Tính Như Thế Nào
Mỗi kênh sRGB được chuẩn hóa về 0–1 và tuyến tính hóa: c ÷ 12,92 nếu c ≤ 0,04045, ngược lại ((c + 0,055) ÷ 1,055)2,4. Độ sáng tương đối khi đó là 0,2126 R + 0,7152 G + 0,0722 B. Màu xanh lục có trọng số lớn nhất vì mắt nhạy cảm nhất với nó.
Lỗi in 0,03928
WCAG 2.0 và 2.1 ghi ngưỡng là 0,03928, một phần còn sót lại từ một bản nháp đầu của tiêu chuẩn sRGB, vốn dùng 0,04045. Bảng thuật ngữ của WCAG 2.2 đã sửa thành 0,04045 và ghi chú rằng sự khác biệt không làm thay đổi kết quả thực tế nào. Công cụ này dùng 0,04045.
Một cặp chỉ không đạt vì một chút
#777777 trên trắng: 4,48:1 — không đạt AA cho chữ thường (cần 4,5:1), nhưng đạt cho chữ lớn.
#767676 trên trắng: 4,54:1 — màu xám nhạt nhất đạt AA trên nền trắng.
#0000ff trên trắng: 8,59:1 — đạt AAA. #ff0000 trên trắng: 4,0:1 — không đạt AA cho chữ thường.
WCAG không làm tròn: tỷ lệ 4,4999 không đạt 4,5. Vì vậy công cụ hiển thị tỷ lệ đã làm tròn xuống hai chữ số thập phân, nên một cặp sát ngưỡng không bao giờ được hiển thị là đạt.
Kiểm Tra Slide, Áp Phích và Hình Minh Họa
- Slide và áp phích không phải trang web, nhưng các tỷ lệ của WCAG cũng là thước đo được chấp nhận cho chúng. Chữ nội dung trên slide thường lớn (24 px là 18 pt); chú thích, chú thích cuối trang và nhãn trục thì không, nên hãy kiểm tra chúng như chữ thường.
- Hướng tới mức cao hơn tối thiểu khi trình chiếu. Máy chiếu trong phòng có đèn sáng làm giảm độ tương phản với mọi người. Hãy chọn AAA (7:1) cho chữ trên slide sẽ trình chiếu trong phòng sáng.
- Chữ trên ảnh hoặc dải màu chuyển không có nền duy nhất. Kiểm tra vùng sáng nhất và vùng tối nhất phía sau chữ, hoặc đặt chữ trên một khung đặc.
- Biểu đồ và hình minh họa thuộc 1.4.11: các đường, thanh và điểm đánh dấu cần 3:1 so với nền. Màu sắc không nên là yếu tố duy nhất mang ý nghĩa — xem Color Blindness Simulator.
- Màu trong suốt được làm phẳng trước khi đo: nền được phủ lên trắng, rồi chữ được phủ lên nền. Một trang có thứ gì khác phía sau cần nhập trực tiếp màu đó.
Ghi Chú Về APCA
Thuật toán Tương phản Nhận thức Dễ tiếp cận (APCA) là một phương pháp ứng viên trong bản nháp làm việc của WCAG 3, có tính đến kích thước chữ, độ đậm và cực tính. Đây là bản nháp, không phải yêu cầu, và hiện chưa có luật hay tiêu chuẩn nào đòi hỏi nó. Các tỷ lệ WCAG 2.x — những tỷ lệ trong công cụ này — vẫn là cơ sở cho các tuyên bố tuân thủ.
Câu Hỏi Thường Gặp
- Tỷ lệ tương phản tốt là bao nhiêu?
- 4,5:1 trở lên đạt WCAG AA cho chữ thường, và 7:1 đạt AAA. Chữ lớn cần 3:1 cho AA và 4,5:1 cho AAA. Đen trên trắng là mức tối đa, 21:1. Bất cứ thứ gì dưới 3:1 đều khó đọc với nhiều người, kể cả người có thị lực tốt.
- Theo WCAG, chữ lớn là gì?
- Chữ có kích thước ít nhất 18 pt (24 px) ở độ đậm thường, hoặc ít nhất 14 pt (khoảng 18,7 px) ở độ đậm. Kích thước được đo như hiển thị, nên một phông chữ slide trông nhỏ trên tài liệu phát tay vẫn có thể lớn khi chiếu.
- Yêu cầu tương phản có áp dụng cho biểu tượng và đường trên biểu đồ không?
- Có, qua tiêu chí thành công 1.4.11 Tương phản phi văn bản: các thành phần giao diện và đồ họa cần thiết để hiểu nội dung phải có ít nhất 3:1 so với màu liền kề. Đồ họa trang trí và thành phần không hoạt động được miễn.
- Tại sao màu của tôi hiển thị 4,49 khi tỷ lệ gần 4,5?
- Vì WCAG so sánh tỷ lệ chính xác và không tính điểm cho việc làm tròn. Một cặp 4,4999:1 không đạt yêu cầu 4,5:1, nên công cụ hiển thị giá trị làm tròn xuống hai chữ số thập phân thay vì 4,50.
- Các màu được gợi ý hoạt động thế nào?
- Công cụ giữ nguyên sắc độ và độ bão hòa của màu bạn, rồi dịch chuyển độ sáng HSL lên hoặc xuống theo từng bước nhỏ, và trả về giá trị gần nhất đạt tỷ lệ mục tiêu dưới dạng mã HEX 8 bit. Nếu không có độ sáng nào đạt được — chẳng hạn 7:1 so với một màu xám trung bình — công cụ sẽ nói như vậy và gợi ý đổi màu còn lại.
- APCA có tốt hơn tỷ lệ WCAG không?
- APCA mô hình hóa nhận thức sát hơn, đặc biệt với chế độ tối và chữ mảnh, nhưng nó thuộc một bản nháp (WCAG 3), chưa phải yêu cầu được chấp nhận. Các luật về khả năng tiếp cận và tiêu chuẩn mua sắm trích dẫn WCAG 2.x dùng tỷ lệ được tính ở đây.