Màu sắc trong thiết kế web (chọn bảng màu vừa đẹp vừa đọc được)

Chọn màu cho một website không phải là chọn “màu nào đẹp”, mà là quyết định màu nào giữ vai trò gì, đứng cạnh nhau ra sao, và liệu người đọc có nhìn rõ chữ trên nền hay không. Bài viết này đi qua bốn lớp: nền tảng bánh xe màu, cách dựng bảng màu theo vai trò, tương phản đủ chuẩn cho người đọc, và tâm lý màu để chọn đúng tông cho thương hiệu.

Bánh xe màu – nền tảng để phối màu

Bánh xe màu (color wheel – vòng tròn sắp các màu theo sắc độ) là điểm khởi đầu của mọi cách phối. Trên web, mỗi màu thường được mô tả bằng ba thuộc tính: hue (tông màu – đỏ, lam, lục…), saturation (độ bão hoà – màu tươi hay xám) và lightness (độ sáng – sáng hay tối). Hiểu ba thuộc tính này giúp bạn tạo ra các biến thể của cùng một màu mà không bị lệch tông.

Một vài cách phối kinh điển từ bánh xe màu:

• Đơn sắc (monochromatic): một hue, thay đổi độ sáng và bão hoà. An toàn, dễ nhất quán, hợp giao diện tối giản.
• Tương đồng (analogous): các màu nằm cạnh nhau trên bánh xe. Êm dịu, ít xung đột.
• Bổ túc (complementary): hai màu đối nhau. Tạo điểm nhấn mạnh, hợp cho nút kêu gọi hành động.
• Bộ ba (triadic): ba màu cách đều. Sống động nhưng cần cân nhắc liều lượng để không rối.

Dựng bảng màu theo vai trò primary, secondary, accent

Đây là phần quan trọng nhất và cũng hay bị làm sai. Một bảng màu web không phải là một danh sách màu rời rạc, mà là một hệ thống có vai trò. Cách chia phổ biến, được tài liệu chính thức của Material Design 3 hệ thống hoá thành các “color role” (vai trò màu):

Quy tắc 60-30-10 (60% nền trung tính, 30% màu phụ, 10% màu nhấn) là điểm khởi đầu tốt để giao diện không bị “đầy màu”. Màu nhấn càng dùng ít thì càng có sức mạnh – nếu mọi nút đều rực rỡ thì không nút nào nổi bật.

Một mẹo thực chiến: với mỗi màu, hãy dựng sẵn một thang độ sáng (tonal scale) từ rất sáng đến rất tối – thường 9 đến 13 bậc. Material 3 gọi đây là tonal palette: cùng một hue nhưng nhiều mức sáng, để bạn luôn có sẵn sắc độ cần cho trạng thái hover, pressed, nền, viền. Có thang sẵn thì giao diện không bao giờ phải “chế màu” tuỳ hứng giữa chừng.

Buộc màu vào design token để giữ nhất quán

Để bảng màu không bị trôi mỗi nơi một kiểu, hãy lưu chúng dưới dạng design token (biến thiết kế – đơn vị nhỏ nhất lưu màu, cỡ chữ, khoảng cách) thay vì gõ mã màu cứng vào từng chỗ. Điểm mấu chốt là đặt tên theo vai trò, không theo màu thật:

/* Nên: tên theo vai trò - đổi giá trị 1 chỗ, cả site đổi theo */
--color-primary: #FF6986;
--color-text: #1A1A1A;
--color-surface: #FAFAF8;
--color-border: #E5E3DD;

/* Tránh: tên theo màu thật - đổi brand là phải sửa khắp nơi */
--coral-pink: #FF6986;  /* khi brand đổi sang xanh thì tên này vô nghĩa */

Cách đặt tên ngữ nghĩa này có hai lợi ích: đổi nhận diện thương hiệu chỉ cần sửa một chỗ, và chuyển sang chế độ tối (dark mode) cũng nhẹ nhàng hơn vì bạn chỉ gán lại giá trị cho cùng bộ token. Đây cũng là viên gạch đầu tiên của một design system chỉnh chu.

Tương phản đủ chuẩn WCAG – màu phải đọc được

