Một biểu đồ báo cáo doanh thu tô cột “đạt” màu xanh lá, cột “không đạt” màu đỏ, cùng độ sáng. Trong phòng họp mười người, có một anh trưởng phòng cứ hỏi đi hỏi lại “cột nào là đạt?”. Anh không kém chuyên môn; anh thuộc nhóm người thiếu sắc giác đỏ – lục, và với anh hai cột trông gần như một màu.
Thiếu sắc giác (hay gọi là mù màu) phổ biến hơn nhiều người nghĩ: theo các thống kê quốc tế được trích dẫn rộng rãi, khoảng 8% nam giới và dưới 1% nữ giới có dạng thiếu sắc giác đỏ – lục. Cộng thêm người lớn tuổi, người xem màn hình ngoài nắng, người đọc bản photocopy đen trắng — nhóm người không thấy màu như bạn thấy là rất lớn.
Những dạng thiếu sắc giác thường gặp
- Thiếu sắc giác đỏ – lục (gồm các dạng liên quan tới tế bào cảm nhận đỏ hoặc lục): khó phân biệt đỏ, lục, nâu, cam ở cùng độ sáng. Đây là nhóm phổ biến nhất.
- Thiếu sắc giác lam – vàng: hiếm hơn nhiều, khó phân biệt lam với lục, vàng với hồng.
- Mù màu hoàn toàn: rất hiếm, chỉ thấy sáng tối.
Điểm chung của mọi dạng: người thiếu sắc giác vẫn thấy khác biệt độ sáng. Đây là chìa khoá. Nếu hai màu khác nhau rõ về độ sáng, gần như ai cũng phân biệt được.
Tỉ lệ tương phản: con số đo được
Bộ hướng dẫn khả năng tiếp cận nội dung web (WCAG) định nghĩa tỉ lệ tương phản giữa hai màu dựa trên độ chói tương đối, từ 1:1 (hai màu giống nhau) tới 21:1 (đen trên trắng). Các ngưỡng được dùng rộng rãi:
| Nội dung | Ngưỡng mức AA | Ngưỡng mức AAA |
|---|---|---|
| Chữ thường (dưới khoảng 18pt, hoặc dưới 14pt đậm) | 4,5:1 | 7:1 |
| Chữ lớn | 3:1 | 4,5:1 |
| Thành phần giao diện và đồ họa cần nhận biết (viền ô nhập, biểu tượng, đường biểu đồ) | 3:1 | — |
Vài ví dụ trực giác: chữ xám trung bình trên nền trắng — kiểu “chữ xám nhạt cho sang” rất hay thấy — thường chỉ đạt khoảng 2,5–3:1, không đủ cho thân bài. Chữ trắng trên nền cam tươi thường dưới 3:1. Chữ trắng trên xanh lam đậm dễ dàng vượt 7:1.
Đừng đoán bằng mắt: màn hình của bạn, độ sáng phòng của bạn không phải của người dùng. Dùng công cụ đo tương phản — có sẵn trong nhiều phần mềm thiết kế, trình duyệt và tiện ích miễn phí.
Luật quan trọng nhất: màu không được là tín hiệu duy nhất
Tương phản đủ chưa là xong. Nếu thông tin chỉ được truyền bằng màu, người không phân biệt được màu đó sẽ mất thông tin. Luôn kèm ít nhất một tín hiệu khác:
- Biểu tượng: dấu tích cho thành công, dấu chấm than cho lỗi.
- Chữ: nhãn “Đạt” / “Không đạt” trực tiếp trên cột biểu đồ.
- Hình dạng hoặc hoa văn: đường liền và đường đứt nét trong biểu đồ đường; ô sọc cho một loại trong bản đồ.
- Vị trí: nhóm “đạt” đặt bên trái, “không đạt” bên phải.
- Gạch chân liên kết: liên kết trong đoạn văn chỉ phân biệt bằng màu là lỗi kinh điển.
Biểu đồ: nơi hay hỏng nhất
Biểu đồ có nhiều chuỗi dữ liệu là nơi màu bị lạm dụng nhiều nhất. Vài quy tắc thực hành:
- Tránh cặp đỏ – lục cùng độ sáng. Nếu muốn giữ quy ước “tốt/xấu”, dùng lam – cam: cặp này phân biệt được với hầu hết dạng thiếu sắc giác.
- Tối đa 5–6 màu phân loại. Hơn thế thì kể cả người sắc giác bình thường cũng phải dò chú thích liên tục.
- Dữ liệu có thứ tự dùng một dải sáng tối (từ nhạt tới đậm của một sắc độ), không dùng cầu vồng. Dải cầu vồng có những vùng sáng đột ngột (vàng) tạo ra ranh giới giả không có trong dữ liệu.
- Ghi nhãn trực tiếp lên đường hoặc cột thay vì chú thích tách rời.
Cách kiểm nhanh
- Chuyển thang xám: nếu hai màu cần phân biệt thành cùng một mức xám, có vấn đề.
- Dùng chế độ giả lập thiếu sắc giác: nhiều phần mềm thiết kế và công cụ dành cho nhà phát triển trong trình duyệt có sẵn chế độ mô phỏng các dạng thiếu sắc giác.
- In đen trắng: phép thử thô nhưng thực tế, vì tài liệu văn phòng hay bị photocopy.
- Xem ngoài nắng: mở bản thiết kế trên điện thoại ngoài trời. Màn hình ngoài nắng làm giảm tương phản đáng kể, và đó là cách phần lớn người dùng di động ở Việt Nam thấy giao diện của bạn.
Tương phản cao có làm thiết kế kém đẹp?
Đây là lý do phổ biến nhất khiến người thiết kế cố tình dùng chữ xám nhạt. Nhưng sang trọng không đến từ tương phản thấp; nó đến từ khoảng trắng, chọn chữ, và sự kiềm chế về số màu. Có thể đạt 4,5:1 mà vẫn nhẹ nhàng: dùng xám đậm thay cho đen, dùng chữ mảnh nhưng cỡ lớn hơn, giữ tương phản thấp cho các chi tiết trang trí không mang thông tin.
Checklist trước khi bàn giao
- Chữ thân bài đạt tối thiểu 4,5:1 với nền.
- Chữ trên ảnh có lớp nền đảm bảo tương phản ở mọi vị trí.
- Viền ô nhập, biểu tượng quan trọng đạt 3:1.
- Không thông tin nào chỉ dựa vào màu.
- Biểu đồ có nhãn trực tiếp, không dùng cặp đỏ – lục cùng sáng.
- Liên kết trong văn bản có gạch chân hoặc tín hiệu ngoài màu.
- Đã xem qua chế độ giả lập thiếu sắc giác và thang xám.
Việc tiếp theo: lấy biểu đồ gần nhất bạn làm, chạy qua chế độ giả lập thiếu sắc giác đỏ – lục. Nếu có hai chuỗi trông giống nhau, sửa bằng độ sáng và nhãn trực tiếp — mất năm phút, và cả phòng họp sẽ đọc được.
Câu hỏi thường gặp
Tỉ lệ tương phản bao nhiêu là đủ?
Theo mức AA của WCAG, chữ thường cần tối thiểu 4,5:1, chữ lớn và thành phần giao diện cần 3:1. Mức AAA yêu cầu 7:1 cho chữ thường.
Mù màu có phổ biến không?
Khá phổ biến, các thống kê thường được trích dẫn cho biết khoảng 8% nam giới có dạng thiếu sắc giác đỏ – lục. Vì vậy không nên dùng màu làm tín hiệu duy nhất.
Người mù màu có thấy được gì?
Phần lớn vẫn thấy màu nhưng khó phân biệt một số cặp, và vẫn thấy rõ khác biệt độ sáng. Thiết kế tách màu bằng độ sáng giúp hầu hết mọi người đọc được.
Biểu đồ nên dùng cặp màu nào thay đỏ – xanh lá?
Cặp lam – cam phân biệt tốt với hầu hết dạng thiếu sắc giác. Kèm nhãn trực tiếp và khác biệt độ sáng để chắc chắn hơn.
Làm sao kiểm tra thiết kế cho người mù màu?
Dùng chế độ giả lập thiếu sắc giác trong phần mềm thiết kế hoặc trình duyệt, chuyển thang xám, và in thử đen trắng.
