Trực quan hoá 4 — Màu sắc & thiết kế

Màu sắc là kênh mã hoá thị giác mạnh nhất mà cũng dễ bị lạm dụng nhất. Một cú click đổi màu có thể biến biểu đồ tầm thường thành rõ ràng, hoặc biến bảng số đơn giản thành mớ hỗn loạn cầu vồng không ai đọc được. Vấn đề là công cụ BI cho phép tô màu tuỳ ý, còn bộ não người thì không xử lý màu tuỳ ý — nó gán ý nghĩa cho màu dù bạn có cố ý hay không.

Bài này bàn về việc dùng màu như một biến mã hoá dữ liệu (data encoding), không phải như lớp sơn trang trí, cùng các nguyên tắc thiết kế tổng thể: typography, layout, whitespace, alignment và tối giản. Đây là phần nối tiếp Trực quan hoá 2 — Tri giác thị giác — nơi giải thích vì sao mắt người phản ứng với màu và độ sáng theo cách nhất định — và Trực quan hoá 3 — Chọn biểu đồ đúng. Sau khi đã chọn đúng hình học, màu và bố cục quyết định biểu đồ đó có đọc được hay không.

Nguyên tắc gốc: màu là để mã hoá, không phải để tô

Câu hỏi phải trả lời trước mỗi lần đổ màu: màu này mã hoá cái gì? Có ba câu trả lời hợp lệ:

1. Mã hoá một biến định lượng (một chiều hoặc hai chiều) — dùng bảng màu liên tục.
2. Mã hoá một biến định danh (categorical) — dùng bảng màu rời rạc, giới hạn số màu.
3. Nhấn mạnh có chủ đích — làm nổi một phần tử quan trọng, phần còn lại để trung tính.

Nếu màu không rơi vào một trong ba mục đích trên, gần như chắc chắn bạn đang tô thừa. Biểu đồ mặc định của nhiều công cụ tô mỗi thanh một màu khác nhau dù chúng thuộc cùng một danh mục — đó là màu vô nghĩa, làm mắt phải giải mã một chiều thông tin không tồn tại.

Ba loại bảng màu và khi nào dùng

Đây là phân loại nền tảng (theo Cynthia Brewer / ColorBrewer). Chọn sai loại bảng màu là lỗi trực quan hoá phổ biến nhất về màu.

1. Sequential — thang liên tục một chiều

Dùng khi dữ liệu chạy từ thấp đến cao theo một chiều, không có mốc giữa đặc biệt: số dư tài khoản, số lượng giao dịch, mật độ trên bản đồ nhiệt (heatmap). Bảng màu đi từ nhạt (giá trị thấp) đến đậm (giá trị cao) trong cùng một tông màu (ví dụ trắng → xanh dương đậm), hoặc chuyển tông có thứ tự sáng-tối rõ (Viridis).

Nguyên tắc: giá trị lớn hơn phải tối/đậm hơn (hoặc bão hoà hơn). Độ sáng (luminance) là kênh mà mắt xếp thứ hạng chính xác — nên thang sequential phải đơn điệu về độ sáng. Đừng dùng cầu vồng cho dữ liệu liên tục: mắt không xếp được đỏ-vàng-lục-lam theo thứ tự lớn nhỏ.

2. Diverging — hai chiều quanh mốc giữa

Dùng khi dữ liệu có một mốc giữa có ý nghĩa và giá trị lệch về hai phía: âm vs dương, dưới vs trên mục tiêu (target), giảm vs tăng so kỳ trước. Bảng màu có hai tông tương phản ở hai đầu (VD đỏ ↔ xanh dương) và một màu trung tính nhạt ở giữa (thường trắng/xám nhạt tại mốc 0).

