Không tải lên, 100% cục bộ, không cần tài khoản

Kiểm tra tương phản WCAG

Nhập hoặc chọn hai màu để xem ngay tỷ lệ tương phản WCAG, kèm huy hiệu đạt chuẩn AA/AAA cho văn bản thường và lớn.

Cách Kiểm tra độ tương phản hoạt động

Công cụ này tính tỷ lệ tương phản WCAG giữa hai màu và cho biết cặp màu đó có đạt mức AA hay AAA cho văn bản thường, văn bản lớn và các thành phần giao diện không phải văn bản hay không. Mọi thứ được tính cục bộ ngay trong trình duyệt của bạn; các màu bạn nhập không bao giờ được tải lên.

Cách sử dụng Kiểm tra độ tương phản, từng bước

  1. Nhập hoặc chọn màu chữ (foreground).
  2. Nhập hoặc chọn màu nền.
  3. Đọc tỷ lệ tương phản và các huy hiệu AA/AAA cho văn bản thường, văn bản lớn và các thành phần giao diện không phải văn bản.
  4. Dùng Hoán đổi màu để kiểm tra cặp màu theo chiều ngược lại.

Trường hợp sử dụng thường gặp

  • Kiểm tra màu chủ đạo của thương hiệu so với trắng hoặc đen trước khi phát hành một thành phần nút bấm.
  • Xác minh rằng văn bản nội dung màu xám nhạt vẫn đạt mức AA trên nền thẻ (card) sáng màu.
  • Xác nhận màu liên kết bên trong một đoạn văn đạt ngưỡng 4,5:1 dành cho văn bản thường.
  • Kiểm tra xem một tiêu đề lớn, độ đậm nhẹ có vẫn đạt ngưỡng 3:1 nới lỏng dành cho văn bản lớn hay không.

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

Công cụ này có gửi màu của tôi lên máy chủ không?

Không, phép tính diễn ra hoàn toàn trong trình duyệt của bạn bằng JavaScript; không có gì bạn nhập vào bị tải lên.

Tôi cần tỷ lệ tương phản bao nhiêu để đạt AA hoặc AAA?

WCAG 2.x yêu cầu 4,5:1 cho AA với văn bản thường, 7:1 cho AAA với văn bản thường, 3:1 cho AA với văn bản lớn và 4,5:1 cho AAA với văn bản lớn.

Thế nào được coi là văn bản lớn?

Ít nhất 24px (18pt) độ đậm thường, hoặc khoảng 18,7px (14pt) đậm; văn bản nhỏ hơn sẽ dùng ngưỡng của văn bản thường.

Vì sao hoán đổi màu chữ và màu nền không làm thay đổi tỷ lệ?

Công thức tính tỷ lệ có tính đối xứng: nó chỉ so sánh độ sáng của màu sáng hơn và màu tối hơn, không quan tâm màu nào được dùng làm chữ. Việc hoán đổi vẫn hữu ích vì nó cho biết cặp màu có tiếp tục đạt chuẩn khi đảo vai trò hay không, ví dụ chữ tối trên nền sáng so với chữ sáng trên nền tối.

Đạt mức AA có đảm bảo thiết kế của tôi dễ tiếp cận không?

Không. Tương phản chỉ là một trong nhiều tiêu chí thành công của WCAG. Việc lựa chọn màu cho người khiếm khuyết thị giác màu sắc, khả năng nhìn thấy tiêu điểm (focus), thay đổi cỡ chữ và điều hướng bằng bàn phím là những kiểm tra riêng biệt; công cụ mô phỏng mù màu trên trang này đáp ứng một trong số đó.

Đây có phải là công cụ chính thức của W3C hay WebAIM không?

Không. Công cụ này triển khai độc lập công thức tính tương phản WCAG 2.x công khai, không liên kết với W3C hay bất kỳ tổ chức nào khác về khả năng tiếp cận.