Kiểm Tra Tương Phản
Kiểm tra tỷ lệ tương phản giữa màu chữ (foreground) và màu nền (background), rồi xem ngay kết quả có đạt ngưỡng WCAG 2.1 AA và AAA hay không. Hãy dùng công cụ này khi thiết kế giao diện hoặc chọn cặp màu dễ đọc. Mọi tính toán chạy ngay trong trình duyệt nên màu của bạn không rời khỏi thiết bị.
Các bước sử dụng
- Trong thẻ Màu, đặt màu Chữ / màu chữ — nhấn ô màu để dùng bảng chọn, hoặc gõ mã hex (ví dụ
#1a1a1a) vào ô nhập. - Đặt màu Nền theo cách tương tự, dùng bảng chọn màu hoặc ô nhập hex của nó.
- Quan sát khung Xem trước hiển thị chữ cỡ lớn, thường và nhỏ trên cặp màu bạn chọn để đánh giá độ dễ đọc bằng mắt.
- Đọc con số Tỉ lệ tương phản lớn (dạng
X.XX:1) — màu xanh là tốt, vàng là ở ngưỡng, đỏ là chưa đạt. - Xem các dòng đạt/không đạt bên dưới cho AA Normal (≥ 4.5), AA Large (≥ 3), AAA Normal (≥ 7), AAA Large (≥ 4.5) và Thành phần giao diện / đồ họa (≥ 3).
- Dùng nút Đổi chỗ để hoán đổi màu chữ và màu nền rồi kiểm tra lại cặp màu đảo ngược.
Mẹo
- "Large text" (chữ lớn) nghĩa là khoảng từ 18pt/24px (hoặc 14pt/18.66px in đậm) trở lên — chỉ cần tỷ lệ 3:1, nên một cặp màu không đạt cho chữ nội dung vẫn có thể đạt cho tiêu đề.
- Dòng Thành phần giao diện / đồ họa (≥ 3) là mục tiêu cho biểu tượng, viền ô nhập, viền focus và các thành phần không phải chữ.
- Nếu đã cố định một màu, hãy chỉnh mã hex của màu còn lại và xem tỷ lệ cập nhật trực tiếp để tìm sắc độ tối thiểu chấp nhận được.
Câu hỏi thường gặp
Nên nhắm tới tỷ lệ tương phản bao nhiêu?
Hãy đạt tối thiểu 4.5:1 để qua AA cho chữ nội dung thường, hoặc 7:1 để đạt AAA. Chữ lớn và thành phần giao diện chỉ cần 3:1.
Ô nhập có chấp nhận gì ngoài mã hex không?
Ô nhập văn bản yêu cầu mã màu hex. Bạn có thể dùng ô chọn màu để chọn trực quan; nó sẽ tự điền giá trị hex giúp bạn.
Dữ liệu màu của tôi có bị tải lên đâu không?
Không. Độ tương phản được tính hoàn toàn trong trình duyệt — không có gì được gửi lên máy chủ.