Kiểm tra độ tương phản màu
Đảm bảo chữ của bạn dễ đọc với mọi người, và nhận gợi ý sửa khi chưa đạt.
Đã niêm phong trên thiết bị này
Chạy ngay trong trình duyệt. Không có gì được tải lên.
Đã niêm phong
Màu sắc
- Tỷ lệ tương phản
- Chữ thường
- AA · 4,5:1
- AAA · 7:1
- Chữ lớn
- AA · 3:1
- AAA · 4,5:1
- Thành phần giao diện và biểu tượng
- AA · 3:1
- Độ tương phản APCA (tham khảo)
APCA là phương pháp mới đang được nghiên cứu cho các hướng dẫn trợ năng trong tương lai. Hiện nay WCAG 2.2 vẫn là chuẩn tham chiếu.
Xem trước
Chữ lớn trông như thế này
Chữ thường cần luôn dễ đọc với mọi người, kể cả người có thị lực kém, khi xem điện thoại dưới nắng gắt hay trên màn hình cũ.
Chữ nhỏ và chú thích cần độ tương phản cao nhất.
Gợi ý sửa
Cách hoạt động
-
Nhập hai màu của bạn
Gõ hoặc chọn màu chữ và màu nền. Định dạng nào cũng được: HEX, RGB, HSL hoặc tên màu CSS.
-
Xem kết quả
Xem tỷ lệ tương phản và liệu nó có đạt WCAG 2.2 AA và AAA cho chữ thường, chữ lớn và thành phần giao diện hay không.
-
Áp dụng gợi ý nếu cần
Nếu một mức không đạt, hãy dùng một trong các màu được gợi ý: đó là màu gần nhất, cùng sắc độ, đạt chuẩn.
Câu hỏi thường gặp
Tôi cần tỷ lệ tương phản bao nhiêu?
WCAG 2.2 mức AA yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn. Mức AAA yêu cầu 7:1 và 4,5:1. Biểu tượng, viền ô nhập liệu và các thành phần giao diện khác cần tối thiểu 3:1 so với phần bên cạnh.
Thế nào được tính là chữ lớn?
Chữ có cỡ từ 18 point (24 pixel CSS) trở lên, hoặc từ 14 point (khoảng 18,7 pixel CSS) trở lên khi in đậm. Mọi chữ nhỏ hơn là chữ thường.
Tại sao 4,49:1 không đạt dù rất gần 4,5:1?
Ngưỡng WCAG là mức tối thiểu nghiêm ngặt và tỷ lệ không được làm tròn lên. Vì vậy công cụ này hiển thị tỷ lệ đã làm tròn xuống: giá trị trông như đạt thì thật sự là đạt.
APCA là gì?
APCA (Accessible Perceptual Contrast Algorithm) là cách đo độ tương phản mới, có tính đến việc chữ tối trên nền sáng hay chữ sáng trên nền tối. Phương pháp này đang được nghiên cứu cho phiên bản tương lai của các hướng dẫn. Ở đây nó chỉ hiển thị để tham khảo: hiện nay, các yêu cầu pháp lý và kiểm định đều dựa trên tỷ lệ WCAG 2.
Các màu gợi ý được chọn như thế nào?
Công cụ giữ nguyên sắc độ và độ rực của màu, chỉ thay đổi độ sáng trong không gian màu cảm nhận OKLCH, cho đến khi tìm được giá trị gần nhất đạt mức yêu cầu. Màu của bạn vẫn giữ được nét riêng, chỉ sáng hơn hoặc tối hơn một chút.
Công cụ có dùng được với màu trong suốt không?
Có, với màu chữ: màu chữ bán trong suốt được hòa với màu nền trước, vì đó là màu mọi người thực sự nhìn thấy. Màu nền được coi là màu đặc.