Trình kiểm tra độ tương phản màu

Trình kiểm tra độ tương phản màu là gì?

Trình kiểm tra độ tương phản màu là một công cụ trực tuyến miễn phí kiểm tra tỷ lệ tương phản WCAG dành cho nhà thiết kế, lập trình viên và người kiểm thử khả năng tiếp cận. Công cụ nhận một màu tiền cảnh (văn bản) và một màu nền, tính độ chói tương đối của mỗi màu, rồi báo tỷ lệ tương phản dưới dạng giá trị từ 1:1 đến 21:1. Sau đó nó cho biết tỷ lệ đó có đáp ứng WCAG 2.1 Cấp AA (thường 4.5:1, lớn 3:1) và Cấp AAA (thường 7:1, lớn 4.5:1) hay không, và hiển thị hai màu dưới dạng bản xem trước văn bản mẫu trực tiếp để bạn đánh giá khả năng đọc trong nháy mắt. Hãy dùng nó để xác minh nội dung văn bản, nút, liên kết và nhãn dễ đọc trước khi bạn phát hành một thiết kế.

Cách sử dụng Trình kiểm tra độ tương phản màu

1. Nhập hoặc dán màu tiền cảnh (văn bản) dưới dạng giá trị HEX, hoặc nhấp vào bộ chọn màu gốc để chọn trực quan.
2. Làm tương tự cho màu nền mà văn bản nằm trên đó.
3. Đọc kết quả tỷ lệ tương phản, hiển thị dưới dạng giá trị như 4.5:1 (1:1 là hai màu giống hệt, 21:1 là đen tuyền trên trắng).
4. Kiểm tra các nhãn AA và AAA cho văn bản thường và văn bản lớn (18pt / 14pt in đậm trở lên) để xem những cấp nào đạt.
5. Xem bản xem trước văn bản mẫu được kết xuất bằng hai màu của bạn để xác nhận văn bản dễ đọc thoải mái.
6. Điều chỉnh một trong hai màu cho đến khi đạt được mức tương phản mà thiết kế của bạn cần.

Ví dụ

Tiền cảnh #595959, Nền #ffffff

Tỷ lệ 7.00:1 — đạt AA và AAA cho văn bản thường và lớn

Tiền cảnh #999999, Nền #ffffff

Tỷ lệ 2.85:1 — không đạt AA thường và AAA, không đáp ứng bất kỳ yêu cầu nào cho nội dung văn bản

Tiền cảnh #767676, Nền #ffffff

Tỷ lệ 4.54:1 — đạt AA thường và AA lớn, nhưng không đạt AAA thường

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

WCAG yêu cầu tỷ lệ tương phản bao nhiêu?

WCAG 2.1 Cấp AA cần tối thiểu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. Cấp AAA nghiêm ngặt hơn: 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Trình kiểm tra này hiển thị một nhãn đạt/không đạt cho mỗi ngưỡng trong bốn ngưỡng đó.

Thế nào được tính là văn bản lớn?

WCAG định nghĩa văn bản lớn là 18pt (khoảng 24px) trở lên, hoặc 14pt (khoảng 18.66px) trở lên khi in đậm. Văn bản lớn có yêu cầu tương phản thấp hơn vì các ký tự lớn hơn dễ đọc hơn, đó là lý do các nhãn văn bản lớn có thể đạt trong khi nhãn văn bản thường thì không.

Tỷ lệ tương phản được tính như thế nào?

Nó dùng công thức chính thức của WCAG: độ 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, và tỷ lệ là (sáng hơn + 0.05) / (tối hơn + 0.05). Kết quả nằm trong khoảng từ 1:1 (màu giống hệt) đến 21:1 (đen trên trắng).

Nó có hỗ trợ alpha, RGB hoặc màu có tên không?

Đầu vào chỉ là HEX (#rgb viết tắt hoặc #rrggbb), với bộ chọn màu gốc cho mỗi trường. Nó không tính đến alpha/độ mờ hoặc độ trong suốt một phần — hãy hợp nhất các lớp bán trong suốt thành một màu đặc trước, rồi kiểm tra màu đó.

Màu của tôi có được gửi đến máy chủ không?

Không. Phép tính độ chói và tỷ lệ chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — không có màu nào được tải lên và không có gì được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải xong.