ImageColorPicker.com

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.

20.75 trên 1
Tương phản
AAA
Kết quả văn bản
Tuyệt vời

So sánh: #000000 trên #FFFFEB

Văn bản

16px, Thường (400)

Được xem là văn bản bình thường.

  • AA (WCAG 1.4.3): ít nhất 4.5:1

    Đạt

  • AAA (WCAG 1.4.6): ít nhất 7:1

    Đạt

Thành phần UI và đồ họa

Biểu tượng, đường viền ô nhập, chỉ báo focus và những phần khác bạn cần thấy để sử dụng giao diện.

  • AA (WCAG 1.4.11): ít nhất 3:1

    Đạt
20.75 trên 1. Văn bản: đạt AA, đạt AAA. Thành phần UI: đạt.
Cách kiểm tra
Các màu được so sánh (sau khi pha)
Văn bản #000000 trên nền #FFFFEB
Độ sáng tương đối
Văn bản 0.0000, nền 0.9877
Công thức
(L1 + 0.05) / (L2 + 0.05) trong đó L1 là độ sáng của màu sáng hơn và L2 của màu tối hơn.
Tỷ lệ chính xác
20.7556 trên 1, hiển thị là 20.75 trên 1. Giá trị hiển thị bị cắt bớt, không làm tròn, nên nó không bao giờ trông tốt hơn thực tế. Giá trị chính xác mới là cái được so sánh với yêu cầu.

Kích thước chữ: 16px, Thường (400)

Được xem là văn bản bình thường. Văn bản lớn là ít nhất 24px (18pt), hoặc ít nhất 18.67px (14pt) khi đậm (độ dày 700 trở lên). Kích thước được hiển thị cắt bớt, không làm tròn.

Được xem là văn bản bình thường. Văn bản lớn là ít nhất 24px (18pt), hoặc ít nhất 18.67px (14pt) khi đậm (độ dày 700 trở lên). Kích thước được hiển thị cắt bớt, không làm tròn.

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
#ffffeb

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.

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ể.