Tỉ lệ tương phản kèm kết quả WCAG 2.2 AA, AAA cho chữ và giao diện Nhận HEX, RGB, HSL, OKLCH và tên màu CSS, có bảng chọn màu Xử lý màu trong suốt bằng cách pha trộn như trình duyệt Xem trước trực tiếp với tiêu đề, chữ nội dung, chữ nhỏ và nút Gợi ý màu gần nhất đạt chuẩn, chỉ thay đổi độ sáng

Kiểm tra độ tương phản màu - Chuẩn WCAG AA & AAA

Độ tương phản màu là gì và vì sao quan trọng?

Tỉ lệ tương phản đo độ chênh lệch độ sáng cảm nhận giữa hai màu, từ 1:1 (giống nhau) đến 21:1 (đen trên trắng). Bộ hướng dẫn WCAG 2.2 yêu cầu tối thiểu 4.5:1 cho chữ thường và 3:1 cho chữ lớn và thành phần giao diện ở mức AA, còn mức AAA là 7:1 và 4.5:1. Khoảng một trong mười hai nam giới có khiếm khuyết sắc giác và nhiều người đọc điện thoại dưới nắng gắt, nên chữ tương phản thấp sẽ loại bỏ người dùng thật. Các luật về khả năng tiếp cận như European Accessibility Act hay ADA đều tham chiếu WCAG AA, khiến độ tương phản trở thành yêu cầu pháp lý với nhiều website.

Tính năng

• Tỉ lệ tương phản kèm kết quả WCAG 2.2 AA, AAA cho chữ và giao diện
• Nhận HEX, RGB, HSL, OKLCH và tên màu CSS, có bảng chọn màu
• Xử lý màu trong suốt bằng cách pha trộn như trình duyệt
• Xem trước trực tiếp với tiêu đề, chữ nội dung, chữ nhỏ và nút
• Gợi ý màu gần nhất đạt chuẩn, chỉ thay đổi độ sáng

Tức thì và riêng tư

Mọi phép tính chạy trong trình duyệt. Màu của các thiết kế chưa công bố không bị gửi đi đâu cả.

Công thức WCAG 2.2, 100% phía client.

Cách dùng công cụ Kiểm tra tương phản

1
Nhập màu chữ và màu nền bằng cách gõ màu CSS bất kỳ (#1e293b, rgb(), hsl(), oklch() hoặc tên màu) hoặc dùng bảng chọn màu.
2
Đọc tỉ lệ tương phản. Kết quả được cắt bớt chứ không làm tròn lên, nên 4.49:1 sẽ không bao giờ hiện là đạt.
3
Xem năm kết quả WCAG: AA và AAA cho chữ thường và chữ lớn, cùng mức 3:1 cho thành phần giao diện như viền ô nhập, icon và vòng focus.
4
Nếu không đạt, xem màu gợi ý giữ nguyên tông nhưng chỉnh độ sáng rồi bấm Dùng màu này, hoặc đổi chỗ hai màu để thử trường hợp ngược lại.

Ví dụ thực tế

Chữ placeholder màu xám

Màu gray-400 của Tailwind (#9ca3af) trên nền trắng chỉ đạt 2.5:1, không đạt AA. gray-500 (#6b7280) đạt 4.8:1 và dùng được cho chữ nội dung.

Màu thương hiệu trên nút

Một màu xanh thương hiệu nhạt có thể đạt với chữ lớn trên nút (3:1) nhưng không đạt với chữ nhỏ. Hãy kiểm tra cả hai, hoặc làm tối nền nút đến khi chữ trắng đạt 4.5:1.

Bảng màu dark mode

Trắng tuyệt đối trên đen tuyệt đối (21:1) có thể gây chói. Thử các cặp dịu hơn như #e2e8f0 trên #0f172a, vẫn vượt AAA với khoảng 14:1.

Viền ô nhập và icon

WCAG 1.4.11 yêu cầu 3:1 cho viền ô nhập và icon mang ý nghĩa. Viền #e5e7eb trên nền trắng thấp hơn nhiều, khiến người dùng khó thấy ô nhập.

Câu hỏi thường gặp

Thế nào là chữ lớn?+

Theo WCAG, chữ lớn là từ 18pt (24px) thường hoặc 14pt (khoảng 18.66px) đậm. Chữ lớn chỉ cần 3:1 ở mức AA vì nét dày dễ đọc hơn.

Cần đạt AA hay AAA?+

AA là mục tiêu pháp lý tiêu chuẩn cho phần lớn website và ứng dụng. AAA khắt khe hơn, nên dùng cho nội dung đọc dài, dịch vụ công và người dùng thị lực kém.

Logo và nút bị vô hiệu hóa có phải tuân theo không?+

Không. WCAG miễn trừ logo, hình trang trí và điều khiển không hoạt động (disabled). Chữ placeholder, liên kết và dấu hiệu focus thì phải tuân theo.

Còn APCA và WCAG 3 thì sao?+

APCA là mô hình tương phản mới đề xuất cho WCAG 3 trong tương lai. Nó vẫn là bản nháp, nên tỉ lệ của WCAG 2.2 vẫn là yêu cầu mà luật và các đợt kiểm định dùng hiện nay.