Cách sử dụng Kiểm tra độ tương phản
- 1
Nhập hai màu
Nhập Màu chữ và Màu nền dưới dạng HEX, rgb(), hsl() hoặc oklch(), hoặc mở ô màu tròn để chọn.
- 2
Xem kết luận
Tỷ lệ và năm hàng Đạt hoặc Không đạt cho biết mức AA và AAA với chữ thường và chữ lớn, cùng quy tắc 3:1 cho biểu tượng và đường viền.
- 3
Áp dụng gợi ý
Nếu một mức không đạt, hãy dùng màu chữ hoặc màu nền đậm hơn hay sáng hơn gần nhất mà đạt yêu cầu, rồi sao chép giá trị mới.
Giới hạn và Pro
Miễn phí, không giới hạn: kiểm tra bao nhiêu lần tùy ý, 5 tiêu chí WCAG 2.2 cho mỗi cặp màu, 2 gợi ý chỉnh sửa cho mỗi mức không đạt và lưới tối đa 7 màu.
Về Kiểm tra độ tương phản
Công cụ kiểm tra độ tương phản này đo mức chênh lệch độ sáng giữa hai màu bằng công thức độ chói tương đối của WCAG 2.2, cũng là cách tính mà các bài kiểm tra khả năng truy cập của trình duyệt và plugin thiết kế sử dụng. Kết quả là một tỷ lệ từ 1:1 (hai màu giống nhau) đến 21:1 (chữ đen trên nền trắng). Tiêu chí 1.4.3 yêu cầu 4,5:1 cho chữ nội dung và 3:1 cho chữ lớn ở mức AA; tiêu chí 1.4.6 nâng lên 7:1 và 4,5:1 cho mức AAA; tiêu chí 1.4.11 yêu cầu 3:1 cho các thành phần không phải chữ nhưng có ý nghĩa, như viền focus, viền ô nhập và đường trong biểu đồ.
Phần xem mẫu hiển thị chữ ở cả hai cỡ, một nút có viền và một biểu tượng bằng màu của bạn, nên bạn đánh giá được cả độ dễ đọc chứ không chỉ con số. Tỷ lệ được cắt bớt còn hai chữ số thập phân thay vì làm tròn, vì cặp màu 4,496:1 không đạt yêu cầu 4,5:1. Khi một mức không đạt, công cụ tìm theo độ sáng OKLCH của một màu, giữ nguyên sắc độ và độ bão hòa, rồi đề xuất giá trị đạt gần nhất, riêng cho màu chữ và màu nền.
Công cụ chỉ dành cho màu đơn sắc. Công cụ không đánh giá được chữ trên ảnh hoặc dải màu chuyển, độ trong suốt, cách hiển thị độ đậm của phông chữ trên từng màn hình, hay phương pháp APCA mới được đề xuất cho WCAG 3. Vì vậy hãy xem kết quả đạt là mức tối thiểu và thử cả trên màn hình thực tế.
Quyền riêng tư
Cả hai màu chỉ nằm trong tab này: tỷ lệ, kết quả Đạt hoặc Không đạt và các gợi ý chỉnh sửa đều do trình duyệt tính toán, không có giá trị màu nào được gửi đến máy chủ hay lưu lại.