Quy trình kiểm tra độ tương phản WCAG trải qua một vài bước đơn giản. Không có gì rời khỏi trình duyệt của bạn.
- Bạn nhập màu nền trước và màu nền sau. Công cụ phân tích các mã hex, rgb(), hsl() hoặc màu CSS có tên thành các giá trị kênh đỏ, lục và lam của chúng.
- Mỗi kênh RGB được tuyến tính hóa bằng hàm truyền sRGB. Điều này chuyển đổi các giá trị hiển thị đã mã hóa gamma thành cường độ ánh sáng tuyến tính.
- Các giá trị tuyến tính được tính theo độ nhạy của mắt người đối với từng kênh — 0.2126 cho đỏ, 0.7152 cho lục, 0.0722 cho lam. Tổng là độ chói tương đối của màu.
- Tỷ lệ tương phản là (L1 + 0.05) ÷ (L2 + 0.05), trong đó L1 là độ chói của màu sáng hơn và L2 là độ chói của màu tối hơn. 0.05 bổ sung giữ cho công thức hợp lệ với màu đen tuyền.
- Tỷ lệ được so sánh với các ngưỡng WCAG: văn bản thường AA cần ít nhất 4.5:1, văn bản lớn AA cần 3:1, văn bản thường AAA cần 7:1 và văn bản lớn AAA cần 4.5:1. Văn bản lớn có nghĩa là ít nhất 18pt hoặc 14pt in đậm.
FAQ
Các câu hỏi thường gặp về kiểm tra độ tương phản WCAG.
Sự khác biệt giữa AA và AAA là gì?
AA là mức tuân thủ tối thiểu cho hầu hết nội dung web. Nó yêu cầu tỷ lệ tương phản ít nhất 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA là tiêu chuẩn cao hơn yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Bạn có thể nhắm mục tiêu AAA cho nội dung chính như nội dung thân trên trang web tin tức, trong khi sử dụng AA cho thiết kế rộng hơn. Đáp ứng AAA ở mọi nơi có thể khó với màu thương hiệu, vì vậy nhiều nhóm nhắm mục tiêu AA trên toàn bảng và nâng văn bản chính lên AAA khi có thể.
Thế nào được gọi là "văn bản lớn" theo WCAG?
WCAG 2.x định nghĩa văn bản lớn là ít nhất 18 point (24px) cho trọng lượng thường hoặc 14 point (khoảng 19px) cho trọng lượng đậm. Các ký hiệu và biểu tượng là một phần của phông chữ tuân theo cùng một ngưỡng. Nếu bạn không chắc ngưỡng nào áp dụng cho giao diện của mình, hãy kiểm tra cả hai — AA Lớn có yêu cầu thấp hơn (3:1), vì vậy hầu hết các cặp màu không đạt AA Thường thực sự đạt AA Lớn khi văn bản đủ lớn.
Tại sao cặp màu của tôi đạt AA Lớn nhưng không đạt AA Thường?
Bởi vì AA Lớn chỉ yêu cầu tỷ lệ 3:1 trong khi AA Thường yêu cầu 4.5:1. WCAG đặt ngưỡng thấp hơn cho văn bản lớn vì các ký tự lớn hơn dễ đọc hơn ngay cả khi có ít độ tương phản hơn. Một cặp màu đạt, ví dụ, 4.0:1 đạt AA Lớn (ngưỡng 3:1) nhưng không đạt AA Thường (ngưỡng 4.5:1). Điều này rất phổ biến với các màu thương hiệu sáng hơn được sử dụng làm nền trước trên nền trắng.
Tôi có thể chỉ dựa vào công cụ này để kiểm tra khả năng tiếp cận không?
Công cụ này kiểm tra một thứ — tỷ lệ tương phản WCAG 2.x giữa hai màu đặc. Khả năng tiếp cận thực sự liên quan đến nhiều hơn: chỉ báo tiêu điểm, kích thước và trọng lượng phông chữ, màu sắc là cách duy nhất để truyền đạt thông tin cũng như khả năng tương thích với trình đọc màn hình và công cụ phóng to. Sử dụng kiểm tra độ tương phản này cùng với các phương pháp kiểm tra khác để có bức tranh toàn cảnh về khả năng tiếp cận của ứng dụng của bạn.
Công cụ chấp nhận những định dạng màu nào?
Bạn có thể dán mã hex 3, 4, 6 hoặc 8 chữ số (có hoặc không có #), giá trị rgb() và rgba() trong cú pháp dấu phẩy cũ hoặc cú pháp phân tách bằng khoảng trắng hiện đại, hsl() và hsla() với bất kỳ đơn vị sắc độ tiêu chuẩn nào (deg, rad, grad, turn), hsv(), hwb() và bất kỳ màu CSS có tên nào trong số 150 màu từ đặc tả CSS Color Module Level 4. Màu sắc được phân tích hoàn toàn trên thiết bị của bạn.