Kiểm tra độ tương phản (xếp hạng WCAG AA / AAA)
Chọn màu nền trước và màu nền để tính tỷ lệ tương phản WCAG. Bản xem trước văn bản trực tiếp và bốn huy hiệu xếp hạng (AA thường, AA lớn, AAA thường, AAA lớn) cập nhật theo thời gian thực.
Cách hoạt động
Cách tỷ lệ tương phản hoạt động
WCAG (Hướng dẫn Khả năng Tiếp cận Nội dung Web) định nghĩa độ tương phản là tỷ lệ giữa độ sáng tương đối của hai màu. Công thức tuyến tính hóa từng kênh sRGB, cân theo độ nhạy cảm của mắt người (R 0,2126, G 0,7152, B 0,0722), rồi tính (sáng hơn + 0,05) / (tối hơn + 0,05). Kết quả nằm trong khoảng 1:1 (giống hệt) đến 21:1 (đen trên trắng).
Chúng tôi tính toán trong trình duyệt của bạn bằng công thức WCAG 2.x chính thức. Bốn huy hiệu xếp hạng kiểm tra theo ngưỡng 4,5:1 (thường) và 3:1 (lớn) của AA, và 7:1 (thường) và 4,5:1 (lớn) của AAA. 'Văn bản lớn' là 24px / 18pt hoặc lớn hơn, hoặc 18,66px / 14pt đậm.
Tại sao cần đạt AA tối thiểu
AA là mức có thể thực thi về mặt pháp lý ở nhiều khu vực pháp lý (ADA của Mỹ, EN 301 549 của EU, Đạo luật Bình đẳng của Anh cho dịch vụ kỹ thuật số). Không đạt AA trên văn bản thân là vấn đề tiếp cận phổ biến nhất và dễ sửa nhất trong giai đoạn thiết kế hơn là sau khi ra mắt.
AAA được khuyến nghị cho đọc dài hạn, dịch vụ chính phủ và giao diện rủi ro cao. Nó nghiêm ngặt — bản năng đầu tiên của nhà thiết kế về màu xám nhạt trên trắng thường không đạt AAA dễ dàng. Nếu trang web của bạn chủ yếu phục vụ nội dung xem nhanh, nhắm AA; nếu bạn xuất bản sách, bài viết hoặc thông tin quan trọng, nhắm AAA.
Các lỗi phổ biến
'Trông ổn trên màn hình của tôi.' Màn hình đã hiệu chỉnh, đèn huỳnh quang văn phòng và sử dụng điện thoại thông minh ngoài trời đều thay đổi độ tương phản cảm nhận. Dùng tỷ lệ, không phải mắt của bạn.
Thiết kế chế độ tối bằng cách đảo ngược mã hex. Đảo ngược thay đổi hue và phá vỡ độ tương phản. Kiểm tra lại từng cặp màu sau khi chuyển đổi chủ đề.
Tin tưởng vào hướng dẫn thương hiệu. Nhiều bảng màu thương hiệu được chọn trước khi có nhận thức về WCAG. Nếu màu hồng thương hiệu trên trắng không đạt, hãy đề xuất màu hồng tối hơn một chút cho văn bản thân và giữ màu gốc cho mục đích trang trí.
Câu hỏi thường gặp
›Sự khác biệt giữa AA và AAA là gì?
AA yêu cầu 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA chặt chẽ hơn ở mức 7:1 và 4,5:1. AAA được khuyến nghị nhưng không phải lúc nào cũng đạt được.
›'Văn bản lớn' là gì?
WCAG định nghĩa là 18pt (24px) hoặc lớn hơn, hoặc 14pt (18,66px) và đậm.
›Công cụ này có hỗ trợ độ trong suốt không?
Chưa. Chọn màu thực tế người dùng thấy (nền trước kết hợp trên nền). Hỗ trợ độ trong suốt có thể có sau.
›Tại sao thương hiệu của tôi không đạt?
Nhiều bảng màu thương hiệu được chọn vì thẩm mỹ, không phải khả năng tiếp cận. Sửa phổ biến: làm tối màu điểm nhấn được dùng làm văn bản, giữ biến thể nhạt cho nền hoặc các yếu tố trang trí.
›Tỷ lệ có giống 'độ tương phản cảm nhận' không?
Không — WCAG 2.x dùng công thức dựa trên độ sáng đơn giản hóa. WCAG 3 (đang phát triển) dùng APCA, dự đoán độ tương phản cảm nhận tốt hơn nhưng chưa được chuẩn hóa.
›Tỷ lệ nào cho biểu tượng hoặc điều khiển UI?
WCAG 2.1 thêm tối thiểu 3:1 cho độ tương phản phi văn bản (biểu tượng, điều khiển biểu mẫu, chỉ báo focus). Dùng cùng bộ kiểm tra — đáp ứng hoặc vượt quá 3:1.
›Điều này có hoạt động cho biểu đồ đồ thị không?
Cùng ngưỡng áp dụng giữa các màu liền kề truyền tải ý nghĩa. Đối với trực quan hóa dữ liệu, 3:1 giữa các màu liền kề là tối thiểu WCAG 1.4.11.
›Dữ liệu có được gửi đi đâu không?
Không. Tính toán chạy cục bộ trong trình duyệt của bạn.
Công cụ liên quan
Cập nhật lần cuối: