Công cụ kiểm tra độ tương phản màu

Độ chói là kênh luôn còn lại

Màu có hai thành phần mà nhà thiết kế có thể dựa vào: sắc độ và độ sáng. Chỉ một trong hai là đáng tin với toàn bộ người dùng.

Khả năng phân biệt sắc độ dao động rất lớn. Khoảng một trong mười hai nam giới có khiếm khuyết đỏ lục, và với họ, một khác biệt sắc độ mà bạn thấy hiển nhiên có thể không mang thông tin nào. Khả năng phân biệt độ sáng thì đồng đều hơn nhiều. Người có khiếm khuyết sắc giác, người giảm thị lực, người nhìn màn hình điện thoại bạc màu dưới nắng gắt và người có thị giác hoàn toàn điển hình đều cảm nhận một khác biệt độ sáng lớn là một khác biệt lớn.

Chính vì thế tỉ lệ tương phản là chỉ số khả dụng gánh phần trọng yếu. Nó đo quan hệ độ sáng giữa hai màu và bỏ qua hoàn toàn sắc độ, và đó đúng là điều bạn cần, vì nó cho biết còn lại gì khi kênh sắc độ không đáng tin.

Tỉ lệ chạy từ 1:1, khi hai màu có cùng độ chói tương đối và ranh giới giữa chúng vô hình với mọi người, tới 21:1 cho đen thuần trên trắng thuần. Phép tính được định nghĩa chính xác trong WCAG: chuyển từng kênh sRGB sang ánh sáng tuyến tính, gán trọng số cho các kênh theo mức đóng góp vào độ chói cảm nhận, rồi so kết quả sáng hơn với kết quả tối hơn.

Các ngưỡng và cơ sở của chúng

4,5:1 — chữ thường (WCAG AA). Mức nền cho chữ nội dung. Con số này rút ra từ mức giảm độ nhạy tương phản gắn với thị lực khoảng 20/40, thường gặp ở người lớn tuổi, có thể chỉnh kính nhưng nhiều khi không được chỉnh.

3:1 — chữ lớn (WCAG AA). Áp dụng từ 18pt thường hoặc 14pt in đậm. Chữ lớn có nét dày hơn nên vẫn đọc được ở tương phản thấp hơn.

3:1 — tương phản phi văn bản (WCAG AA). Bao gồm các thành phần giao diện và đồ họa mang nghĩa: viền ô nhập liệu, trạng thái công tắc, chỉ báo tiêu điểm, biểu tượng truyền tải thông tin và những phần cốt yếu của một biểu đồ. Đây là tiêu chí bị bỏ sót nhiều nhất, và thường là chỗ một giao diện thanh lịch nhưng tương phản thấp trượt khi kiểm định.

7:1 và 4,5:1 — chữ thường và chữ lớn (WCAG AAA). Mức ngặt hơn, nhắm tới thị lực khoảng 20/80. Đáng áp dụng cho các bài đọc dài ngay cả khi không bắt buộc.

Tương phản là cần, chưa phải là đủ

Sai lầm phổ biến nhất khi làm bảng màu dễ tiếp cận là coi một tỉ lệ tương phản đã đạt là xong việc. Có hai câu hỏi độc lập cần trả lời:

1. Mỗi màu có đọc được trên nền của nó không? Đó là tương phản, và trình kiểm tra này trả lời.
2. Những màu mang nghĩa khác nhau có phân biệt được với nhau không? Đó là tách biệt sắc độ, và tỉ lệ tương phản không nói gì về điều này.

Một biểu đồ có chuỗi đỏ và chuỗi lục có thể đạt tương phản dư dả, cả hai đều tối trên nền trắng, mà vẫn hoàn toàn không đọc được với người deuteranope, vì hai chuỗi không phân biệt được với nhau. Hãy cho những bảng màu như vậy chạy qua trình mô phỏng sắc giác nữa.

Và bất cứ khi nào màu mang nghĩa, hãy thêm một manh mối thứ hai. Tiêu chí sử dụng màu của WCAG đòi hỏi điều đó, và kỹ thuật G111 mô tả cách làm chuẩn: ghép màu với hoa văn, hình dạng, vị trí hoặc một nhãn chữ rõ ràng. Trong thực tế điều đó nghĩa là gắn nhãn trực tiếp lên các chuỗi biểu đồ thay vì dùng chú giải màu, đặt một biểu tượng cạnh thông báo lỗi màu đỏ, gạch chân liên kết trong dòng chữ, và phân biệt trạng thái thành công với thất bại bằng cả hình dạng.

Làm việc với trình kiểm tra

Nhập một màu tiền cảnh và một màu nền, công cụ sẽ báo tỉ lệ và các ngưỡng đạt được. Vài thói quen khiến nó hữu ích hơn:

• Kiểm tra đúng cặp màu thật. Lớp phủ bán trong suốt, dải chuyển màu và ảnh nền khiến nền hiệu dụng không phải màu ghi trong tệp kiểu. Hãy lấy mẫu từ thứ thực sự được vẽ ra.
• Kiểm tra cả hai chủ đề. Độ chói không đảo ngược một cách gọn ghẽ; bảng màu tối cần lượt kiểm riêng.
• Trong dải chuyển màu, hãy kiểm tra trường hợp xấu nhất, không phải giá trị trung bình.
• Bao gồm cả trạng thái vô hiệu hóa và chữ gợi ý. Chúng vẫn được đọc.
• Kiểm tra chỉ báo tiêu điểm trên mọi bề mặt nơi nó xuất hiện. Một vòng tiêu điểm đạt 3:1 trên nền trắng có thể biến mất trên một thẻ nội dung.

Để có bức tranh rộng hơn, thiết kế cho người mù màu bàn về cách dựng bảng màu, còn làm biểu đồ dễ tiếp cận đi riêng vào trực quan hóa dữ liệu.