Cách sử dụng
- Nhập màu chữ vào Màu Nền Trước và màu nền vào Màu Nền Sau bằng mã HEX, hoặc chọn bằng bảng màu.
- Đọc Tỷ Lệ Tương Phản, từ 1:1 (không có tương phản) đến 21:1 (chữ đen trên nền trắng).
- Xem ngay cặp màu ĐẠT hay KHÔNG ĐẠT chuẩn WCAG AA và AAA cho Văn Bản Thường và Văn Bản Lớn, kèm bản xem trước.
- Bấm ĐỔI để đảo màu chữ và màu nền.
Yêu cầu tương phản theo WCAG
Hướng dẫn tiếp cận nội dung web WCAG (phiên bản 2.1 và 2.2) đặt ra tỷ lệ tương phản tối thiểu giữa chữ và nền, để người thị lực kém, người mù màu và cả người đọc điện thoại ngoài nắng vẫn đọc được.
| Mức | Văn bản thường | Văn bản lớn |
|---|---|---|
| AA (mức thường được yêu cầu) | 4.5:1 | 3:1 |
| AAA (mức nâng cao) | 7:1 | 4.5:1 |
| Biểu tượng, nút, viền ô nhập (AA) | 3:1 | 3:1 |
Thế nào là văn bản lớn
Văn bản lớn là chữ từ 18pt (24 pixel CSS) với kiểu thường, hoặc từ 14pt (khoảng 18,7 pixel CSS) với chữ đậm. Phần lớn nội dung bài viết, nhãn và liên kết là văn bản thường nên cần đạt 4.5:1; tiêu đề lớn hơn mức trên chỉ cần 3:1.
Những ví dụ hay bị nhầm
Chữ xám nhạt là lỗi phổ biến nhất. Trên nền trắng, màu #767676 đạt 4.54:1 và qua mức AA, nhưng #777777 chỉ nhạt hơn một chút đã còn 4.48:1 và không đạt. Màu #959595 đúng 3:1, chỉ đủ cho văn bản lớn. Chữ trắng trên nền vàng (#FFFF00) chỉ khoảng 1.07:1, gần như không đọc được.
Màu thương hiệu thường đạt khi dùng cho tiêu đề nhưng không đạt với chữ nhỏ, nên hãy kiểm tra từng cặp màu thật: chữ trên nút, liên kết trên nền trang, và chữ gợi ý (placeholder) trong ô nhập, thứ rất hay bị quên.
Cách tính tỷ lệ
Mỗi màu được đổi sang độ chói tương đối, thước đo độ sáng cảm nhận từ 0 (đen) đến 1 (trắng), sau khi hiệu chỉnh đường cong gamma của sRGB. Tỷ lệ bằng (màu sáng hơn + 0.05) ÷ (màu tối hơn + 0.05), chạy từ 1 đến 21. Riêng sắc màu không quyết định: chữ đỏ trên nền xanh lá có thể có tương phản kém dù hai màu trông rất khác nhau.
Câu hỏi thường gặp
Chuẩn WCAG AA cần tỷ lệ tương phản bao nhiêu?
4.5:1 cho văn bản thường và 3:1 cho văn bản lớn (từ 18pt chữ thường hoặc 14pt chữ đậm).
Logo có phải đạt WCAG AA không?
Không. Chữ nằm trong logo hoặc tên thương hiệu không có yêu cầu tương phản, chữ trang trí và nút đang bị vô hiệu hóa cũng vậy.
Có bắt buộc đạt AAA không?
Thường là không. Các quy định và tiêu chuẩn thường yêu cầu mức AA: quy định năm 2024 của Bộ Tư pháp Hoa Kỳ cho website chính quyền tiểu bang và địa phương, cũng như tiêu chuẩn châu Âu EN 301 549, đều dùng WCAG 2.1 AA. AAA là mục tiêu tốt cho các bài viết dài.
Màu của tôi có bị gửi đi không?
Không. Tỷ lệ được tính ngay trong trình duyệt.
