Chuyển đổi màu & kiểm tra tương phản

Cách sử dụng

1. Nhập màu ở bất kỳ định dạng nào — hex, rgb() hay hsl(). Dạng hex rút gọn như #abc vẫn dùng được.
2. Xem lại màu đó ở mọi định dạng và sao chép định dạng bạn cần.
3. Đặt màu nền để kiểm tra độ tương phản của cặp màu.
4. Xem bốn kết quả WCAG: chữ thường và chữ lớn, ở mức AA và AAA.

Tính năng

• Hex, RGB và HSL theo cả hai chiều, hỗ trợ alpha và hex rút gọn.
• Tính tương phản WCAG đúng chuẩn, có tuyến tính hóa khỏi đường cong gamma của sRGB.
• Kết quả tách riêng cho chữ thường và chữ lớn, vốn có ngưỡng khác nhau.
• Xem trước trực tiếp cặp màu ở cả hai cỡ chữ, để con số có cái đối chiếu.
• Chạy hoàn toàn trong trình duyệt.

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

Vì sao xám giữa không sáng bằng một nửa màu trắng?

Vì giá trị sRGB được mã hóa gamma chứ không tuyến tính. #808080 nằm giữa thang màu mà màn hình dùng, nhưng độ sáng tương đối của nó là 0,216 chứ không phải 0,5. Công thức của WCAG tuyến tính hóa từng kênh trước, và những công cụ bỏ qua bước này cho ra con số nhìn hợp lý nhưng lại chấp nhận các cặp màu không ai đọc nổi.

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

24px, hoặc 18,66px nếu in đậm. Chữ lớn vẫn dễ đọc ở mức tương phản thấp hơn nên có ngưỡng riêng: 3:1 cho AA thay vì 4,5:1. Đó là lý do một cặp màu có thể đạt cho tiêu đề nhưng trượt cho nội dung — #777 trên nền trắng đúng là trường hợp đó, ở mức 4,48:1.

AA và AAA nghĩa là gì?

Đó là các mức tuân thủ trong WCAG 2. AA là mức mà phần lớn quy định pháp lý và yêu cầu đấu thầu tham chiếu: 4,5:1 cho chữ thường, 3:1 cho chữ lớn. AAA nghiêm hơn ở mức 7:1 và 4,5:1, hiếm khi bắt buộc cho toàn bộ website. Nếu phải chọn một mục tiêu, hãy chọn AA.

Vì sao độ trong suốt bị bỏ qua khi tính tương phản?

Vì một màu bán trong suốt không có độ sáng cố định — nó phụ thuộc vào thứ nằm phía sau. Tương phản chỉ có ý nghĩa giữa hai màu đặc, nên alpha vẫn được giữ trong các định dạng nhưng không đưa vào tỉ lệ. Hãy ghép màu lên đúng nền thật trước.

Công cụ liên quan