Màu sắc và khả năng tiếp cận

Bạn sẽ học được

• Vai trò của màu trong dashboard: nhóm, nhấn mạnh, báo trạng thái.
• Chọn bảng màu phân loại an toàn cho người mù màu.
• Ngưỡng tương phản tối thiểu.
• Khi nào dùng thang tuần tự và thang phân kỳ.
• Cách kiểm tra dashboard không phụ thuộc vào màu.

Khái niệm cốt lõi

Màu trong dashboard có ba việc, không hơn:

1. Nhóm — cùng nhóm cùng màu (các kênh, các vùng).
2. Nhấn mạnh — một mục cần chú ý nổi hơn phần còn lại.
3. Trạng thái — tốt, cảnh báo, xấu.

Màu không phải trang trí. Mỗi màu thêm vào phải có nghĩa ổn định trong toàn bộ dashboard. Nếu màu xanh lá vừa là "kênh online" vừa là "trạng thái tốt", người xem sẽ hiểu nhầm.

Bảng màu phân loại

Quy tắc:

• Tối đa 5–7 màu phân loại. Nhiều hơn thì gộp phần nhỏ thành "Khác".
• Màu phải phân biệt được cả khi in đen trắng hoặc với người mù màu.
• Giữ thứ tự màu ổn định: kênh A luôn cùng một màu ở mọi widget.

Khoảng 1 trong 12 nam giới và 1 trong 200 nữ giới có một dạng mù màu; phổ biến nhất là không phân biệt đỏ–xanh lá (deuteranopia). Vì vậy không bao giờ dùng đỏ và xanh lá làm cặp duy nhất để phân biệt hai nhóm.

Bảng màu an toàn thường dựa trên xanh dương, cam, tím, xám, và các sắc độ khác nhau. Khi cần nhiều hơn 4 màu, thêm hình dạng điểm (tròn, vuông, tam giác) hoặc nét đứt.

Màu trạng thái

Ba màu trạng thái nên được giữ riêng cho trạng thái:

Không dùng đỏ cho một chuỗi dữ liệu bình thường. Người xem sẽ tưởng có sự cố.

Không dùng màu trạng thái cho phân loại. Nếu kênh "Online" được tô xanh lá, người xem tưởng kênh đó đang tốt.

Tương phản

Ngưỡng tối thiểu (WCAG AA):

• Chữ thường: tương phản 4,5:1 với nền.
• Chữ lớn (từ 24px hoặc 19px đậm): 3:1.
• Đường biểu đồ, biên giới quan trọng: 3:1.

Vấn đề thường gặp:

• Chữ xám nhạt trên nền trắng cho nhãn trục — khó đọc ngoài trời, trên điện thoại.
• Đường lưới quá đậm, lấn át dữ liệu.
• Chữ trắng trên vàng — tương phản rất thấp.

Kiểm tra bằng công cụ tương phản trước khi chốt bảng màu. Nếu phải chọn giữa đẹp và đọc được, chọn đọc được.

Thang tuần tự và phân kỳ

Tuần tự (sequential): giá trị từ thấp đến cao, một sắc độ tăng dần. Dùng cho bản đồ nhiệt, mật độ, doanh thu theo vùng.

Phân kỳ (diverging): có điểm giữa có nghĩa (0, mục tiêu, trung bình), hai phía hai màu đối lập. Dùng cho tăng trưởng so mục tiêu, chênh lệch so trung bình.

Tránh:

• Cầu vồng (rainbow) cho dữ liệu liên tục — không có thứ tự cảm nhận, tạo ranh giới giả.
• Thang phân kỳ khi không có điểm giữa có nghĩa.
• Quá nhiều mức màu (hơn 7) trong bản đồ nhiệt.

Không phụ thuộc vào màu

Mọi thông tin truyền bằng màu phải có kênh thứ hai:

• Nhãn trực tiếp trên đường/cột thay vì chỉ chú giải.
• Nét đứt/liền hoặc hình dạng điểm khác nhau.
• Biểu tượng kèm màu trạng thái (▲/▼ kèm chữ "tốt/xấu").
• Giá trị số in trên ô bản đồ nhiệt.

Kiểm tra nhanh: chụp màn hình, chuyển sang thang xám. Nếu vẫn đọc được, thiết kế đạt. Nếu mất thông tin, cần thêm kênh thứ hai.

Chế độ sáng và tối

Dashboard hiện đại thường có hai chế độ. Lưu ý:

• Màu phân loại cần hai bộ giá trị, không chỉ đảo màu.
• Đỏ trên nền tối trông chói; cần giảm độ bão hoà.
• Đường lưới trên nền tối phải nhạt hơn nền nhưng vẫn đủ tương phản với dữ liệu.
• Kiểm tra cả hai chế độ trước khi xuất bản, không chỉ một.

Thực hành

1. Chọn 5 màu phân loại cho 5 kênh bán hàng và kiểm tra bằng thang xám.
2. Xác định ba màu trạng thái và nơi được phép dùng.
3. Kiểm tra tương phản của màu chữ bạn đang dùng cho nhãn trục.
4. Chọn thang tuần tự cho doanh thu theo tỉnh; giải thích vì sao không dùng cầu vồng.
5. Thêm kênh thứ hai (nhãn/nét đứt) cho một biểu đồ đang chỉ dùng màu.

Lỗi thường gặp

Tóm tắt

• Màu để nhóm, nhấn mạnh, báo trạng thái — không trang trí.
• Tối đa 5–7 màu phân loại; không dùng đỏ–xanh lá làm cặp duy nhất.
• Giữ ba màu trạng thái riêng biệt.
• Tương phản tối thiểu 4,5:1 cho chữ thường, 3:1 cho chữ lớn và đường.
• Mọi thông tin màu phải có kênh thứ hai; kiểm tra bằng thang xám.