Chữ dễ đọc khi chênh lệch độ sáng giữa chữ và nền đủ lớn, bất kể chữ màu gì. Tiêu chuẩn tiếp cận nội dung web quốc tế (WCAG) đặt mức tối thiểu là tỉ lệ tương phản 4,5:1 cho chữ thường và 3:1 cho chữ lớn; chữ đen trên nền trắng đạt 21:1, chữ xám nhạt trên nền trắng có khi chỉ 2:1. Ngoài ra, đừng chỉ dùng màu để truyền thông tin, vì nhiều người nhìn màu khác người khác. Đây là kiến thức nền cho bất kỳ ai làm web, làm biển hiệu, làm slide hay in tờ rơi.
Tương phản là chuyện độ sáng, không phải sắc
Chữ đỏ trên nền lục có thể rất "tương phản" về sắc (hai màu bổ túc), nhưng nếu chúng có độ sáng gần nhau, chữ sẽ rung, nhoè, khó đọc, và với người lẫn đỏ – lục thì gần như biến mất. Ngược lại, chữ xanh đậm trên nền vàng nhạt cùng "ít tương phản sắc" hơn nhưng lại dễ đọc vì chênh sáng tối lớn. Bài về ba thuộc tính của màu đã giải thích: độ sáng mới là thứ làm nên hình và chữ.
Cách kiểm tra nhanh: chụp ảnh hoặc chuyển thiết kế sang chế độ đen trắng. Nếu chữ vẫn nổi rõ trên nền, tương phản ổn.
Tỉ lệ tương phản WCAG
Hướng dẫn tiếp cận nội dung web (WCAG) do tổ chức W3C ban hành, được nhiều nước dùng làm cơ sở cho quy định về khả năng tiếp cận số. WCAG tính tỉ lệ tương phản giữa hai màu dựa trên độ sáng tương đối của chúng, từ 1:1 (cùng màu) tới 21:1 (đen trên trắng).
| Mức | Chữ thường | Chữ lớn (khoảng từ 18pt, hoặc 14pt đậm) |
|---|---|---|
| AA (mức thường được yêu cầu) | Tối thiểu 4,5:1 | Tối thiểu 3:1 |
| AAA (mức cao) | Tối thiểu 7:1 | Tối thiểu 4,5:1 |
| Thành phần giao diện, biểu tượng | Tối thiểu 3:1 với nền xung quanh | |
Vài ví dụ dễ hình dung: đen trên trắng 21:1; xám đậm (#595959) trên trắng khoảng 7:1, đạt AAA; xám vừa (#767676) trên trắng khoảng 4,5:1, vừa đủ AA; xám nhạt (#AAAAAA) trên trắng khoảng 2,3:1, không đạt. Chữ trắng trên nền vàng tươi thường không đạt, dù trông "vui mắt".
Những tổ hợp màu hay gây khó đọc
- Chữ xám nhạt trên nền trắng: mốt của nhiều trang web "tối giản", nhưng khó đọc với người lớn tuổi, dưới nắng, trên màn hình kém.
- Chữ trắng trên nền vàng, cam nhạt, xanh lá nhạt: chênh sáng quá ít.
- Chữ đỏ trên nền lục hoặc ngược lại: rung mắt, mất hẳn với người lẫn đỏ – lục.
- Chữ lam đậm trên nền đen: khó đọc vì lam đậm có độ sáng thấp.
- Chữ đặt trực tiếp lên ảnh: chỗ sáng chỗ tối làm chữ lúc rõ lúc mất. Cách khắc phục: phủ lớp tối hoặc sáng mờ lên ảnh, thêm viền hoặc bóng chữ.
Đừng chỉ dùng màu để nói
Một số người khó phân biệt một số màu, phổ biến nhất là đỏ với lục; ngoài ra người lớn tuổi, người có bệnh về mắt, hoặc ai đó nhìn màn hình dưới nắng cũng có thể không thấy rõ khác biệt màu. Vì vậy:
- Biểu đồ: ngoài màu, dùng thêm nhãn chữ, ký hiệu, kiểu đường nét khác nhau.
- Biểu mẫu: thông báo lỗi không chỉ tô đỏ ô sai, mà kèm dòng chữ giải thích.
- Bản đồ, sơ đồ: thêm hoạ tiết, chữ ghi chú.
- Đèn báo, nút bấm: kết hợp màu với vị trí, hình dạng, biểu tượng có nhãn.
Đèn giao thông là ví dụ hay: ngoài màu, vị trí đèn (đỏ ở trên, xanh ở dưới với đèn dọc) giúp mọi người hiểu dù không phân biệt được màu.
Ngoài màn hình: biển hiệu, slide, tài liệu in
Nguyên tắc tương phản áp dụng cho mọi thứ có chữ:
- Biển hiệu cửa hàng: nhìn từ xa và dưới nắng, cần tương phản cao hơn mức tối thiểu; chữ to, nét đậm.
- Slide trình chiếu: máy chiếu làm giảm tương phản đáng kể so với màn hình máy tính; nền tối chữ sáng hoặc nền sáng chữ tối đậm là an toàn.
- Tài liệu in: chữ màu nhạt in trên giấy tái chế xám càng khó đọc.
- Bao bì, nhãn thuốc: thông tin quan trọng như hạn dùng, liều dùng cần đọc được với người lớn tuổi.
Công cụ kiểm tra
Có nhiều công cụ miễn phí để tính tỉ lệ tương phản: nhập hai mã màu là biết đạt mức nào. Trình duyệt web phổ biến có công cụ cho nhà phát triển hiển thị tỉ lệ tương phản của chữ, và có chế độ mô phỏng các kiểu nhìn màu khác nhau. Các phần mềm thiết kế cũng có plugin tương tự. Kiểm tra sớm trong quá trình thiết kế luôn rẻ hơn sửa sau khi đã in hay đã phát hành.
Góc nhìn hôm nay: thiết kế cho mọi người
Thiết kế dễ đọc không làm giảm thẩm mỹ; nó làm sản phẩm hữu ích cho nhiều người hơn, từ ông bà lớn tuổi tới người đang đứng giữa nắng. Lần tới làm một slide, một tờ rơi hay một trang web, hãy thử ba bước: chuyển sang đen trắng để kiểm tra độ sáng, đo tỉ lệ tương phản của chữ chính, và đảm bảo mọi thông tin quan trọng không chỉ dựa vào màu. Tài liệu WCAG chính thức có trên trang của W3C, với nhiều bản dịch và giải thích dễ hiểu.
Câu hỏi thường gặp
Tỉ lệ tương phản màu chuẩn là bao nhiêu?
Theo WCAG, chữ thường cần tối thiểu 4,5:1 và chữ lớn tối thiểu 3:1 để đạt mức AA. Mức AAA yêu cầu 7:1 cho chữ thường.
Vì sao chữ trắng trên nền vàng khó đọc?
Vì vàng tươi có độ sáng rất cao, gần với trắng, nên chênh lệch độ sáng giữa chữ và nền quá nhỏ. Dễ đọc phụ thuộc chủ yếu vào chênh lệch độ sáng.
Làm sao kiểm tra chữ có dễ đọc không?
Chuyển thiết kế sang đen trắng để xem chữ còn nổi rõ không, hoặc dùng công cụ tính tỉ lệ tương phản bằng cách nhập hai mã màu chữ và nền.
Vì sao không nên chỉ dùng màu để truyền thông tin?
Vì nhiều người khó phân biệt một số màu, như đỏ với lục, và màn hình dưới nắng cũng làm màu khó phân biệt. Nên kèm chữ, ký hiệu hoặc hình dạng.