Cách sử dụng
- Nhập màu chữ (tiền cảnh) và màu nền ở định dạng HEX, rgb(), hsl() hoặc định dạng CSS khác, hoặc dùng bộ chọn màu.
- Xem tỷ lệ tương phản và kết quả đạt hoặc không đạt cho từng yêu cầu WCAG.
- Nếu không đạt yêu cầu, hãy chọn mục tiêu và áp dụng màu được đề xuất. Màu này giữ nguyên sắc độ và chỉ thay đổi độ sáng.
- Dùng “Hoán đổi” để kiểm tra tổ hợp ngược lại, chẳng hạn chữ sáng trên nút tối.
Cách hoạt động
Tỷ lệ tương phản được tính theo định nghĩa của WCAG 2.2: độ chói tương đối của mỗi màu được tính từ các kênh sRGB, sau đó lấy (màu sáng hơn + 0.05) ÷ (màu tối hơn + 0.05). Tỷ lệ nằm trong khoảng từ 1:1 (hai màu giống nhau) đến 21:1 (đen trên nền trắng).
Các yêu cầu được kiểm tra: tiêu chí thành công 1.4.3 (AA) yêu cầu tỷ lệ 4.5:1 cho văn bản thông thường và 3:1 cho văn bản cỡ lớn; 1.4.6 (AAA) yêu cầu lần lượt là 7:1 và 4.5:1; 1.4.11 yêu cầu 3:1 cho các thành phần giao diện và đồ họa có ý nghĩa như viền ô nhập liệu và biểu tượng. Văn bản cỡ lớn có kích thước tối thiểu 24px ở kiểu chữ thường hoặc khoảng 18.66px ở kiểu chữ đậm. WCAG không cho phép làm tròn lên, vì vậy tỷ lệ 4.49:1 không đạt AA dù rất sát ngưỡng; tỷ lệ hiển thị ở đây được cắt bớt chữ số, không làm tròn.
Gợi ý giữ nguyên sắc độ và độ bão hòa của màu văn bản trong OKLCH, rồi tìm độ sáng gần nhất, tối hơn hoặc sáng hơn, đáp ứng ngưỡng yêu cầu. Tỷ lệ tương phản chỉ là một yếu tố ảnh hưởng đến khả năng đọc: độ đậm, kích thước phông chữ và khác biệt về thị giác màu sắc cũng rất quan trọng. WCAG 2.2 là khuyến nghị hiện hành của W3C, được nhắc đến trong hầu hết các quy định về khả năng tiếp cận.
Ví dụ
Chữ màu xám gần đạt yêu cầu
Màu chữ #777777 trên nền trắng có tỷ lệ 4.48:1. Màu này đạt yêu cầu với văn bản cỡ lớn và thành phần giao diện, nhưng không đạt AA với văn bản thông thường. Màu xám gần nhất đạt yêu cầu là khoảng #767676, với tỷ lệ 4.54:1.
Chữ trắng trên nút màu thương hiệu
Chữ trắng trên nền #ff8800 có tỷ lệ khoảng 2.4:1, không đạt ngay cả mức 3:1 dành cho văn bản cỡ lớn. Cách khắc phục thường dùng là làm màu cam tối hơn hoặc đổi sang chữ màu tối; phần gợi ý cho biết cần làm màu chữ tối đến mức nào.
Kiểm tra viền ô nhập liệu
Viền màu xám nhạt #cccccc trên nền trắng có tỷ lệ khoảng 1.6:1. Theo tiêu chí 1.4.11, viền dùng để nhận biết ô nhập liệu cần đạt 3:1, vì vậy cần dùng màu khoảng #949494 hoặc tối hơn.
Câu hỏi thường gặp
Tỷ lệ tương phản nào cần đạt để đáp ứng WCAG AA?
4.5:1 cho văn bản nội dung thông thường, 3:1 cho văn bản cỡ lớn (24px hoặc 18.66px ở kiểu chữ đậm) và 3:1 cho thành phần giao diện cùng đồ họa có ý nghĩa. Mức AAA nâng yêu cầu lên 7:1 cho văn bản và 4.5:1 cho văn bản cỡ lớn.
Chữ trong logo hoặc trên nút bị vô hiệu hóa có cần đạt yêu cầu không?
Không. WCAG miễn trừ văn bản trong logo và tên thương hiệu, văn bản chỉ mang tính trang trí và văn bản trong các thành phần giao diện không hoạt động (bị vô hiệu hóa).
Vì sao kết quả của tôi hơi khác so với công cụ kiểm tra khác?
Một số công cụ làm tròn tỷ lệ đến một chữ số thập phân hoặc làm tròn lên. WCAG so sánh giá trị chính xác, vì vậy công cụ này cắt bớt đến hai chữ số thập phân. Sai khác nhỏ cũng có thể xảy ra khi màu nhập vào có kênh alpha.
Còn phương pháp đo độ tương phản APCA mới thì sao?
APCA là một phương pháp khác được đề xuất cho phiên bản WCAG trong tương lai. Phương pháp này không thuộc WCAG 2.2, phiên bản mà công cụ này kiểm tra và các quy định về khả năng tiếp cận hiện hành tham chiếu.
Quyền riêng tư
Màu được kiểm tra ngay trong trình duyệt. Không có dữ liệu nào được tải lên hoặc lưu trữ.