Chuyển Đổi Màu - HEX, RGB, HSL và Độ Tương Phản WCAG
Chuyển đổi màu và kiểm tra tương phản
HEX, rgb(), hsl() hoặc tên màu CSS — cả bốn đều được nhận.
Sắc độ
Cùng một tông màu ở mười một mức sáng. Bấm vào một ô để đặt làm màu hiện tại.
Tương phản
Tỷ lệ giữa hai màu, đo theo đúng định nghĩa của WCAG.
| Cặp | Tỷ lệ | AA (4,5:1) | AAA (7:1) |
|---|
Công cụ này làm gì
Đổi một màu giữa các cách viết chỉ là năm dòng số học. Câu hỏi khó hơn là chữ màu đó có thật sự đọc được không, và câu trả lời ấy cần một bước mà phần lớn công cụ bỏ qua. Cả hai đều có trên trang này, trên đúng màu bạn đã nhập.
Cách dùng
- 1 Gõ một màu theo bất kỳ cách viết nào, hoặc dùng bộ chọn màu.
- 2 Sao chép cách viết bạn cần, hoặc bấm một sắc độ để chuyển sang màu đó.
- 3 Đọc bảng tương phản. Bất cứ dòng nào ghi Không đạt đều sẽ khó đọc với ai đó.
Vì sao cùng một tông lại trông khác trong HSL
HSL làm tròn về độ nguyên và phần trăm nguyên, nên chuyển sang HSL rồi quay lại không phải lúc nào cũng trả về đúng các byte ban đầu. Vì thế mã HEX hiển thị ở đây luôn suy ra từ thứ bạn nhập, không bao giờ từ một vòng đi qua HSL — nếu không, ô màu sẽ trôi một bậc sau mỗi lần bấm.
Các con số tương phản nghĩa là gì
Tỷ lệ chạy từ 1:1 với hai màu giống hệt đến 21:1 với đen tuyền trên trắng tinh. Các ngưỡng bên dưới chính là thứ công cụ này dùng để đánh giá.
| 4.5:1 | Chữ thường trong nội dung, WCAG AA |
| 3:1 | Chữ lớn hoặc chữ đậm, WCAG AA |
| 7:1 | Chữ thường trong nội dung, WCAG AAA |
| 21:1 | Tỷ lệ cao nhất có thể: đen trên trắng |
Bước mà phần lớn công cụ bỏ qua
Độ chói tương đối không phải là trung bình của các giá trị kênh. Mỗi kênh phải được tuyến tính hóa trước, vì các con số trong mã HEX được mã hóa gamma chứ không tỷ lệ với ánh sáng. Bỏ qua bước đó thì tỷ lệ vẫn ra một con số hợp lý, chỉ là sai, và sai số lớn nhất ở vùng tông trung, nơi phần lớn màu giao diện nằm ở đó.
Tương phản là điều kiện cần, không phải điều kiện đủ
Một cặp màu có thể vượt 4,5:1 mà vẫn là lựa chọn tồi: mù màu khiến vài cặp không phân biệt được ngay cả ở tỷ lệ cao, và ý nghĩa không bao giờ nên chỉ dựa vào màu sắc. Hãy xem chữ Đạt ở đây là đã qua mức sàn, không phải phán quyết về thiết kế.