Tương phản màu chữ và nền đo bằng tỉ lệ độ chói, chạy từ 1:1 (cùng màu) đến 21:1 (đen trên trắng); hướng dẫn tiếp cận nội dung web phổ biến nhất đặt mức tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn. Dưới mức này, người thị lực kém, người lớn tuổi, người đọc ngoài nắng sẽ phải căng mắt hoặc bỏ qua.
Con số không phải để làm khó người thiết kế, mà là cách khách quan để trả lời câu "chữ này có đọc được không" thay vì dựa vào màn hình xịn của chính mình. Bài này giải thích tỉ lệ, cách đo, cách sửa khi màu thương hiệu của khách quá nhạt cho chữ, và chỗ dùng AI tính nhanh mà không tin mù.
Tỉ lệ tương phản là gì và vì sao không dùng mắt là đủ
Tỉ lệ tương phản theo các hướng dẫn tiếp cận phổ biến được tính từ độ chói tương đối của hai màu. Độ chói không giống độ sáng ta cảm nhận một cách đơn giản: mắt người nhạy với xanh lá hơn nhiều so với xanh dương, nên công thức cho kênh xanh lá trọng số lớn nhất. Kết quả là hai màu trông "đậm nhạt khác nhau rõ" trên màn hình thiết kế có thể có tỉ lệ thấp đến bất ngờ, nhất là các cặp cam với trắng, hồng với trắng, vàng với trắng.
Lý do không dựa vào mắt là màn hình của người thiết kế thường sáng, cân màu tốt, đặt trong phòng có ánh sáng dễ chịu. Người xem thật dùng điện thoại giảm độ sáng để tiết kiệm pin, đứng ngoài nắng, hoặc đã ngoài năm mươi tuổi. Một màu chữ đọc được trên màn hình của bạn có thể gần như biến mất trong điều kiện đó.
Thêm một nhóm người cần nghĩ tới: người khó phân biệt màu. Tỉ lệ độ chói không phụ thuộc sắc, nên một cặp chữ và nền đạt tỉ lệ vẫn đọc được với họ, kể cả khi họ không phân biệt được hai sắc. Đây là một lý do khiến đo độ chói đáng tin hơn chỉ nhìn màu.
Mức 4,5:1 và 3:1 đến từ bộ hướng dẫn tiếp cận nội dung web, mức AA; mức AAA cao hơn, 7:1 cho chữ thường và 4,5:1 cho chữ lớn. Ấn phẩm in và bài đăng mạng xã hội không bị ràng buộc bởi bộ hướng dẫn này, nhưng dùng các mức đó làm sàn là thói quen nghề nghiệp tốt. Cách tính và mức khuyến nghị có thể được cập nhật ở các phiên bản sau của bộ hướng dẫn, nên kiểm bản hiện hành khi làm dự án có yêu cầu tiếp cận chính thức.
Các mức tương phản và chỗ áp dụng
Bảng dưới tóm các mức thường dùng. "Chữ lớn" theo hướng dẫn là khoảng từ 18 điểm chữ thường hoặc 14 điểm chữ đậm trở lên, tương đương khoảng 24 và 18,7 điểm ảnh trên màn hình.
| Loại nội dung | Mức tối thiểu (AA) | Mức cao (AAA) | Ghi chú |
|---|---|---|---|
| Chữ thường, đoạn văn, chú thích | 4,5:1 | 7:1 | Áp cho phần lớn chữ trên ấn phẩm và giao diện |
| Chữ lớn, tiêu đề | 3:1 | 4,5:1 | Tiêu đề mảnh dù lớn vẫn nên nhắm mức cao hơn |
| Thành phần giao diện không phải chữ | 3:1 | Không quy định riêng | Viền ô nhập, biểu tượng mang nghĩa, đường biểu đồ |
| Chữ trong logo | Không bắt buộc | Không bắt buộc | Nhưng logo đặt trên nền phải nhận ra được |
| Chữ trang trí không mang thông tin | Không bắt buộc | Không bắt buộc | Cẩn thận: khách hay nhét thông tin vào phần "trang trí" |
Một ví dụ dễ nhớ: màu xám trung bình có mã 767676 trên nền trắng cho tỉ lệ khoảng 4,54:1, vừa qua mức chữ thường. Nhạt hơn một chút, mã 777777, chỉ còn khoảng 4,48:1 và trượt. Ranh giới mỏng như vậy là lý do phải đo bằng công cụ chứ không ước bằng mắt.
Cách đo tương phản trong quy trình làm việc
Đo tương phản không tốn thời gian nếu làm đúng lúc: khi dựng bảng màu, không phải khi đã xong cả bộ ấn phẩm.
- Liệt kê các cặp chữ và nền sẽ dùng thật: chữ đoạn văn trên nền chính, chữ trắng trên nút màu nhấn, chú thích xám trên nền kem, tiêu đề màu chính trên nền trắng.
- Đo từng cặp bằng công cụ kiểm tương phản có sẵn trong phần mềm thiết kế, tiện ích bổ sung, hoặc công cụ trực tuyến. Chỉ cần nhập hai mã màu.
- Nhờ AI tính hàng loạt nếu có nhiều cặp: câu lệnh mẫu "Viết đoạn mã tính tỉ lệ tương phản theo công thức độ chói tương đối cho danh sách cặp mã HEX sau, in kết quả làm tròn hai chữ số và ghi đạt hay không đạt mức 4,5 và 3". Chạy mã, rồi kiểm lại hai ba cặp bằng công cụ khác để chắc mã tính đúng. Đừng hỏi AI tỉ lệ bằng cách đoán nhẩm, vì mô hình ngôn ngữ dễ trả số sai mà trông rất tự tin.
- Ghi kết quả vào bảng màu: cặp nào dùng được cho chữ thường, cặp nào chỉ dùng cho chữ lớn, cặp nào cấm dùng cho chữ.
- Kiểm trên ảnh: chữ đặt lên ảnh không có một màu nền duy nhất. Đo ở vùng sáng nhất của ảnh nằm dưới chữ màu sáng, hoặc vùng tối nhất dưới chữ màu tối.
- Xem thử ngoài trời với điện thoại giảm độ sáng một nửa. Đây không phải phép đo chuẩn, nhưng giúp bạn và khách cảm được con số.
Mã màu là thông tin thiết kế thông thường, không nhạy cảm. Nhưng nếu bảng màu thuộc một thương hiệu chưa công bố, coi nó như bí mật của khách và chỉ đưa vào công cụ đã được đồng ý.
Màu thương hiệu quá nhạt cho chữ: các cách sửa giữ được cảm giác
Tách màu dùng cho chữ khỏi màu thương hiệu. Ví dụ giả định một thương hiệu dùng cam tươi có mã E07A2F. Chữ trắng trên nền cam này chỉ đạt khoảng 3:1, đủ cho tiêu đề lớn nhưng không đủ cho chữ nhỏ. Giữ cam tươi cho mảng lớn, và dựng thêm một bậc cam đậm, ví dụ B4531A, đạt khoảng 5:1 với chữ trắng, dùng cho nút có chữ.
Đổi chiều chữ và nền. Thay vì chữ trắng trên nền màu nhạt, dùng chữ rất đậm, gần đen pha sắc thương hiệu, trên nền màu đó. Màu vàng, xanh ngọc nhạt thường hợp với chữ tối hơn chữ trắng.
Tăng cỡ và độ đậm để lên nhóm chữ lớn. Một nhãn nhỏ không đạt 4,5:1 có thể chuyển thành nhãn lớn hơn, đậm hơn để chỉ cần đạt 3:1. Cách này chỉ dùng khi bố cục cho phép.
Thêm lớp nền dưới chữ. Với chữ trên ảnh, một dải nền màu đặc hoặc lớp phủ tối mờ dưới chữ đảm bảo tương phản ổn định mà không phải đổi màu chữ.
Giải thích cho khách bằng ảnh thật. Chụp bản in thử hoặc màn hình điện thoại ngoài nắng của hai phương án đặt cạnh nhau. Khách thường đồng ý ngay khi thấy chữ nhạt gần như biến mất, hơn là khi nghe con số.
Tương phản không chỉ là màu: cỡ chữ, độ dày nét và nền
Hai cặp màu cùng đạt 4,5:1 chưa chắc dễ đọc như nhau. Công thức tỉ lệ chỉ đo màu, không đo hình chữ. Một font nét rất mảnh, nhất là font có chân tương phản nét mạnh ở cỡ nhỏ, có phần nét chỉ rộng một hai điểm ảnh; khi màn hình làm mịn cạnh chữ, màu thực tế của nét nhạt hơn màu bạn chọn, và tương phản cảm nhận giảm đi. Vì vậy với chữ mảnh, chữ nhỏ, hãy nhắm cao hơn mức tối thiểu.
Dấu tiếng Việt làm vấn đề này rõ hơn. Dấu hỏi, dấu ngã, dấu nặng là những nét nhỏ nhất trên trang. Ở cỡ chú thích, một cặp màu vừa chạm mức tối thiểu có thể khiến dấu mờ đi trước khi thân chữ mờ, và người đọc phải đoán "mua" hay "mùa", "bán" hay "bạn". Đây là lý do nhiều người thiết kế Việt chọn mức cao hơn cho chữ nhỏ có dấu, hoặc tăng cỡ chú thích lên một bậc.
Nền có hoạ tiết hoặc chuyển màu cũng làm giảm khả năng đọc dù tỉ lệ tại một điểm đạt. Mắt phải tách chữ khỏi các đường nét của nền, nhất là khi hoạ tiết có kích thước gần bằng nét chữ. Với đoạn văn, nền nên phẳng hoặc gần phẳng; hoạ tiết để dành cho khoảng trống quanh khối chữ.
Ngược lại, tương phản quá gắt cũng có hại ở đoạn văn dài trên màn hình: chữ đen tuyệt đối trên nền trắng tuyệt đối ở độ sáng cao có thể gây chói khi đọc lâu với một số người. Nhiều hệ thống giao diện dùng chữ gần đen trên nền trắng ngả ấm, vẫn đạt mức cao mà dịu mắt hơn. Ví dụ giả định chữ xám đậm mã 333333 trên nền kem F5EFE6 cho tỉ lệ khoảng 11:1, dư sức đọc mà không gắt.
Những chỗ tương phản hay hỏng trên ấn phẩm của cửa hàng nhỏ
Danh sách dưới tổng hợp các tình huống quen thuộc, mỗi tình huống kèm hướng xử lý. Chúng xuất hiện nhiều nhất khi chủ tiệm hoặc nhân viên tự làm bài đăng từ khung mẫu.
- Chữ trắng trên nền vàng hoặc cam nhạt: đẹp trên màn hình thiết kế, đọc không nổi ngoài nắng. Đổi sang chữ nâu đậm hoặc làm đậm nền.
- Chữ xám nhạt cho phần "điều kiện áp dụng": thông tin khách cần biết bị làm mờ để trông gọn. Tăng độ đậm cho đạt mức chữ thường; nếu dài quá thì rút gọn chữ chứ đừng làm mờ.
- Giá ghi bằng màu nhấn hồng trên nền hồng nhạt: hai màu cùng sắc, khác độ sáng ít. Dùng bậc đậm hơn nhiều trong dải màu.
- Nút đặt hàng màu xanh lá với chữ trắng: nhiều sắc xanh lá tươi chỉ đạt khoảng 3:1 với chữ trắng. Chọn bậc xanh đậm hơn trong dải, đo lại cho tới khi đạt mức chữ thường.
- Chữ đè lên vùng sáng của ảnh sản phẩm: nửa câu đọc được, nửa câu chìm. Thêm lớp phủ hoặc dời chữ sang vùng ảnh yên.
- Khung mẫu đổi màu nền nhưng giữ màu chữ: nhân viên đổi nền cho hợp dịp lễ mà quên chữ. Trong hướng dẫn, ghi rõ mỗi màu nền đi với màu chữ nào.
Với chủ tiệm tự làm, cách đơn giản nhất là trong bộ khung mẫu bạn giao, khoá sẵn các cặp chữ và nền đã kiểm. Họ đổi chữ, đổi ảnh thoải mái mà không thể tạo ra cặp màu không đọc được.
Câu hỏi thường gặp
Tỉ lệ tương phản 4,5:1 nghĩa là gì?
Đó là tỉ lệ độ chói tương đối giữa màu sáng hơn và màu tối hơn, tính theo công thức của hướng dẫn tiếp cận nội dung web. Mức 4,5:1 là sàn tối thiểu cho chữ thường ở mức AA. Đen trên trắng là 21:1, hai màu giống nhau là 1:1.
Ấn phẩm in có cần đạt mức tương phản như trang web không?
Không có quy định bắt buộc như với web, nhưng dùng mức 4,5:1 làm sàn cho chữ thường là thói quen tốt. Người đọc ấn phẩm in cũng có người thị lực kém, người lớn tuổi, và điều kiện ánh sáng không lý tưởng.
Chatbot có tính tỉ lệ tương phản chính xác không?
Nếu hỏi để nó đoán nhẩm, kết quả dễ sai. Cách đúng là nhờ AI viết đoạn mã tính theo công thức rồi tự chạy, hoặc dùng công cụ kiểm tương phản có sẵn. Luôn kiểm lại vài cặp bằng một công cụ thứ hai.
Logo có phải đạt tỉ lệ tương phản không?
Theo hướng dẫn tiếp cận web, chữ trong logo không bắt buộc đạt mức tương phản. Tuy vậy logo vẫn phải nhận ra được trên các nền nó xuất hiện, nên bộ nhận diện thường có thêm phiên bản logo cho nền tối và nền ảnh.
Màu thương hiệu của khách quá nhạt để làm chữ thì phải đổi màu thương hiệu sao?
Không cần. Giữ màu thương hiệu cho mảng lớn và chi tiết trang trí, dựng thêm một bậc đậm hơn cùng sắc để dùng cho chữ và nút. Cảm giác thương hiệu vẫn giữ, còn chữ đọc được.
Chữ đặt trên ảnh thì đo tương phản thế nào?
Đo giữa màu chữ và vùng ảnh khó nhất nằm dưới chữ: vùng sáng nhất nếu chữ sáng, vùng tối nhất nếu chữ tối. Nếu ảnh quá loang lổ, thêm dải nền hoặc lớp phủ dưới chữ để tương phản ổn định.