Chuyển đổi miễn phí

Độ tương phản màu Người kiểm tra (WCAG)

Kiểm tra tỷ lệ tương phản giữa hai màu để đảm bảo tuân thủ khả năng truy cập WCAG AA và AAA. Miễn phí, tức thì và chạy hoàn toàn trong trình duyệt của bạn.

Văn bản mẫu - Kích thước bình thường

Văn bản nhỏ mẫu — 14px

Tỷ lệ tương phản:21.00:1
WCAG AAVăn bản thông thườngVượt qua
WCAG AAVăn bản lớnVượt qua
WCAG AAAVăn bản thông thườngVượt qua
WCAG AAAVăn bản lớnVượt qua

Về công cụ này

Kiểm tra tỷ lệ tương phản màu giữa văn bản nền trước và màu nền theo nguyên tắc trợ năng WCAG 2.1. Nhập màu dưới dạng mã hex, giá trị RGB hoặc giá trị HSL và xem ngay tỷ lệ tương phản cùng với kết quả đạt/không đạt để tuân thủ WCAG AA và AAA ở cả kích thước văn bản bình thường và lớn.

Cách sử dụng

  1. Nhập hoặc chọn màu nền trước (văn bản) của bạn bằng cách sử dụng bộ chọn màu hoặc kiểu nhập hex.
  2. Nhập hoặc chọn màu nền của bạn.
  3. Xem tỷ lệ tương phản và kết quả đạt/không đạt WCAG 2.1 AA/AAA ngay lập tức.
  4. Điều chỉnh màu sắc cho đến khi bạn đạt được mức độ tuân thủ mong muốn.

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

Tỷ lệ tương phản nào là cần thiết để tuân thủ WCAG?
WCAG AA yêu cầu 4,5:1 đối với văn bản thông thường và 3:1 đối với văn bản lớn (18pt+ hoặc 14pt+ in đậm). WCAG AAA yêu cầu 7:1 đối với văn bản thông thường và 4,5:1 đối với văn bản lớn. Tỷ lệ tối đa có thể là 21:1 (đen trên trắng).
Tại sao độ tương phản màu sắc lại quan trọng?
Độ tương phản vừa đủ đảm bảo người dùng có thị lực kém, mù màu hoặc những người xem màn hình dưới ánh sáng mặt trời có thể đọc được văn bản. Đây cũng là yêu cầu pháp lý theo quy định về khả năng truy cập của ADA và EU đối với nhiều trang web.
Thế nào được coi là 'văn bản lớn' trong WCAG?
Văn bản lớn được xác định là 18pt (24px) trở lên đối với độ đậm thông thường hoặc 14pt (18,66px) trở lên đối với văn bản in đậm. Văn bản lớn có yêu cầu về độ tương phản thấp hơn vì nó dễ đọc hơn.
Công cụ này có kiểm tra độ tương phản của các thành phần không phải văn bản không?
WCAG 2.1 yêu cầu tỷ lệ tương phản 3:1 cho các thành phần giao diện người dùng và đối tượng đồ họa (nút, biểu tượng, trường biểu mẫu). Bạn cũng có thể sử dụng công cụ này để xác minh những điều đó - chỉ cần nhập màu thành phần và màu nền.