Điểm mấu chốt: mốc giữa phải neo đúng vào con số có ý nghĩa (thường là 0, hoặc mức target), không phải trung điểm dải giá trị. Nếu biến động từ -5% đến +30%, đặt màu trung tính tại 0, không phải tại +12.5%. Đặt sai làm một khoản +2% trông "xấu" chỉ vì nó ở nửa dưới của dải.

3. Categorical / Qualitative — phân loại rời rạc

Dùng cho các danh mục không có thứ tự tự nhiên: loại sản phẩm, chi nhánh, phân khúc khách hàng. Các màu phải khác nhau về tông (hue) nhưng tương đương về độ nổi bật, để không danh mục nào trông "quan trọng hơn" chỉ vì màu.

Giới hạn khắc nghiệt: ≤ khoảng 7 màu. Mắt người không phân biệt tin cậy quá 7–8 màu định danh trong cùng một hình. Nếu có 15 danh mục, đừng tạo 15 màu — hãy gom nhóm, dùng "Top 5 + Khác", hoặc chuyển sang small multiples. Tránh bảng cầu vồng (rainbow): nó gợi ý thứ tự (đỏ→tím) mà danh mục vốn không có, và các dải cầu vồng có độ sáng không đều gây méo.

Màu có ý nghĩa: quy ước văn hoá và tài chính

Người xem mang sẵn ý nghĩa vào màu trước khi đọc dữ liệu. Bạn phải tôn trọng hoặc chủ động phá vỡ quy ước đó một cách có ý thức.

• Đỏ = xấu/giảm/cảnh báo; xanh lá = tốt/tăng/đạt là quy ước phổ biến trong báo cáo tài chính và dashboard KPI. Dùng đúng thì người xem hiểu ngay không cần chú thích; dùng ngược (xanh cho nợ xấu) gây hiểu lầm nghiêm trọng.
• Khác biệt văn hoá: quy ước đỏ/xanh không phổ quát. Trong thị trường chứng khoán Đông Á (Trung Quốc, Đài Loan, một phần Việt Nam), đỏ = tăng giá (may mắn), xanh lá = giảm — ngược hoàn toàn phương Tây. Nếu dashboard phục vụ nghiệp vụ chứng khoán/thị trường, phải thống nhất quy ước với người dùng nghiệp vụ, đừng mặc định.
• Khác biệt tài chính theo ngữ cảnh: "đỏ" trong kế toán nghĩa là số âm/lỗ (in mực đỏ), độc lập với quy ước biểu đồ. Đảm bảo màu và dấu số nói cùng một câu chuyện.

Nguyên tắc an toàn: với chỉ số hai chiều (tăng/giảm), luôn kèm dấu (+/−) hoặc mũi tên (▲/▼) bên cạnh màu, để ý nghĩa không phụ thuộc riêng vào việc người xem có phân biệt được đỏ/xanh hay không — điều dẫn thẳng tới phần accessibility.

Accessibility: đừng để màu là kênh thông tin duy nhất

Đây không phải chuyện "làm cho đẹp" — nó là chuyện có bao nhiêu người đọc được biểu đồ của bạn.

• Mù màu (color vision deficiency): khoảng 8% nam giới và ~0.5% nữ giới mắc, phổ biến nhất là khó phân biệt đỏ-lục (deuteranopia/protanopia). Với một team ngân hàng vài trăm người, đây là con số thật, không phải ngoại lệ.
• Tránh cặp đỏ-lục làm kênh phân biệt duy nhất. Chính cặp màu quy ước tăng/giảm lại là cặp khó nhất với người mù màu phổ biến nhất — nghịch lý cần xử lý.
• Dùng bảng màu colorblind-safe: các bảng của ColorBrewer (đánh dấu "colorblind safe") và Viridis (thiết kế để đơn điệu về độ sáng và phân biệt được với hầu hết dạng mù màu) là lựa chọn mặc định an toàn cho sequential/diverging.
• Redundant encoding (mã hoá dư thừa): đừng để màu là kênh duy nhất. Thêm nhãn văn bản, hình dạng (marker), hoặc kiểu nét (liền/đứt) để thông tin vẫn đọc được khi in đen trắng hoặc khi người xem không phân biệt màu. Đây là nguyên tắc quan trọng nhất của phần này.
• Độ tương phản (contrast): chữ trên nền phải đủ tương phản (WCAG khuyến nghị tỷ lệ tối thiểu 4.5:1 cho chữ thường). Xám nhạt trên trắng cho tiêu đề nhỏ là lỗi thường gặp trên dashboard "trông sang".

