<>Chúng ta thường nghe những quy tắc đơn giản như: đỏ là nguy hiểm, xanh dương là tin cậy, xanh lá là thành công. Những liên tưởng này có tồn tại, nhưng nếu chỉ dựa vào chúng thì thiết kế sẽ trở nên rập khuôn, thiếu bối cảnh văn hoá và bỏ qua hành vi thực tế của người dùng.
Tâm lý màu sắc trong UI thực tế phức tạp hơn nhiều. Điều ảnh hưởng đến cảm nhận và hành vi người dùng không chỉ là “màu gì”, mà là ngữ cảnh, văn hoá và thói quen học được.
/Vấn đề của các quy tắc màu chung chung
Nhiều lời khuyên xem màu sắc như có ý nghĩa cố định, áp dụng cho mọi nơi. Thực tế không đơn giản vậy.
– Đỏ không phải lúc nào cũng nguy hiểm. YouTube, Netflix, Coca-Cola dùng đỏ làm màu chủ đạo nhưng người dùng không hề thấy “đe doạ”.
– Xanh dương không đảm bảo sự tin tưởng. Facebook vẫn xanh nhưng mức độ tin tưởng của người dùng đã giảm theo thời gian.
– Xanh lá không phải lúc nào cũng dịu mắt. Xanh neon có thể gây chói hoặc kích thích mạnh tuỳ độ bão hoà.
Bài học: Ý nghĩa màu sắc phụ thuộc vào bối cảnh, văn hoá và trải nghiệm người dùng, chứ không phải bản năng sinh học cố định.
/Tâm lý màu sắc thực sự nói gì?
1. Độ tương phản & khả năng đọc quan trọng hơn màu gì
Người dùng không thể “tin tưởng giao diện xanh” nếu họ không đọc được chữ.
Tỉ lệ tương phản tối thiểu (WCAG):
– Chữ thường: 4.5:1
– Chữ lớn: 3:1
– Thành phần UI: 3:1
Không có “xanh đáng tin” nào cứu nổi một giao diện thiếu tương phản. Đọc được luôn là ưu tiên số 1.
2. Văn hoá có thể đảo ngược ý nghĩa màu
Ví dụ:
Trắng: phương Tây = cưới hỏi, tinh khiết. Nhiều nước châu Á = tang lễ.
Đỏ: Trung Quốc = may mắn, thịnh vượng. Nam Phi = tang tóc.
Vàng: phương Tây = cảnh báo. Nhật Bản = dũng cảm.
=> Luôn hiểu đối tượng người dùng của mình ở thị trường nào.
3. Ý nghĩa “học được” mạnh hơn “bẩm sinh”
Người dùng quen màu qua thói quen:
– Đèn xanh = đi
– Badge đỏ = có thông báo
– Link xanh dương = có thể click
Thiết kế tốt là tận dụng quy ước quen thuộc, không phải chống lại chúng.
/Nguyên tắc màu thực tế trong UI
Nguyên tắc 1: Màu để hỗ trợ ý nghĩa, không phải mang ý nghĩa duy nhất
Khoảng 8% nam giới bị mù màu. Nếu chỉ dùng màu để báo lỗi → họ không thấy.
– Tệ: Chữ đỏ báo lỗi, không icon.
– Tốt: Chữ đỏ + icon lỗi + thông báo rõ ràng.
Nguyên tắc 2: Giới hạn bảng màu
Quá nhiều màu = loạn thị giác, khó ra quyết định.
Bảng màu thực tế:
– 1 màu chính (brand/action chính)
– 1 màu phụ
– 5–6 màu xám trung tính
Màu ngữ nghĩa: success, warning, error, info
→ Tổng: 10–15 màu là tối đa
Nguyên tắc 3: Điều khiển độ bão hoà (Saturation)
– Bão hoà cao: button chính, cảnh báo quan trọng
– Trung bình: hành động phụ
– Thấp: nền, trạng thái disable
Tạo thứ bậc thị giác ngay cả khi chuyển sang grayscale.
Nguyên tắc 4: Màu nóng tiến lên, màu lạnh lùi lại
– Nóng (đỏ, cam, vàng): gần, gấp, hút mắt
– Lạnh (xanh dương, xanh lá, tím): xa, dịu
Dùng để tạo chiều sâu: nóng cho foreground, lạnh cho background.
Nguyên tắc 5: Màu thay đổi theo ngữ cảnh
Cùng một màu xám trên nền trắng sẽ trông đậm hơn trên nền đen.
=> Test màu trong mọi ngữ cảnh, không chỉ artboard trắng.
/Gợi ý màu cho các thành phần UI
1. Primary action button
– Tương phản cao với nền
– Bão hoà cao
– Dùng nhất quán
Phổ biến: xanh dương sáng, xanh lá đậm, cam nổi, tím mạnh.
2. Thông báo lỗi
– Đỏ là quy ước quen thuộc
– Lỗi nhẹ: đỏ bão hoà thấp
Lỗi nghiêm trọng: đỏ đậm + icon rõ
3. Xác nhận thành công
– Xanh lá bão hoà vừa phải
– Có thể dùng animation ngắn thay vì màu đậm kéo dài
4. Thông tin trung tính
– Xanh dương cho info
– Xám cho trạng thái neutral
– Bão hoà thấp để không gây chú ý quá mức
5. Background
– Bão hoà rất thấp
– Gần trắng hoặc gần đen
– Có thể pha tint brand nhẹ
6. Dark Mode
Màu trong dark mode không thể đảo ngược đơn giản:
– Màu trông sáng hơn
– Cần ít tương phản hơn
– Màu bão hoà cao gây mỏi mắt hơn
Cách làm: thiết kế light mode trước, sau đó tinh chỉnh lại brightness & saturation.
7. Cách test màu nhanh
– Nheo mắt / blur: còn thấy button chính không?
– Grayscale: còn phân biệt lỗi – click – quan trọng không?
– Mô phỏng mù màu: Stark, extension Chrome…
– Xem ở nhiều môi trường: nắng gắt, màn hình khác nhau.
Hỏi người dùng: họ hiểu màu đó là gì?
8. Lỗi phổ biến
– Dùng màu brand cho mọi thứ
– Quá nhiều accent color
– Không tính accessibility từ đầu
– Chạy theo trend thay vì chức năng
– Nghĩ sở thích cá nhân = phổ quát
9. Xây hệ màu hiệu quả
Bước 1: Tạo thang xám 6–8 mức
Bước 2: Chọn 1 màu chính + biến thể sáng/tối
Bước 3: Thêm màu ngữ nghĩa (xanh lá, vàng, đỏ, xanh dương)
Bước 4: Test trong layout thật
Bước 5: Ghi rõ quy tắc dùng màu
10. Quy tắc 60–30–10
– 60%: nền trung tính
– 30%: màu phụ / brand nhẹ
– 10%: màu nhấn / hành động chính
Giúp giao diện cân bằng, không quá tải.
/Tâm lý thật sự: Sự nhất quán
Người dùng học qua lặp lại.
Nếu nút xanh = tiếp tục, nút đỏ = huỷ → họ quen.
Phá vỡ quy ước đó sẽ gây rối, dù lý thuyết màu có nói gì đi nữa.
Sức mạnh không nằm ở “ý nghĩa màu”, mà ở việc bạn dùng nó nhất quán.
/Kết luận
Bắt đầu bằng chức năng, sau đó mới thêm cá tính:
– Đảm bảo đọc được & accessibility
– Tạo thứ bậc rõ ràng
– Nhất quán màu hành động
– Test trong bối cảnh thật
– Sau cùng mới thêm chất riêng thương hiệu
Chức năng cho phép cá tính tồn tại. Cá tính không có chức năng chỉ là trang trí.
