Tỷ lệ tương phản WCAG so độ sáng của hai màu trên thang từ 1:1 (giống nhau) đến 21:1 (đen trên trắng). Ở mức AA, chữ thường cần ít nhất 4,5:1 so với nền, còn chữ lớn cần ít nhất 3:1. Mức AAA đòi 7:1 cho chữ thường và 4,5:1 cho chữ lớn. Bài này chỉ cách con số được tính, kèm ví dụ bạn có thể tự làm lại, giải thích thế nào là chữ lớn, và đi qua việc kiểm tra rồi sửa một cặp màu.
Các ngưỡng trong một bảng
| Bạn đang kiểm tra | Mức AA | Mức AAA |
|---|---|---|
| Chữ thường | 4,5:1 | 7:1 |
| Chữ lớn | 3:1 | 4,5:1 |
| Nút, biểu tượng, viền ô nhập và các phần giao diện khác | 3:1 | không quy định |
Chữ lớn là chữ từ 18 point trở lên, hoặc từ 14 point trở lên nếu in đậm. Tính theo pixel CSS là 24 px, hoặc khoảng 18,66 px nếu in đậm. Chữ không phải là "lớn" vì nó trông to trên màn hình của bạn: nó lớn do cỡ chữ và độ đậm.
Dòng về giao diện đến từ WCAG 2.1, bản thêm yêu cầu 3:1 cho những phần của một điều khiển mà bạn cần để nhìn ra nó, như viền của ô nhập, biểu tượng không có nhãn, hay khung của trạng thái đang chọn. Chữ chỉ để trang trí, điều khiển đang bị vô hiệu và logo được miễn.
Con số đến từ đâu
Tỷ lệ được tính từ độ sáng tương đối của mỗi màu, một số từ 0 (đen) đến 1 (trắng). Cách tính:
- Lấy từng kênh màu, đỏ, xanh lá và xanh dương, là một giá trị từ 0 đến 255 và chia cho 255.
- Tuyến tính hóa: nếu giá trị không quá 0,03928, chia cho 12,92; ngược lại cộng 0,055, chia cho 1,055 rồi lũy thừa 2,4. Bước này gỡ đi đường cong mà màn hình dùng cho độ sáng.
- Gộp ba kết quả: độ sáng = 0,2126 x đỏ + 0,7152 x xanh lá + 0,0722 x xanh dương. Xanh lá có trọng số lớn nhất vì mắt nhạy với nó nhất.
- Tỷ lệ tương phản là (độ sáng của màu sáng hơn + 0,05) chia cho (độ sáng của màu tối hơn + 0,05).
Số 0,05 giúp tỷ lệ không thành vô cực với màu đen, và là lý do đen trên trắng đúng bằng 21:1: (1 + 0,05) / (0 + 0,05) = 21.
Ví dụ: chữ xám trên nền trắng
Lấy chữ màu #767676 trên nền trắng. Vì ba kênh bằng nhau (118), một lần tính là đủ cho cả ba:
- 118 chia 255 là 0,4627.
- (0,4627 + 0,055) / 1,055 là 0,4908, và 0,4908 lũy thừa 2,4 là 0,1812.
- Độ sáng là 0,1812. Màu trắng là 1.
- Tỷ lệ là (1 + 0,05) / (0,1812 + 0,05) = 1,05 / 0,2312 = 4,54.
Vậy #767676 đạt AA cho chữ thường, vừa đủ. Màu xám sáng hơn một bậc, #777777, cho 4,48:1 và không đạt. Chênh lệch một bậc đó không ai nhìn ra, nhưng nó quyết định trang có qua được đợt kiểm tra hay không.
Màu có các kênh không bằng nhau cũng tính y hệt, từng kênh một. Chữ trắng trên một nút xanh dương #1d4ed8 có các kênh 29, 78 và 216, tuyến tính hóa thành khoảng 0,0123, 0,0762 và 0,6867. Độ sáng là 0,2126 x 0,0123 + 0,7152 x 0,0762 + 0,0722 x 0,6867, xấp xỉ 0,1067, và tỷ lệ là 1,05 / 0,1567 = 6,70. Con số đó đạt AA cho cả chữ thường lẫn chữ lớn và đạt AAA cho chữ lớn, nhưng không đạt AAA cho chữ thường vốn cần 7.
Thêm vài cặp màu để luyện mắt
| Chữ | Nền | Tỷ lệ | AA chữ thường | AA chữ lớn và giao diện | AAA chữ thường |
|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | Đạt | Đạt | Đạt |
| #595959 | #ffffff | 7.00:1 | Đạt | Đạt | Đạt |
| #767676 | #ffffff | 4.54:1 | Đạt | Đạt | Không đạt |
| #777777 | #ffffff | 4.48:1 | Không đạt | Đạt | Không đạt |
| #ffffff | #ea580c | 3.56:1 | Không đạt | Đạt | Không đạt |
| #ff0000 | #ffffff | 4.00:1 | Không đạt | Đạt | Không đạt |
| #949494 | #ffffff | 3.03:1 | Không đạt | Đạt | Không đạt |
Bảng ghi tỷ lệ theo đúng cách công cụ hiển thị, với dấu chấm thập phân. Đỏ thuần trên trắng, 4.00:1, là cặp làm nhiều người bất ngờ. Nó trông rất rõ mà vẫn không đạt cho chữ nội dung. Chữ trắng trên nút cam đó dùng được cho một tiêu đề lớn, nhưng không dùng được cho dòng nhãn nhỏ bên dưới.
Kiểm tra một cặp màu bằng công cụ màu sắc
Công cụ màu sắc có thẻ Kiểm tra tương phản làm tất cả những việc trên ngay trong trình duyệt.
- Mở thẻ Kiểm tra tương phản rồi nhập Màu chữ và Màu nền, dưới dạng hex như #767676 hoặc bằng bộ chọn màu. "Đổi hai màu" đảo chúng cho nhau.
- Đọc tỷ lệ, rồi đọc năm mục kiểm tra: AA chữ thường (4.5:1), AA chữ lớn (3:1), AAA chữ thường (7:1), AAA chữ lớn (4.5:1), và AA cho nút và biểu tượng (3:1). Mỗi mục hiện Đạt hoặc Không đạt.
- Nhìn phần xem trước, hiện màu của bạn ở dạng chữ thường 16 px và chữ lớn 24 px.
- Nếu chữ thường không đạt, công cụ gợi ý màu gần nhất cùng tông và độ bão hòa đạt AA, và nút "Dùng" áp dụng nó. Với #777777 trên nền trắng, gợi ý là #767676.
Công cụ xử lý một cái bẫy: nếu tỷ lệ chính xác là 4,499 thì nó hiện 4.49:1 chứ không phải 4.50:1. Tỷ lệ 4,499 chưa chạm 4,5, và hiện 4.50 cạnh chữ Không đạt chỉ gây rối.
Có những cặp không sửa được từ chính màu của nó. Chữ trắng không thể sáng hơn, nên trên nền tầm trung, thay đổi duy nhất giúp ích là đổi nền. Công cụ sẽ cho bạn biết khi không có màu nào cùng tông đạt AA.
Nếu bạn bắt đầu từ một logo hay bức ảnh, thẻ Màu từ ảnh của cùng công cụ lấy ra các màu chính, và bạn có thể sao chép một ô màu để kiểm tra nó như màu chữ hoặc màu nền.
Những lỗi nên tránh
- Đánh giá bằng mắt. Màn hình, ánh sáng và mắt mỗi người mỗi khác. Một con số thì không.
- Chỉ nhìn dòng chữ lớn. Chữ nội dung là chữ thường. Dòng đầu mới quyết định.
- Chữ đè lên ảnh hay dải màu chuyển. Công cụ so sánh hai màu phẳng. Hãy kiểm tra chỗ tệ nhất sau lớp chữ, hoặc đặt chữ lên một mảng màu đặc.
- Màu có độ trong suốt. Màu chữ bán trong suốt bị trộn với thứ nằm sau nó. Hãy kiểm tra màu cuối cùng sau khi trộn, không phải màu trong tệp CSS.
- Chữ gợi ý trong ô nhập, trạng thái khi rê chuột hay khi được chọn. Đó cũng là chữ và là phần giao diện, và thường là những màu xám nhạt nhất trong thiết kế.
- Bản sáng và bản tối. Giao diện tối cần kiểm tra riêng. Màu đạt trên nền trắng có thể không đạt trên nền gần đen.
Tương phản còn quan trọng ở đâu nữa
Mã in cũng theo cùng một logic. Mã vạch có vạch nhạt trên nền nhạt quét rất kém, vì vậy công cụ tạo mã vạch cảnh báo khi màu vạch và màu nền quá gần nhau, và khi vạch sáng hơn nền.
Danh sách kiểm tra ngắn
Chữ thường cần 4,5:1 cho AA, chữ lớn và phần giao diện cần 3:1, còn AAA là 7:1 và 4,5:1. Hãy kiểm tra mọi cặp chữ và nền, kể cả các trạng thái và giao diện tối, sửa cặp không đạt bằng cách làm tối màu chữ hoặc đổi màu nền, và tin vào con số chứ đừng tin mắt.