Cách dùng Kiểm tra độ tương phản APCA
- Nhập màu chữ và màu nền (theo bất kỳ định dạng CSS nào).
- Đọc giá trị Lc — càng cao thì càng dễ đọc. Giá trị âm nghĩa là chữ sáng trên nền tối.
- Xem bảng gợi ý sử dụng để biết cặp màu này phù hợp cho nội dung chính, tiêu đề hay chỉ cho các thành phần không phải chữ.
- So sánh với tỷ lệ WCAG 2 hiển thị bên cạnh, vì hiện nay đó vẫn là tiêu chuẩn pháp lý và kiểm định.
APCA là gì?
APCA (Accessible Perceptual Contrast Algorithm), do Andrew Somers phát triển cho W3C, là phương pháp đo độ tương phản được đề xuất cho bộ hướng dẫn WCAG 3 sắp tới. Thay vì một tỷ lệ như 4.5:1, nó cho ra giá trị độ tương phản độ sáng Lc từ khoảng 0 đến 106 (dương với chữ tối trên nền sáng, âm với chữ sáng trên nền tối). Phương pháp này mô phỏng cách mắt người thực sự cảm nhận độ tương phản, bao gồm ảnh hưởng của cỡ chữ và độ đậm.
Vì sao dùng APCA thay vì tỷ lệ WCAG 2?
- Nhận biết chiều màu: WCAG 2 coi chữ trắng trên nền đen và chữ đen trên nền trắng là như nhau, nhưng mắt chúng ta thì không. APCA chấm điểm hai trường hợp này khác nhau.
- Tốt hơn với chế độ tối: công thức WCAG 2 đánh giá quá cao độ tương phản của các cặp màu tối, nên một số tổ hợp “đạt” ở giao diện tối vẫn khó đọc. APCA phát hiện được những trường hợp này.
- Ít báo lỗi sai: một số cặp màu trung bình vẫn dễ đọc, chẳng hạn chữ trắng trên nút màu cam, bị WCAG 2 đánh trượt nhưng APCA đánh giá sát thực tế hơn.
Cách đọc giá trị Lc
| Lc | Phù hợp cho |
|---|---|
| 90+ | Lý tưởng cho nội dung chính và đọc lâu |
| 75 | Mức tối thiểu cho nội dung chính (~18px thường) |
| 60 | Chữ nội dung khác (~24px thường hoặc 16px đậm) |
| 45 | Tiêu đề lớn và nhãn UI kích thước lớn |
| 30 | Chữ gợi ý (placeholder), trạng thái vô hiệu hóa, icon lớn |
| 15 | Mức tối thiểu cho các thành phần không phải chữ như đường kẻ phân cách |
Đây là các hướng dẫn đơn giản hóa theo “mức đồng”; phương pháp APCA đầy đủ dùng bảng tra cứu theo cỡ chữ và độ đậm.
Hôm nay có nên dùng APCA không?
WCAG 3 vẫn là bản nháp đang hoàn thiện và dạng cuối cùng của APCA có thể thay đổi. Các luật và đợt kiểm định về khả năng truy cập (bao gồm Đạo luật Khả năng truy cập Châu Âu, tham chiếu WCAG 2.1 qua EN 301 549) vẫn dùng tỷ lệ WCAG 2. Cách làm thực tế: đáp ứng WCAG 2 AA để tuân thủ, và dùng APCA như một ý kiến tham khảo thứ hai — đặc biệt với giao diện tối và chữ hiển thị lớn. Kiểm tra WCAG 2 chi tiết với Contrast Checker.
Cũng được tìm dưới tên: apca wcag 3, máy tính lc apca, độ tương phản cảm nhận, kiểm tra độ tương phản chữ, khả năng truy cập web, tương phản wcag 3, apca contrast checker.
Các công cụ dùng kèm tốt với Kiểm tra độ tương phản APCA
- Mô phỏng mù màu — Tải lên ảnh chụp màn hình hoặc thiết kế và xem song song qua tám kiểu suy giảm thị giác màu.
- Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
- Chuyển đổi màu OKLCH — Khám phá không gian màu OKLCH đồng đều về mặt thị giác với thanh trượt trực tiếp, xem màu có nằm trong sRGB hay không, và sao chép các giá trị HEX, RGB, HSL dự phòng tương ứng.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.