Cách dùng Kiểm tra tương phản màu
- Nhập màu chữ và màu nền (HEX, rgb(), hsl(), oklch() hoặc tên màu CSS), hoặc dùng bộ chọn màu.
- Đọc tỷ lệ tương phản và kết quả AA/AAA cho chữ thường, chữ lớn và thành phần giao diện.
- Kiểm tra xem trước trực tiếp: tiêu đề, nội dung chính, chữ nhỏ, một nút bấm và viền ô nhập.
- Nếu một mức không đạt, nhấn Dùng ở cạnh màu gần nhất đạt chuẩn để áp dụng, rồi sao chép mã HEX mới vào CSS của bạn.
Tỷ lệ tương phản màu là gì?
Tỷ lệ tương phản so sánh độ sáng tương đối của hai màu theo thang từ 1:1 (giống hệt nhau) đến 21:1 (đen trên trắng). Hướng dẫn Khả năng truy cập nội dung web (WCAG) dùng chỉ số này để quyết định chữ có dễ đọc với người có thị lực kém hay người mù màu không, và cả với bất kỳ ai đọc điện thoại dưới ánh nắng gắt. Đây cũng là một tiêu chuẩn pháp lý: các luật về khả năng truy cập như Đạo luật Khả năng truy cập châu Âu (European Accessibility Act) và ADA thường được đánh giá dựa trên WCAG 2.x mức AA.
Yêu cầu tương phản của WCAG 2.2
| Tiêu chí | Mức | Chữ thường | Chữ lớn |
|---|---|---|---|
| 1.4.3 Tương phản (Tối thiểu) | AA | 4.5:1 | 3:1 |
| 1.4.6 Tương phản (Nâng cao) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Tương phản phi văn bản | AA | 3:1 cho viền thành phần giao diện, chỉ báo tiêu điểm và biểu tượng/đồ họa có ý nghĩa | |
Chữ lớn là chữ có cỡ ít nhất 18 pt (24 px) thường hoặc 14 pt (≈18.66 px) đậm. Logo, chữ thuần trang trí và chữ trên các điều khiển bị vô hiệu hóa được miễn áp dụng.
Cách tính tỷ lệ
Mỗi kênh sRGB được tuyến tính hóa (giá trị ≤ 0.04045 được chia cho 12.92, các giá trị khác dùng ((c + 0.055) / 1.055)2.4), sau đó kết hợp thành độ sáng tương đối: L = 0.2126 R + 0.7152 G + 0.0722 B. Tỷ lệ là (Lsáng hơn + 0.05) / (Ltối hơn + 0.05). Ngưỡng rất nghiêm ngặt: #777777 trên nền trắng đạt 4.47:1 và không qua AA, còn #767676 đạt 4.54:1 và qua chuẩn. Vì vậy công cụ này cắt bớt chứ không làm tròn tỷ lệ hiển thị. Chữ bán trong suốt được pha với nền trước, đúng như cách trình duyệt vẽ.
APCA là gì?
Thuật toán Tương phản Cảm nhận Dễ tiếp cận (APCA) là phương pháp tương phản được đề xuất cho WCAG 3 trong tương lai. Nó cho ra giá trị tương phản độ sáng Lc từ khoảng 0 đến 106 (âm với chữ sáng trên nền tối) và có tính đến cực tính: chữ sáng trên nền tối và chữ tối trên nền sáng không được cảm nhận giống nhau. Tham khảo: Lc 90 được ưu tiên cho nội dung chính, Lc 75 là mức tối thiểu cho nội dung chính và Lc 60 cho các nội dung văn bản khác. APCA vẫn là bản nháp, vì vậy hiện tại hãy đáp ứng WCAG 2.x để 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.
Sửa một cặp màu chưa đạt
Bảng gợi ý tìm màu gần nhất đạt chuẩn bằng cách chỉ thay đổi độ sáng HSL của chữ hoặc nền, nhờ đó sắc độ thương hiệu được giữ nguyên. Với các biến thể tối hơn hoặc sáng hơn của màu thương hiệu, hãy tạo bảng sắc thái đầy đủ bằng Công cụ chuyển đổi màu rồi kiểm tra các cặp màu tại đây. Trong Webflow, Vision preview của Designer mô phỏng tình trạng mù màu nhưng không hiển thị tỷ lệ, vì vậy hãy kiểm tra con số chính xác tại đây trước khi xuất bản.
Cũng được tìm dưới tên: tỷ lệ tương phản wcag, tỷ lệ tương phản, khả năng truy cập, a11y, chuẩn aa aaa, apca, độ tương phản chữ, color contrast checker.
Các công cụ dùng kèm tốt với Kiểm tra tương phản màu
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Kiểm tra Alt ảnh — Kiểm tra mọi hình ảnh trên trang trong một bảng: trạng thái alt text, dung lượng file, thuộc tính chiều rộng/chiều cao, định dạng và lazy loading — có bộ lọc và xuất CSV.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Chuyển HEX sang OKLCH — Dán mã màu HEX và nhận giá trị OKLCH dùng cho CSS.