Mẹo kiểm tra nhanh: bật chế độ mô phỏng mù màu (nhiều công cụ và trình duyệt có), hoặc chụp màn hình rồi chuyển sang thang xám (grayscale). Nếu ở thang xám mà các phần tử trùng nhau không phân biệt được, biểu đồ đang phụ thuộc mù quáng vào màu.

Dùng màu có mục đích: xám cho ngữ cảnh, màu cho điểm nhấn

Nguyên tắc mạnh nhất và bị bỏ qua nhiều nhất: màu là tài nguyên khan hiếm, tiêu nó có chủ đích.

• Để phần lớn biểu đồ ở xám trung tính (ngữ cảnh), chỉ tô màu nổi cho phần tử cần nhấn (chi nhánh của bạn giữa 30 chi nhánh, đường xu hướng chính giữa các đường tham chiếu). Mắt lập tức bị hút vào phần có màu — đó là "pre-attentive attention" từ bài tri giác.
• Đừng tô hết. Khi mọi thứ đều nổi bật thì không gì nổi bật. Biểu đồ 12 đường mỗi đường một màu là biểu đồ không có thông điệp.
• Đối lập: một stacked bar 8 danh mục tô 8 màu rực rỡ khiến người xem không biết nên nhìn đâu. Nếu chỉ có 1–2 danh mục quan trọng, tô chúng, còn lại gộp thành "Khác" màu xám.

Nhất quán màu across dashboard

Trong một dashboard hay một bộ báo cáo, một danh mục = một màu, xuyên suốt mọi biểu đồ. Nếu "CASA" là màu xanh dương ở biểu đồ cơ cấu huy động, nó phải là xanh dương ở mọi biểu đồ khác. Đổi màu cho cùng một khái niệm buộc người xem học lại chú thích ở mỗi ô — thuế nhận thức (cognitive tax) hoàn toàn tránh được.

Cách làm trong thực tế: định nghĩa một bảng màu thương hiệu/ngữ nghĩa (semantic palette) tập trung, gán màu cố định cho từng khái niệm nghiệp vụ (mỗi loại tiền tệ, mỗi nhóm nợ, mỗi phân khúc), và tham chiếu nó ở mọi report. Power BI có theme JSON, Tableau/Looker có custom palette — chuẩn hoá một lần, dùng lại mãi.

Typography: chữ cũng là dữ liệu

Thiết kế không dừng ở màu. Chữ chiếm phần lớn diện tích mọi báo cáo BI và thường bị thả nổi.

• Font dễ đọc: chọn font sans-serif rõ ràng cho màn hình (Segoe UI, Inter, Roboto...). Tránh font trang trí. Một font chính, tối đa hai — nhiều hơn thành lộn xộn.
• Phân cấp cỡ chữ (typographic hierarchy): tiêu đề dashboard > tiêu đề biểu đồ > nhãn trục > chú thích. Người xem lướt theo phân cấp — nếu mọi chữ cùng cỡ, không có điểm vào (entry point).
• Căn số theo phải: mọi cột số trong bảng phải căn phải để hàng đơn vị thẳng nhau, mắt so sánh độ lớn tức thì. Căn phải cả tiêu đề cột số. Text (tên) căn trái. Đây là lỗi cực phổ biến khi số bị căn trái/giữa.
• Định dạng số: dùng dấu phân tách hàng nghìn nhất quán, số chữ số thập phân hợp lý (đừng hiển thị 7 chữ số thập phân cho tỷ đồng), viết tắt thang lớn (tỷ/nghìn tỷ) khi phù hợp.

