Kiểm tra độ tương phản màu
Nhập màu chữ và màu nền để có tỷ lệ tương phản WCAG cùng kết quả đạt hay không đạt cho AA và AAA, với chữ thường và chữ lớn, kèm bản xem trước trực tiếp.
Chạy ngay trong trình duyệt; những gì bạn nhập không rời khỏi thiết bị của bạn
Tỷ lệ tương phản –
| Dùng cho | Yêu cầu | Kết quả |
|---|---|---|
| Chữ thường, AA | 4,5:1 | |
| Chữ thường, AAA | 7:1 | |
| Chữ lớn, AA | 3:1 | |
| Chữ lớn, AAA | 4,5:1 |
Dùng tỷ lệ tương phản WCAG 2.x, chỉ đo độ tương phản về độ chói. Nó không đánh giá được các cặp màu khó phân biệt với người mù màu như đỏ trên xanh lá, phông chữ mảnh hoặc nhỏ, hay chữ trên ảnh và dải màu chuyển. Đọc được HEX (3, 4, 6 hoặc 8 chữ số), rgb(), hsl() và tên màu CSS; các cú pháp màu CSS khác được trình duyệt của bạn đọc nếu có thể.
Cách kiểm tra độ tương phản màu
- Gõ hoặc dán màu chữ và màu nền dưới dạng HEX,
rgb(),hsl()hoặc tên màu CSS nhưnavy, hoặc chọn từng màu bằng bảng chọn màu. - Xem tỷ lệ tương phản, từ 1:1 khi không có tương phản đến 21:1 cho chữ đen trên nền trắng.
- Xem bảng: chữ thường cần 4,5:1 cho AA và 7:1 cho AAA, còn chữ lớn cần 3:1 cho AA và 4,5:1 cho AAA. Bản xem trước cho thấy chữ trông ra sao.
Tỷ lệ tương phản có nghĩa là gì
Tỷ lệ tương phản WCAG so sánh độ sáng của hai màu. Mỗi màu được chuyển thành độ chói tương đối từ 0 (đen) đến 1 (trắng), dùng giá trị sRGB đã bỏ đường cong gamma và ba kênh được nhân trọng số theo mức mắt người thấy sáng: xanh lá nhiều nhất, rồi đến đỏ, rồi xanh dương. Tỷ lệ là độ chói của màu sáng hơn cộng 0,05 chia cho độ chói của màu tối hơn cộng 0,05, nên nó chạy từ 1:1 với hai màu giống hệt nhau đến 21:1 với chữ đen trên nền trắng.
WCAG 2 đặt mức tối thiểu theo cỡ chữ. Chữ thường cần 4,5:1 cho mức AA và 7:1 cho mức AAA nghiêm ngặt hơn. Chữ lớn, dễ đọc hơn, cần 3:1 cho AA và 4,5:1 cho AAA. Chữ lớn nghĩa là ít nhất 24 px, hoặc khoảng 18,7 px nếu in đậm.
Tỷ lệ chỉ xét độ sáng. Hai màu có thể đạt mà người mù màu vẫn khó phân biệt, và phông chữ mảnh hoặc chữ trên ảnh có thể cần độ tương phản cao hơn mức tối thiểu. Hãy xem con số như một mức sàn và nhìn vào bản xem trước.
Dành cho nhà phát triển / tác nhân AI
Cần kiểm tra độ tương phản trong mã, trong bước build hoặc từ một tác nhân AI? Có một API cho việc này: xem hướng dẫn API kiểm tra độ tương phản màu.
Mẹo
- Cần chuyển một màu giữa HEX, RGB, HSL và CMYK trước? Hãy dùng Chuyển đổi màu.
- Đang tạo một bộ màu phối hợp? Tạo bảng phối màu hiển thị độ tương phản với màu trắng và đen cho từng ô màu.
- Cần màu của một điểm ảnh trong ảnh chụp màn hình? Hãy dùng Lấy màu từ ảnh.
Câu hỏi thường gặp
Tỷ lệ tương phản được tính như thế nào?
Bằng công thức WCAG 2.x: độ chói tương đối của mỗi màu được tính từ giá trị sRGB, và tỷ lệ là (sáng hơn + 0,05) chia cho (tối hơn + 0,05). Tỷ lệ nằm từ 1:1 (không tương phản) đến 21:1 (chữ đen trên nền trắng). Tỷ lệ được hiển thị với hai chữ số thập phân và giá trị chưa làm tròn được hiển thị bên cạnh.
AA và AAA yêu cầu tỷ lệ bao nhiêu?
Chữ thường cần 4,5:1 cho AA và 7:1 cho AAA. Chữ lớn, tức ít nhất 24 px nét thường hoặc khoảng 18,7 px nét đậm, cần 3:1 cho AA và 4,5:1 cho AAA. Tỷ lệ không được làm tròn lên qua ngưỡng: 4,499:1 hiển thị là 4,49 và không đạt AA cho chữ thường.
Vì sao #777777 trên nền trắng không đạt AA?
Độ tương phản của nó là 4,48:1, thấp hơn một chút so với 4,5:1 mà AA yêu cầu cho chữ thường, nên không đạt cho chữ nội dung nhưng đạt cho chữ lớn, vốn chỉ cần 3:1. Một màu xám đậm hơn chút như #767676 đạt 4,54:1 và đạt yêu cầu.
Màu trong suốt được xử lý ra sao?
Màu chữ trong suốt một phần được trộn với nền trước, theo cách màn hình hiển thị, rồi màu sau khi trộn mới được đo. Nền trong suốt một phần được giả định nằm trên nền trắng. Các kênh màu được làm tròn thành số nguyên sau khi trộn.
Tỷ lệ đạt có nghĩa là chữ dễ tiếp cận không?
Không phải chỉ riêng điều đó. Tỷ lệ chỉ đo độ tương phản về độ sáng. Nó không nói gì về các cặp màu khó phân biệt với người mù màu, phông chữ rất mảnh, chữ trên ảnh hoặc dải màu chuyển, hay việc màu có phải là cách duy nhất để truyền đạt một ý nghĩa hay không. Hãy xem nó là mức tối thiểu, không phải sự bảo đảm.
Có gì được gửi đến máy chủ không?
Không. Các màu được đọc và đo ngay trong trình duyệt của bạn, và những gì bạn nhập không rời khỏi thiết bị của bạn.