Màu sắc và độ tương phản cho website doanh nghiệp: chữ đọc được, màu thương hiệu vẫn giữ

Cập nhật tháng 10/2026. Tỉ lệ trong bài tính theo công thức WCAG 2.2; mã màu chỉ là minh hoạ.

Trên màn hình thiết kế lớn trong phòng máy lạnh, bảng màu nào cũng trông ổn. Nhưng khách đọc website trên điện thoại giữa trưa nắng, màn hình để tối cho đỡ tốn pin, có người đã ngoài 50 tuổi. Lúc đó dòng chữ xám nhạt hay nút trắng trên nền cam sáng gần như biến mất. Tương phản không phải chuyện thẩm mỹ, mà là chuyện khách có đọc được, bấm được hay không.

1. Hai con số cần nhớ: 4.5:1 cho chữ, 3:1 cho chữ lớn

Tiêu chí 1.4.3 (mức AA) của WCAG 2.2 yêu cầu chữ thường đạt tương phản với nền tối thiểu 4.5:1; chữ lớn (từ 18pt, khoảng 24px, hoặc 14pt đậm, khoảng 18.7px) cần 3:1. Thang đo từ 1:1 đến 21:1 (đen trên trắng). Logo và chữ thuần trang trí được miễn.

Ví dụ: chữ xám #999999 trên nền trắng chỉ đạt khoảng 2.85:1, trượt chuẩn; đậm lên thành #767676 là đạt 4.54:1, về thẩm mỹ gần như không khác. Chú thích ảnh, ngày đăng, ghi chú “giá chưa gồm VAT” là chỗ hay bị làm nhạt nhất. Lưu ý thêm từ W3C: tỉ lệ không được làm tròn lên, 4.47:1 là chưa đạt.

2. Nút, ô nhập, biểu tượng cũng cần 3:1

Tiêu chí 1.4.11 (tương phản phi văn bản, mức AA) yêu cầu những thứ người dùng cần nhận ra để thao tác, như viền ô nhập, biểu tượng có nghĩa, vòng focus khi dùng bàn phím, phần chính của biểu đồ, đạt tối thiểu 3:1 so với màu bên cạnh.

Ví dụ: ô nhập viền #cccccc trên nền trắng chỉ đạt khoảng 1.6:1, khách không biết ô nào để gõ. Nếu đang làm form, bài Thiết kế form liên hệ chuyển đổi tốt có thêm các điểm WCAG khác cần kiểm.

3. Màu thương hiệu sáng: tách sắc trang trí và sắc cho chữ, nút

Cam sáng kiểu #f97300 đặt chữ trắng lên chỉ đạt khoảng 2.8:1; vàng #ffc107 với chữ trắng chỉ khoảng 1.6:1. Lời giải không phải bỏ màu thương hiệu, mà là chia vai cho nó:

Ví dụ minh hoạ: một quán trà sữa màu nhận diện vàng tươi muốn nút “Đặt hàng” vàng chữ trắng. Người làm web đưa ra hai bản: vàng chữ nâu đậm, và nâu đậm chữ trắng viền vàng. Cả hai vẫn nhận ra thương hiệu và đọc được ngoài nắng. Quyết định này nên ghi vào bộ màu ngay từ đầu.

4. Hệ màu ngữ nghĩa: kiểm định một lần, dùng mọi nơi

Lỗi tương phản thường đến từ việc mỗi trang chọn màu một kiểu. Cách bền vững là đặt tên màu theo vai trò: không gọi “cam nhạt” mà gọi “nền nút chính”, “chữ trên nút”. Đó là token màu ngữ nghĩa, viết bằng biến CSS:

Có token, bạn chỉ cần kiểm định một bảng nhỏ các cặp được phép (chữ nào trên nền nào) thay vì soi từng trang, và người mới vào dự án không vô tình đặt chữ lên màu trang trí. Cách khai báo và đổi biến CSS ở một chỗ có trong bài CSS hiện đại cho web doanh nghiệp.