Layout, whitespace, alignment và grid

• Whitespace (khoảng trắng): không gian trống không phải chỗ lãng phí — nó nhóm và tách các phần tử. Nhồi nhét biểu đồ sát nhau khiến dashboard ngột ngạt và khó quét. Khoảng cách đều giữa các ô tạo nhịp đọc.
• Alignment (căn chỉnh): các ô, tiêu đề, mép biểu đồ phải thẳng hàng theo một grid (lưới) vô hình. Lệch vài pixel khiến tổng thể trông cẩu thả và làm mắt phải "chỉnh lại" liên tục. Hầu hết công cụ có snap-to-grid — bật nó.
• Grid / luồng đọc: bố trí theo luồng người phương Tây đọc — trái→phải, trên→xuống theo dạng chữ Z hoặc F. Đặt chỉ số quan trọng nhất (KPI tổng) ở góc trên bên trái, chi tiết bổ trợ ở dưới/phải.
• Nhóm theo Gestalt: phần tử liên quan đặt gần nhau (proximity), phần tử cùng loại trông giống nhau (similarity) — người xem tự động nhóm chúng.

Nguyên tắc tối giản: data-ink ratio

Theo Edward Tufte, hãy tối đa hoá tỷ lệ mực-dữ liệu (data-ink ratio): mỗi giọt mực nên biểu diễn dữ liệu; xoá mọi thứ không mang thông tin (chartjunk).

• Bỏ 3D: biểu đồ 3D (pie 3D, cột 3D) bóp méo tỷ lệ do phối cảnh và che khuất dữ liệu. Không bao giờ dùng 3D cho dữ liệu 2D.
• Bỏ gradient/hiệu ứng thừa: bóng đổ, gradient nền, đổ bóng thanh — trang trí không thêm thông tin, còn làm khó đọc.
• Bỏ viền nặng và đường lưới đậm: đường lưới (gridline) nên mờ, xám nhạt, hoặc bỏ hẳn nếu có nhãn dữ liệu. Viền ô đậm chia cắt thị giác không cần thiết.
• Bỏ nền màu: nền trắng/rất nhạt tối đa hoá tương phản với dữ liệu.

Nguyên tắc chung: nếu xoá một phần tử mà thông điệp không mất, hãy xoá nó.

Use case thực tế

Bối cảnh: Team BI của NCB xây dashboard "Biến động số dư huy động theo chi nhánh, so kỳ trước" cho khối nguồn vốn. Có 20 chi nhánh; câu hỏi nghiệp vụ là chi nhánh nào tăng/giảm huy động mạnh nhất so tháng trước.

Bản nháp đầu tiên (sai): stacked bar 20 chi nhánh, mỗi chi nhánh một màu cầu vồng rực rỡ, số căn giữa, nền xám gradient, hiệu ứng 3D. Người xem không đọc được ai tăng ai giảm.

Thiết kế lại theo bài này:

1. Chọn bảng màu diverging vì biến động có mốc giữa ý nghĩa (0%): đỏ cho giảm, trắng tại 0, xanh cho tăng (dùng RdBu colorblind-safe, đảo để tăng=xanh). Neo màu trung tính đúng vào 0%, không phải trung điểm dải.
2. Redundant encoding: mỗi thanh kèm dấu và mũi tên ▲/▼ và nhãn % — người mù màu vẫn đọc được.
3. Sắp xếp thanh theo giá trị (giảm dần) thay vì theo bảng chữ cái, để thứ hạng hiện ngay.
4. Nhấn có chủ đích: 2 chi nhánh biến động mạnh nhất tô đậm, còn lại giữ tông nhạt hơn.
5. Tối giản: bỏ 3D, bỏ gradient, gridline mờ, nền trắng; số căn phải với 1 chữ số thập phân.
6. Nhất quán: màu quy ước tăng=xanh/giảm=đỏ này áp dụng cho mọi dashboard nguồn vốn khác — chuẩn hoá trong theme.

