Kiểm tra độ tương phản màu

Kiểm tra tỷ lệ tương phản giữa màu nền và màu văn bản để đảm bảo khả năng truy cập.

Kiểm tra màu của bạn

Kiểm tra các kết hợp màu để đảm bảo chúng đáp ứng tiêu chuẩn truy cập WCAG cho khả năng đọc văn bản.

1.00:1
Tương phản
Không đạt
Rất kém

Văn bản thông thường

AA (4.5:1)
Không đạt
AAA (7:1)
Không đạt

Văn bản lớn

AA (3:1)
Không đạt
AAA (4.5:1)
Không đạt

Sửa nhanh

Aa
Tiêu đề xem trước

Con cáo nâu nhanh nhẹn nhảy qua con chó lười biếng

Ví dụ văn bản nhỏ (12px)

Văn bản
#000000
Nền
#2596be

Tiêu chuẩn WCAG

Mức AA

Tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. Cần thiết cho hầu hết các trang web.

Mức AAA

Tỷ lệ tương phản nâng cao 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Khuyến nghị để tối ưu khả năng truy cập.

Độ tương phản không đủ cho tất cả kích thước văn bản - không đạt tiêu chuẩn WCAG.

Kiểm tra độ tương phản màu

Tính toán tỷ lệ tương phản của màu văn bản và nền.

Chọn màu bằng bộ chọn màu cho văn bản và màu nền hoặc nhập một màu ở định dạng hệ mười sáu RGB (ví dụ: #259 hoặc #2596BE). Bạn có thể điều chỉnh thanh trượt để chọn màu. Hướng dẫn về Nội dung Web (WCAG) có hướng dẫn cụ thể để giúp xác định xem văn bản có dễ đọc cho người dùng không. Tiêu chí này sử dụng một thuật toán cụ thể để ánh xạ các kết hợp màu thành các tỷ lệ so sánh. Sử dụng công thức này, WCAG cho rằng một tỷ lệ tương phản màu 4.5:1 với văn bản và nền là đủ cho văn bản thường, và văn bản lớn (18+ pt thường, hoặc 14+ pt đậm) nên có ít nhất tỷ lệ tương phản 3:1.

Tính năng chính

  • Tính toán tỷ lệ tương phản theo thời gian thực
  • Kiểm tra tuân thủ WCAG AA & AAA
  • Thanh trượt HSL để tinh chỉnh
  • Nhiều định dạng xem trước

Công cụ nâng cao

  • Tự động sửa màu
  • Mẫu văn bản và nền
  • Phát hiện tên màu
  • Xuất kết quả

Câu hỏi thường gặp

Để đạt WCAG AA, văn bản thường cần tỷ lệ tương phản tối thiểu 4,5:1, còn văn bản lớn (18pt hoặc 14pt đậm) cần 3:1.

WCAG AAA yêu cầu tỷ lệ tương phản cao hơn: 7:1 đối với văn bản thường và 4,5:1 đối với văn bản lớn, so với 4,5:1 và 3:1 của AA.

Sử dụng tính năng tự động sửa để điều chỉnh màu chữ hoặc màu nền mà vẫn giữ đúng ý đồ thiết kế, hoặc điều chỉnh thủ công bằng thanh trượt HSL có chỉ báo trực quan cho thấy vùng tối ưu để đạt tuân thủ AA/AAA.

Vùng màu xanh lá và các mốc AA/AAA cho thấy phạm vi tối ưu để đạt tuân thủ WCAG. Gợi ý hướng (Sáng hơn/Tối hơn) giúp bạn đạt độ tương phản tốt hơn dựa trên tổ hợp màu hiện tại.

Có, bạn có thể nhập bất kỳ mã màu hex nào hoặc dùng bộ chọn màu để chọn màu riêng. URL sẽ tự động cập nhật để bạn chia sẻ những tổ hợp màu cụ thể.