Phối màu
Xây bảng màu theo vai trò, dùng quy tắc 60-30-10, kiểm tra tương phản theo WCAG và không dùng màu làm tín hiệu duy nhất.
- Lập bảng màu 5–7 token theo vai trò (nền, chữ, chính, nhấn, viền…).
- Áp dụng tỉ lệ 60-30-10 để màu nhấn thực sự nổi bật.
- Kiểm tra tương phản chữ và thành phần giao diện theo WCAG 2.2.
Màu sắc trên Landing Page có ba việc: tạo cảm giác thương hiệu, phân cấp thông tin và chỉ ra chỗ cần bấm. Một bảng màu tốt không cần nhiều màu; nó cần mỗi màu có một vai trò rõ ràng và được dùng nhất quán trên toàn trang.
Màu theo vai trò (token)
| Token | Dùng cho | Lưu ý |
|---|---|---|
| bg (nền) | Nền chính của trang | Trắng, kem nhạt hoặc tối nếu giao diện tối |
| surface (nền phụ) | Thẻ, khối xen kẽ, form | Khác nền chính vừa đủ để thấy ranh giới |
| text (chữ) | Nội dung, tiêu đề | Đạt tương phản tối thiểu 4,5:1 với nền |
| primary (màu chính) | Tiêu đề nhấn, biểu tượng, liên kết | Gắn với thương hiệu |
| accent (màu nhấn) | Nút CTA chính, điểm cần hành động | Chỉ dùng cho thứ quan trọng nhất |
| border / muted | Viền, chữ phụ, đường phân cách | Viền ô nhập cần tương phản tối thiểu 3:1 |
Tỉ lệ 60-30-10
Một quy ước phổ biến: khoảng 60% diện tích là màu nền trung tính, 30% là màu phụ (nền khối, màu chính), 10% là màu nhấn. Đây là điểm khởi đầu, không phải công thức. Ý chính: màu nhấn càng hiếm thì càng nổi bật. Nếu màu cam của nút CTA cũng xuất hiện ở tiêu đề, biểu tượng và banner, nút sẽ chìm.
Tương phản theo WCAG 2.2
- Chữ thường: tỉ lệ tương phản tối thiểu 4,5:1 với nền (tiêu chí 1.4.3, mức AA).
- Chữ lớn (từ 18 pt, tức khoảng 24 px, hoặc 14 pt đậm, khoảng 18,66 px): tối thiểu 3: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, trạng thái focus): tối thiểu 3:1 (tiêu chí 1.4.11).
- Ví dụ dễ nhớ: chữ xám #767676 trên nền trắng đạt khoảng 4,54:1 — vừa qua ngưỡng; xám nhạt hơn nữa sẽ không đạt cho chữ thường.
- Chữ đặt trên ảnh: thêm lớp phủ tối hoặc đặt chữ vào khối nền đặc để tương phản không phụ thuộc từng vùng ảnh.
Màu phục vụ nội dung
- Nền trắng, chữ xanh than đậm, nút CTA màu cam đất chữ trắng đã đo tương phản.
- Trạng thái lỗi form dùng màu đỏ kèm biểu tượng và câu giải thích.
- Màu nhấn chỉ xuất hiện ở nút và một vài điểm cần chú ý.
Màu gây khó dùng
- Chữ vàng nhạt trên nền trắng cho “ưu đãi đặc biệt”.
- Ô bắt buộc chỉ được đánh dấu bằng viền đỏ, không có chữ.
- Năm màu rực rỡ ngang nhau, không biết đâu là nút chính.
Bài tập thực hành
Lập bảng 6 token màu (bg, surface, text, primary, accent, border) cho trang của bạn, ghi mã hex. Đo tương phản cho 4 cặp: text/bg, chữ trên nút/accent, text/surface, border/bg bằng một công cụ đo tương phản.
Gợi ý: Bắt đầu từ màu logo làm primary, chọn accent tương phản với primary. Nếu chữ trắng trên accent không đạt 4,5:1, làm accent đậm hơn hoặc chuyển chữ sang màu tối.
- Mỗi token có vai trò rõ, không có hai token trùng vai trò.
- Chữ nội dung đạt tối thiểu 4,5:1 với nền.
- Chữ trên nút CTA đạt tương phản cần thiết với màu nút.
- Viền ô nhập đạt tối thiểu 3:1 với nền.
- Màu nhấn không bị dùng tràn lan ngoài CTA.
Kiểm tra kiến thức
- 4,5:1
- 2:1
- 3:1
- 10:1
Xem đáp án
A. 4,5:1 — Tiêu chí 1.4.3 Contrast (Minimum) yêu cầu 4,5:1 cho chữ thường và 3:1 cho chữ lớn.
- Màu đỏ quá đẹp
- Viền đỏ làm trang chậm
- Thông tin chỉ truyền bằng màu, người mù màu có thể không nhận ra
- Không có vấn đề
Xem đáp án
C. Thông tin chỉ truyền bằng màu, người mù màu có thể không nhận ra — Tiêu chí 1.4.1 yêu cầu không dùng màu làm phương tiện duy nhất. Nên thêm chữ “(bắt buộc)” hoặc thông báo lỗi bằng lời.
- Để tiết kiệm mực in
- Vì trình duyệt giới hạn màu
- Vì Google yêu cầu
- Vì màu hiếm mới nổi bật, giúp CTA dễ thấy
Xem đáp án
D. Vì màu hiếm mới nổi bật, giúp CTA dễ thấy — Sự tương phản đến từ khác biệt. Nếu màu nhấn ở khắp nơi, nút CTA không còn khác biệt với phần còn lại.