Câu SQL dưới đây tạo dữ liệu ví dụ minh hoạ ý nghĩa của bảng màu diverging: tính biến động tổng giá trị giao dịch tháng gần nhất so tháng trước theo từng tài khoản; giá trị âm (giảm — sẽ tô đỏ) và dương (tăng — sẽ tô xanh) lệch quanh mốc 0 — chính là dữ liệu cần một thang diverging neo tại 0.

-- ▶ Chạy được
WITH thang AS (
  SELECT
    account_id,
    date_trunc('month', created_at) AS thang,
    SUM(amount)::numeric AS tong
  FROM transactions
  GROUP BY account_id, date_trunc('month', created_at)
),
xep AS (
  SELECT
    account_id,
    thang,
    tong,
    LAG(tong) OVER (PARTITION BY account_id ORDER BY thang) AS tong_ky_truoc
  FROM thang
)
SELECT
  account_id,
  thang,
  tong,
  tong_ky_truoc,
  (tong - tong_ky_truoc)::numeric AS bien_dong,
  ROUND(
    (tong - tong_ky_truoc)
    / NULLIF(ABS(tong_ky_truoc), 0) * 100
  , 1)::numeric AS bien_dong_pct
FROM xep
WHERE tong_ky_truoc IS NOT NULL
ORDER BY bien_dong_pct DESC NULLS LAST
LIMIT 50;

Cột bien_dong_pct có cả giá trị âm và dương quanh 0 — đây chính là biến định lượng hai chiều cần bảng màu diverging (đỏ ↔ trắng ↔ xanh), khác hẳn tong (một chiều, hợp sequential).

Về mặt trình bày báo cáo, các nguyên tắc layout/whitespace/tối giản ở trên được cụ thể hoá thêm trong Power BI 7 — Thiết kế báo cáo, và cách gắn màu vào câu chuyện dữ liệu ở BI 10 — Data storytelling.

Ghi nhớ

• Trước mỗi lần đổ màu, hỏi: màu này mã hoá cái gì? Nếu không có câu trả lời (định lượng / định danh / nhấn mạnh), đừng tô.
• Ba loại bảng màu: sequential (thấp→cao một chiều, một tông, đơn điệu về độ sáng), diverging (hai chiều quanh mốc giữa — neo trung tính đúng vào 0/target), categorical (định danh, ≤7 màu, tránh cầu vồng).
• Màu mang ý nghĩa văn hoá/tài chính: đỏ=giảm/xanh=tăng là quy ước, nhưng chứng khoán Đông Á đảo ngược — thống nhất với người dùng, đừng mặc định.
• Accessibility: ~8% nam mù màu, tránh đỏ-lục làm kênh duy nhất; dùng ColorBrewer/Viridis colorblind-safe; luôn thêm nhãn/hình dạng/dấu ngoài màu; đảm bảo tương phản; kiểm bằng thang xám.
• Màu có mục đích: xám cho ngữ cảnh, màu nổi cho điểm nhấn — không tô hết. Khi mọi thứ nổi bật thì không gì nổi bật.
• Nhất quán: một danh mục = một màu xuyên suốt dashboard; chuẩn hoá bằng semantic palette / theme.
• Typography: font dễ đọc, phân cấp cỡ chữ, số căn phải, định dạng số nhất quán.
• Layout: dùng whitespace để nhóm/tách, căn thẳng theo grid, đặt KPI quan trọng ở góc trên trái.
• Tối giản (data-ink): bỏ 3D, gradient thừa, viền nặng, gridline đậm, nền màu — xoá gì mà thông điệp không mất thì xoá.