Một bảng màu đẹp trên Figma nhưng chữ xám nhạt trên nền trắng thì vô dụng với phần lớn người đọc. Tương phản (contrast – chênh lệch độ sáng giữa chữ và nền) là điều kiện sống còn, và chuẩn WCAG 2.2 quy định rõ ngưỡng tối thiểu (mức AA):

Hai nguyên tắc bổ sung mà WCAG nhấn mạnh và rất hay bị quên:

• Không bao giờ dùng màu một mình để truyền thông tin. Báo lỗi form không chỉ viền đỏ, phải kèm icon hoặc dòng chữ – vì người mù màu không phân biệt được đỏ với xanh.
• Kiểm thử với người mù màu. Khoảng một phần mười nam giới gặp một dạng rối loạn nhận màu nào đó, nên hãy giả lập (color blindness simulator) để xem palette còn phân biệt được không.

Hãy đo từng cặp màu chữ – nền bằng công cụ như WebAIM Contrast Checker ngay khi dựng bảng màu, chứ đừng để đến lúc giao diện xong mới phát hiện chữ không đọc nổi. Phần này nối thẳng với accessibility trong thiết kế web – tương phản chỉ là một mảnh của bức tranh dễ tiếp cận lớn hơn.

Tâm lý màu – chọn đúng tông cho thương hiệu

Theo nghiên cứu của Nielsen Norman Group, người dùng hình thành ấn tượng đầu tiên về một giao diện chỉ trong khoảng 50 mili-giây, và màu sắc là yếu tố dẫn dắt phán đoán chớp nhoáng đó. Vì vậy tông màu nên khớp với cảm xúc bạn muốn gợi:

• Xanh lam: tin cậy, ổn định, chuyên nghiệp – hay gặp ở tài chính, phần mềm doanh nghiệp.
• Lục: tăng trưởng, sức khoẻ, thiên nhiên.
• Đỏ / coral: năng lượng, khẩn cấp, kích hoạt hành động – mạnh nhưng dễ gây căng nếu lạm dụng.
• Trung tính ấm: các tông trắng ngà, be ấm đang là phản ứng với màu trắng lạnh “doanh nghiệp”, giúp giảm mỏi mắt khi đọc lâu.

Lưu ý ý nghĩa màu phụ thuộc văn hoá và ngữ cảnh ngành – không có công thức cứng “màu này = cảm xúc kia”. Hãy dùng tâm lý màu như gợi ý ban đầu, rồi kiểm chứng bằng phản hồi người dùng thật.

Trong thực tế dựng giao diện cho dịch vụ thiết kế website của Web22, web22.dev chạy một bộ token màu riêng với màu nhấn coral #FF6986 trên nền trung tính ấm #FAFAF8 – màu nhấn chỉ xuất hiện ở những điểm cần kéo mắt, phần còn lại để trung tính nâng đỡ. Vì Web22 vừa thiết kế vừa lập trình, bảng màu chốt trên bản thiết kế ra đúng như vậy trong code, không bị lệch khi bàn giao.

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

Một website nên có bao nhiêu màu?

Một màu chính, một đến hai màu phụ/nhấn, cộng với một thang trung tính cho nền và chữ là đủ cho phần lớn site. Quan trọng là mỗi màu có vai trò rõ, không phải số lượng.

Tương phản bao nhiêu là đủ cho chữ?

Theo WCAG 2.2 mức AA, chữ thường cần tối thiểu 4.5:1 so với nền, chữ lớn cần 3:1. Đo bằng công cụ kiểm tra tương phản trước khi chốt màu.

Nên chọn màu rồi mới đo tương phản, hay ngược lại?

Chọn tông màu thương hiệu trước theo cảm xúc, nhưng dựng thang sáng và đo tương phản ngay trong lúc dựng bảng màu – đừng để đến cuối mới sửa, vì lúc đó sửa màu sẽ kéo theo cả giao diện.

Nếu bạn muốn một bảng màu nhất quán, đủ tương phản và buộc gọn vào hệ thống ngay từ đầu, tham khảo dịch vụ thiết kế UI/UX của Web22.