Đa số chủ doanh nghiệp muốn website “cùng màu với logo”, và đó là điểm bắt đầu đúng. Vấn đề là logo thường chỉ có một hai màu, còn website cần màu cho nền, chữ, nút, đường viền, thông báo lỗi; đổ màu logo lên mọi thứ thì trang vừa chói vừa khó đọc. Bài này hướng dẫn đi từ màu logo tới một bảng màu website dùng được, và cách kiểm để chữ luôn đọc rõ.
Bước 1: lấy đúng mã màu của logo
Đừng dùng công cụ chấm màu trên một tấm ảnh logo tải từ mạng xã hội. Ảnh đã nén thường lệch màu, và mỗi lần chấm ra một mã hơi khác. Hãy tìm tệp logo gốc dạng vector (AI, PDF, SVG) hoặc bộ nhận diện thương hiệu do người thiết kế logo bàn giao; trong đó có mã màu chính xác, thường ghi dạng HEX cho màn hình (ví dụ #0F766E) và CMYK cho bản in. Website dùng mã HEX hoặc RGB, không dùng mã in.
Nếu chỉ còn ảnh, chấm màu ở vùng đặc lớn nhất của logo, so trên hai ba màn hình khác nhau, rồi chốt một mã và ghi lại. Từ đó trở đi mọi người dùng đúng mã đó, không chấm lại.
Bước 2: chia màu theo vai trò, không theo sở thích
Một bảng màu website gọn chỉ cần năm vai trò. Màu logo thường giữ vai trò “màu chính” hoặc “màu nhấn”, còn phần lớn diện tích trang là nền trung tính để nội dung nổi lên:
| Vai trò | Lấy từ đâu | Dùng cho | Kiểm gì |
|---|---|---|---|
| Màu chính | Màu chủ đạo của logo | Nút chính, liên kết, điểm nhấn tiêu đề | Chữ trắng trên nút đủ tương phản |
| Màu nhấn | Màu phụ của logo, hoặc một sắc đậm, nhạt của màu chính | Huy hiệu, biểu tượng, dòng cần chú ý | Dùng ít, không cạnh tranh với nút chính |
| Nền | Trắng, xám rất nhạt, hoặc màu chính pha rất nhạt | Phần lớn diện tích trang | Không làm mỏi mắt khi đọc lâu |
| Chữ | Xám đậm gần đen, có thể pha chút màu chính | Thân bài, tiêu đề | Đạt tỉ lệ 4.5:1 với nền |
| Trạng thái | Màu quy ước: đỏ lỗi, xanh lá thành công, vàng cảnh báo | Thông báo biểu mẫu, giỏ hàng | Không trùng với màu chính gây hiểu nhầm |
Một cách chia diện tích hay được người thiết kế dùng là khoảng 60% nền trung tính, 30% màu phụ và 10% màu nhấn. Đó là kinh nghiệm nghề, không phải luật; điều quan trọng là màu chính xuất hiện ở đúng chỗ khách cần bấm, để mắt khách được dẫn tới đó.
Bước 3: kiểm độ tương phản trước khi chốt
Màu đẹp trên bảng phối có thể khó đọc trên trang thật, nhất là ngoài trời hoặc trên điện thoại chỉnh độ sáng thấp. Bộ tiêu chuẩn tiếp cận WCAG 2.2, mức AA, yêu cầu:
- Chữ thường: tỉ lệ tương phản với nền ít nhất 4.5:1.
- Chữ lớn (từ 18pt, hoặc 14pt đậm): ít nhất 3:1.
- Thành phần giao diện như viền ô nhập, biểu tượng, trạng thái nút: ít nhất 3:1 so với màu bên cạnh.
Cách kiểm không cần phần mềm riêng: trong trình duyệt Chrome, mở công cụ dành cho nhà phát triển, chọn một đoạn chữ, bấm vào ô màu của nó; bộ chọn màu hiện tỉ lệ tương phản và cho biết đạt mức AA hay AAA. Màu vàng, cam, xanh lá sáng hay trượt bài kiểm này khi đặt chữ trắng lên trên.
Khi màu logo khó dùng trên website
Logo màu sáng (vàng, xanh nhạt): giữ màu đó cho logo và mảng trang trí, còn nút và liên kết dùng một sắc đậm hơn của cùng màu để đạt tương phản. Logo đỏ rực: đỏ dễ bị hiểu là lỗi hoặc cảnh báo, nên dùng tiết chế, chọn màu khác cho thông báo lỗi. Logo nhiều màu: chọn một màu làm màu chính, các màu khác chỉ xuất hiện trong logo và hình ảnh, không chia đều cho nút và tiêu đề. Dù đổi sắc thế nào, logo luôn giữ đúng màu gốc.
Nếu website có chế độ tối, làm thêm một bộ năm vai trò cho nền tối và kiểm tương phản lại từ đầu; màu đạt trên nền trắng chưa chắc đạt trên nền đen. Màu đi cùng chữ: chọn phông chữ tiếng Việt đủ dấu xem ở bài Font chữ tiếng Việt cho website, và kiểm cả màu lẫn chữ trên điện thoại theo bài Website trên điện thoại: 8 lỗi hay gặp.
Muốn tham khảo cách các website phối màu trước khi chốt, bạn có thể xem trang Giao diện mẫu của chúng tôi.
Tóm lại
- Lấy mã màu từ tệp logo gốc, chốt một mã HEX và dùng thống nhất.
- Chia năm vai trò: màu chính, màu nhấn, nền, chữ, trạng thái; phần lớn trang là nền trung tính.
- Kiểm tương phản theo WCAG: chữ thường 4.5:1, chữ lớn và thành phần giao diện 3:1.