Một bộ kiểm tra tương phản đo lường điều gì?
Bộ kiểm tra tương phản so sánh độ sáng tương đối của màu tiền cảnh và màu nền. Kết quả được hiển thị dưới dạng tỉ lệ từ 1:1 (màu gần như giống hệt), đến 21:1 (đen và trắng có độ tương phản tối đa).
Công cụ này báo cáo các chỉ báo đạt/không đạt theo kiểu WCAG cho văn bản thường và văn bản lớn. Nó hữu ích cho các quyết định thiết kế ban đầu, trạng thái thành phần, token giao diện và kiểm tra nhanh trước khi thực hiện đánh giá khả năng truy cập đầy đủ hơn.
Cách đọc kết quả
| Check | Tỉ lệ tối thiểu | Meaning |
|---|---|---|
| AA cho văn bản thường | 4.5:1 | Mục tiêu phổ biến cho văn bản thân bài thông thường. |
| AA cho văn bản lớn | 3:1 | Áp dụng cho văn bản lớn hơn hoặc đậm hơn, nơi các hình dạng chữ dễ đọc hơn. |
| AAA cho văn bản thường | 7:1 | Mục tiêu nghiêm ngặt hơn cho văn bản thường trong bối cảnh yêu cầu khả năng truy cập cao. |
| AAA cho văn bản lớn | 4.5:1 | Mục tiêu nghiêm ngặt hơn cho văn bản lớn. |
Những điều công cụ này không khẳng định
Tỉ lệ là một tín hiệu mạnh, nhưng không phải là một cuộc kiểm toán khả năng truy cập hoàn chỉnh. Khả năng đọc thực tế còn phụ thuộc vào kiểu chữ, độ đậm ký tự, trạng thái hover/focus, trạng thái bị vô hiệu hóa, màu xung quanh, chất lượng màn hình và việc văn bản có xuất hiện trên hình ảnh hay hiệu ứng chuyển sắc (gradient) hay không.
- Màu trong suốt và gradient cần được xem xét riêng.
- Biểu tượng nhỏ và nét mảnh có thể cần độ tương phản mạnh hơn so với văn bản gần đó.
- Màu thương hiệu có thể đạt ở một cặp màu nhưng thất bại ở cặp màu khác.
- Độ tương phản quét QR và độ tương phản khả năng đọc văn bản có liên quan nhưng không phải cùng một kiểm tra.
Cách cải thiện độ tương phản yếu
Làm tối chữ
Với nền sáng, hãy đưa màu chữ gần hơn về một tông trung tính đậm hơn hoặc tông thương hiệu mạnh hơn.
Làm sáng nền
Thay đổi nhỏ ở nền có thể giúp màu thương hiệu đạt yêu cầu mà không cần thay đổi token tiền cảnh.
Tăng kích thước hoặc độ đậm chữ
Văn bản lớn hơn hoặc đậm hơn có ngưỡng AA thấp hơn, nhưng vẫn cần đủ độ tách nhìn.
Kiểm tra mọi trạng thái
Các trạng thái hover, focus, disabled, selected và lỗi thường sử dụng các cặp màu khác nhau.
Câu hỏi thường gặp
Đây có phải là một cuộc kiểm toán tuân thủ đầy đủ WCAG không?
Không. Nó tính ngưỡng tương phản theo kiểu WCAG cho các cặp màu. Một đánh giá đầy đủ còn kiểm tra bố cục, hành vi phím tắt, ngữ nghĩa, trạng thái focus, phương án thay thế văn bản và kiểu chữ được render thực tế.
Thế nào được coi là văn bản lớn?
Hướng dẫn WCAG coi văn bản lớn là khoảng 18 pt chữ thường hoặc 14 pt chữ đậm trở lên. Trong công việc web, hãy xác minh kích thước và độ đậm thực tế khi render, không chỉ nhãn thiết kế.
Tôi có thể dùng công cụ này cho màu trong suốt không?
Bộ kiểm tra gọn nhẹ này sử dụng màu sRGB không trong suốt. Nếu giao diện của bạn dùng màu trong suốt, hãy hòa trộn màu tiền cảnh và nền cuối cùng trước, sau đó kiểm tra cặp màu thu được.
Đạt AA có nghĩa là thiết kế luôn luôn dễ đọc chăng?
Không phải lúc nào cũng vậy. Phông chữ rất mảnh, nhãn giao diện nhỏ, nền bận rộn và màn hình chất lượng thấp vẫn có thể khiến văn bản khó đọc. Xem tỉ lệ là một tín hiệu quan trọng.
Điều này có giống với độ tương phản mã QR không?
Không. Độ tương phản mã QR ảnh hưởng đến độ tin cậy của máy quét, trong khi công cụ này tập trung vào ngưỡng khả năng đọc của văn bản. Toán học có liên quan, nhưng quyết định thực tế thì khác nhau.