5. Chế độ tối: không phải đảo màu là xong

Truy vấn prefers-color-scheme cho website đổi màu theo cài đặt hệ điều hành; thuộc tính color-scheme báo trình duyệt hiển thị ô nhập, thanh cuộn đúng tông. Có token rồi thì chế độ tối chỉ là gán lại giá trị cho cùng các biến.

Vài điều hay bị bỏ sót:

• Kiểm lại toàn bộ cặp màu. Cam đậm #c65300 đặt trên nền gần đen chỉ còn khoảng 4.1:1, không đủ cho chữ cam. Mỗi chế độ là một bảng kiểm định riêng.
• Tránh đen tuyệt đối với trắng tinh. Nền xám rất tối, chữ trắng ngà thường dễ đọc đoạn dài hơn mà vẫn dư chuẩn.
• Logo: logo xanh than sẽ chìm trên nền tối, cần bản logo sáng.
• Chỉ làm khi đủ sức duy trì. Chế độ tối nửa vời còn tệ hơn không có; một giao diện sáng đạt chuẩn là đủ cho đa số website doanh nghiệp nhỏ.

6. Đừng chỉ dùng màu để truyền tin

Tiêu chí 1.4.1 (mức A) yêu cầu màu không là cách duy nhất để báo thông tin. Người khó phân biệt đỏ – lục hay bản in đen trắng sẽ bỏ lỡ.

• Báo lỗi form: viền đỏ kèm biểu tượng và câu “Số điện thoại cần 10 chữ số”.
• Còn hàng / hết hàng: chấm xanh, chấm đỏ phải kèm chữ.
• Liên kết trong đoạn văn: giữ gạch chân nếu chỉ khác màu chữ thường.
• Biểu đồ: gắn nhãn trực tiếp lên cột, đường.

7. Công cụ kiểm tra

8. Checklist duyệt màu cho website

1. Chữ thân bài, chữ phụ, chú thích, placeholder ≥ 4.5:1.
2. Tiêu đề lớn ≥ 3:1; không chắc thì cứ 4.5:1.
3. Viền ô nhập, icon có nghĩa, vòng focus ≥ 3:1.
4. Màu thương hiệu sáng chỉ trang trí; có sắc đậm cho nút, chữ.
5. Màu đặt tên theo vai trò, có bảng cặp đã kiểm định.
6. Kiểm cả trạng thái hover, focus, đã chọn.
7. Lỗi, thành công, cảnh báo có chữ hoặc icon kèm màu.
8. Link trong đoạn văn có gạch chân.
9. Chế độ tối (nếu có): kiểm lại mọi cặp, có logo sáng.
10. Xem thử thật trên điện thoại, ngoài trời, độ sáng màn hình thấp.

9. Thuật ngữ cần biết

• Tỉ lệ tương phản (contrast ratio): số so độ sáng tương đối của hai màu, từ 1:1 đến 21:1. Nguồn: W3C, Understanding SC 1.4.3.
• Tương phản phi văn bản (non-text contrast): thành phần giao diện và đồ hoạ cần thiết phải đạt 3:1 với màu kề bên. Nguồn: W3C, Understanding SC 1.4.11.
• Token màu ngữ nghĩa: biến màu đặt tên theo vai trò thay vì theo sắc, thường viết bằng biến CSS. Nguồn: MDN, Using CSS custom properties.
• prefers-color-scheme: truy vấn media cho biết người dùng chọn giao diện sáng hay tối. Nguồn: MDN.

10. Tìm hiểu thêm

• Understanding SC 1.4.1: Use of Color của W3C.
• Color and contrast (web.dev) trong khoá Learn Accessibility.
• Make your website more readable (Chrome DevTools) trên Chrome for Developers.

11. Câu hỏi thường gặp

PDL Digital đào tạo đội ngũ doanh nghiệp làm web bài bản hơn với AI, từ dựng bộ màu đến kiểm tra khả năng truy cập. Xem trang đào tạo để chọn khoá phù hợp.