Trình kiểm tra độ tương phản WCAG
Kiểm tra mọi cặp màu nền trước và màu nền sau để biết tỷ lệ tương phản WCAG 2.1 (1 đến 21). Xem đạt/không đạt đối với Cấp độ AA và AAA, đối với văn bản thông thường, văn bản lớn (in đậm 18pt+ hoặc 14pt) và các thành phần giao diện người dùng. Cần thiết trước khi vận chuyển các nút, liên kết và nhãn biểu mẫu — nhiều bảng màu thương hiệu không thành công cho đến khi bạn làm tối văn bản hoặc làm sáng bề mặt.
Màu chữ
Màu nền
Aa Bb Cc — 123
Kết quả
16.12 : 1
AA — Đạt
AA (chữ lớn) — Đạt
AAA — Đạt
AAA (chữ lớn) — Đạt
Cách kiểm tra độ tương phản màu
1. Nhập hoặc chọn màu nền trước (văn bản) và màu nền.
2. Đọc tỷ lệ tương phản (ví dụ: 4,52:1).
3. Kiểm tra các hàng AA và AAA cho văn bản bình thường và lớn kích thước.
4. Điều chỉnh độ sáng HSL cho đến khi vượt qua mức yêu cầu, sau đó sao chép các giá trị hex.
Ví dụ kiểm tra độ tương phản
Nội dung #374151 trên #FFFFFF
Tỷ lệ ≈ 8,9:1 — vượt qua AAA đối với văn bản thông thường (cần 7:1). Thoải mái đọc dạng dài.
Màu xám nhạt #9CA3AF trên nền trắng
Tỷ lệ ≈ 2,6:1 — không đạt AA đối với văn bản thông thường (cần 4,5:1). Lỗi giữ chỗ thường gặp.
Nút chính màu trắng trên #2563EB
Tỷ lệ ≈ 4,6:1 — vượt qua văn bản thông thường AA; chuyển sang màu xanh lam đậm hơn đối với AAA hoặc chỉ sử dụng với số lượng lớn.
Khi nào nên dùng công cụ này
• Khi bạn kiểm tra mã thông báo hệ thống thiết kế trước khi phát hành.
• Khi bạn sửa các phát hiện về khả năng truy cập từ Lighthouse hoặc axe.
• Khi bạn chọn màu liên kết phải khác với văn bản nội dung, không chỉ theo màu sắc.
Khi nào nên chọn công cụ khác
• Khi bạn cần kiểm tra toàn trang — hãy dùng máy quét tự động trên DOM được hiển thị.
• Khi kiểm tra nền không rắn (hình ảnh, độ dốc) — mẫu pixel trong trường hợp xấu nhất.
• Khi mô phỏng mù màu — hãy dùng trình mô phỏng thị giác chuyên dụng.
Giải thích các cấp độ WCAG 2.1
Mức A là tối thiểu; AA là mục tiêu pháp lý ở nhiều khu vực pháp lý (ADA, khu vực công EAA). AAA rất hấp dẫn đối với nội dung — dòng tiêu đề lớn có thể vượt qua AAA dễ dàng hơn chú thích 14px. Chỉ báo hiển thị tiêu điểm (2.4.7) bổ sung độ tương phản — người dùng bàn phím cần có vòng tiêu điểm hiển thị, thường là 3:1 so với các màu liền kề. Tài liệu đạt/không đạt trong hệ thống thiết kế của bạn bên cạnh mỗi cặp mã thông báo.
Khắc phục lỗi mà không đổi thương hiệu
Nếu màu tím thương hiệu không thành công trên màu trắng, đừng hoán đổi màu sắc — làm tối nền trước 5–10% độ sáng hoặc chỉ sử dụng màu tím cho các tiêu đề lớn. Văn bản giữ chỗ phải đáp ứng độ tương phản (4,5:1), không chỉ các giá trị đầu vào. Các trạng thái bị vô hiệu hóa có thể được miễn độ tương phản văn bản nghiêm ngặt nhưng không được truyền tải thông tin quan trọng chỉ bằng màu sắc. Ghép nối trình kiểm tra này với bộ chuyển đổi màu để lặp lại HSL nhanh chóng.
Câu hỏi thường gặp
Tỷ lệ tương phản nào cho văn bản WCAG AA thông thường?
Ít nhất 4,5:1 cho văn bản thông thường và 3:1 cho văn bản lớn (18pt+ hoặc 14pt in đậm).
Điều gì dành cho AAA?
Văn bản thông thường 7:1, văn bản lớn 4,5:1 — chặt chẽ hơn, thường được sử dụng cho các trang web của chính phủ.
Các thành phần giao diện người dùng có cần độ tương phản không?
WCAG 2.1 yêu cầu 3:1 cho các đối tượng đồ họa và ranh giới thành phần giao diện người dùng (1.4.11).
Tỷ lệ được tính như thế nào?
Dựa trên tương đối độ chói của màu sRGB: (L1 + 0,05) / (L2 + 0,05) trong đó L1 nhạt hơn.
Gạch chân có khắc phục được các liên kết có độ tương phản thấp không?
Không — vẫn cần độ tương phản. Gạch chân giúp gợi ý không phải màu sắc nhưng không thay thế các quy tắc tỷ lệ.
Dữ liệu của tôi có bị gửi lên máy chủ không?
Không.
Công cụ này có miễn phí không?
Có.