DevToolPal
VI

Kiểm tra độ tương phản màu (WCAG)

Kiểm tra tỷ lệ tương phản WCAG 2.x giữa màu chữ và màu nền, kết quả AA và AAA cho chữ thường, chữ lớn và giao diện, xem trước trực tiếp và màu đạt chuẩn gần nhất.

Chạy cục bộ, không bao giờ tải lên

Màu

Màu chữ
Màu nền

Màu trong suốt được trộn trước: chữ trên nền, nền trên màu trắng.

Xem trước

Chữ lớn

Văn bản nội dung phải dễ đọc với mọi người, kể cả người thị lực kém hoặc khi màn hình tối.

Nút

Tỷ lệ tương phản

—

Màu đạt chuẩn gần nhất

Công cụ này làm gì

Công cụ kiểm tra độ tương phản cho biết màu chữ có dễ đọc trên màu nền hay không theo Hướng dẫn Tiếp cận Nội dung Web (WCAG 2.x). Nhập bất kỳ màu CSS nào cho chữ và nền — HEX, rgb(), hsl(), tên màu hoặc màu trong suốt — và bạn sẽ thấy tỷ lệ tương phản, kết quả cho từng tiêu chí AA và AAA cùng bản xem trước trực tiếp. Khi cặp màu không đạt, công cụ gợi ý màu chữ và màu nền đạt chuẩn gần nhất, giữ nguyên sắc độ. Mọi thứ chạy trong trình duyệt của bạn.

Cách sử dụng

  1. Nhập hoặc chọn Màu chữ và Màu nền. Hoán đổi đổi chỗ hai màu.
  2. Xem Tỷ lệ tương phản và danh sách kết quả cho chữ thường, chữ lớn và thành phần giao diện.
  3. Nếu một mức không đạt, xem Màu đạt chuẩn gần nhất: mỗi gợi ý có màu mới, tỷ lệ của nó, nút sao chép và Dùng để áp dụng.
  4. Bật APCA để xem thêm độ tương phản độ sáng (Lc) của bản nháp WCAG 3.

Màu bán trong suốt được trộn trước khi kiểm tra: chữ trên nền, và nền trên màu trắng.

Ví dụ

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Cách tính tỷ lệ

Độ chói tương đối của mỗi màu được tính từ các kênh sRGB (tuyến tính hóa rồi nhân trọng số 21% đỏ, 72% xanh lá, 7% xanh dương). Tỷ lệ bằng (màu sáng hơn + 0,05) / (màu tối hơn + 0,05), từ 1:1 với hai màu giống nhau đến 21:1 với chữ đen trên nền trắng. Chỉ độ sáng mới quan trọng, không phải sắc độ: đỏ thuần trên xanh lá thuần trông rực rỡ nhưng chỉ đạt khoảng 1,3:1.

Gợi ý chỉ thay đổi độ sáng của màu (trong HSL) và chọn hướng — tối hơn hoặc sáng hơn — cần thay đổi ít hơn. Đôi khi không sắc độ nào đạt được: trên nền xám trung bình, không màu chữ nào đạt 7:1.

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

› Tôi cần tỷ lệ tương phản bao nhiêu?

Mức AA của WCAG 2.x yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn cũng như thành phần giao diện như viền ô nhập, biểu tượng và vòng focus. Mức AAA yêu cầu 7:1 cho chữ thường và 4,5:1 cho chữ lớn. Hầu hết luật và chính sách tham chiếu mức AA.

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

Chữ có kích thước từ 24px (18pt) ở độ đậm thường, hoặc từ 18,66px (14pt) khi in đậm. Mọi chữ nhỏ hơn là chữ thường và cần tỷ lệ cao hơn.

› Tại sao 4,49:1 không đạt?

Ngưỡng của WCAG là chính xác: tỷ lệ 4,499 không đạt 4,5. Vì vậy công cụ cắt bớt tỷ lệ hiển thị thay vì làm tròn lên, và quyết định đạt hay không theo giá trị chính xác.

› APCA là gì?

APCA (Accessible Perceptual Contrast Algorithm) là phương pháp tính tương phản được đề xuất cho bản nháp WCAG 3. Nó cho giá trị tương phản độ sáng Lc phụ thuộc vào màu nào là chữ và phù hợp hơn với chế độ tối. Nó chưa phải tiêu chuẩn pháp lý nên ở đây chỉ hiển thị để tham khảo thêm.