Màu sắc trong thiết kế UI — 60-30-10, WCAG contrast và xây palette

Màu sắc trong thiết kế giao diện không phải chuyện thẩm mỹ — là kỷ luật kết hợp color theory + WCAG contrast threshold + brand semantics. Bài này hướng dẫn xây palette từ brand color qua 9-11 step, audit contrast, áp 60-30-10 cho dashboard / shop / landing, tránh 7 lỗi color phổ biến.

Vì sao palette UI quyết định trust và conversion

Color không phải chuyện “đẹp hay xấu” theo cảm tính designer. Mỗi cặp text/background, mỗi shade của brand color đều ảnh hưởng đến khả năng đọc, khả năng nhận diện CTA và mức độ trust user dành cho brand.

Quy tắc 60-30-10 phối tỷ lệ neutral / brand / accent. WCAG 2.2 AA yêu cầu contrast 4,5:1 cho text body và 3:1 cho UI component.

Color model 2026 đang chuyển từ HSL sang OKLCH (perceptually uniform) cho design token modern, hỗ trợ full Chrome Safari Firefox từ 2025.

Tác động cụ thể đến UX và accessibility

Fail WCAG AA contrast khiến user khiếm thị nhẹ + lớn tuổi không đọc được, chiếm 8-12% tổng user tuỳ ngành. Site B2B nhắm khách 40-60 tuổi mà text contrast 3:1 đồng nghĩa với loại 1/8 lead khỏi flow ngay vòng đọc đầu.

Quá nhiều brand color (đỏ tràn 50% screen) khiến user mệt sau 5 phút, perceived quality giảm. CTA nổi bật nhờ accent 10% diện tích thu 80% click — ngược lại CTA cùng cấp với 4-5 button khác thì user không biết click đâu.

Color theory cơ bản — vòng tròn màu và relationship

Color theory là khung tham chiếu cách màu tương tác trên vòng tròn 12 màu (color wheel). Designer 2026 không cần thuộc lòng từng cặp — tool tự gen palette dựa trên 5-6 relationship phổ biến.

Hiểu cơ bản vẫn cần để đọc palette tool gen ra và biết khi nào tweak khi nào bỏ. Đặc biệt khi brand muốn lệch convention ngành mà vẫn giữ harmony, hiểu relationship giúp ra quyết định nhanh.

Relationship tương phản — Complementary, Triadic, Split

• Complementary: 2 màu đối diện trên vòng tròn (vd xanh dương 240° và cam 60°). Tương phản cao, dùng cho CTA + nền.
• Rủi ro chói mắt nếu cả hai cùng saturation cao — fix giảm saturation 1 màu xuống 50-70%.
• Triadic: 3 màu cách đều 120° (vd đỏ, vàng, xanh dương). Cân bằng, vibrant, phù hợp brand trẻ trung (gaming, food delivery, fashion).
• Trade-off là khó dùng cho ngành B2B nghiêm túc vì quá rực.
• Split-complementary: 1 màu chính + 2 màu kề màu đối diện (vd xanh dương + cam vàng + cam đỏ). Cân bằng giữa contrast và harmony, an toàn nhất cho người mới bắt đầu.

Relationship hài hoà — Analogous và Monochromatic

• Analogous: 3 màu kề nhau (xanh dương 240°, xanh lá 180°, xanh ngọc 210°). Hài hoà, ít contrast, phù hợp brand mềm mại (sức khoẻ, giáo dục, đồ thủ công).
• Cần thêm 1 màu trái chiều nhỏ 10% để tạo focal point cho CTA.
• Monochromatic: 1 hue duy nhất với 9-11 step shade (50/100/200… 950).
• Tailwind palette mặc định là monochromatic per color. Đơn giản, dễ duy trì consistency, cần thêm 1 màu accent cho CTA nổi bật.

Tham khảo Material 3 color system cho cách Material approach palette. Approach Material kết hợp monochromatic với role-based color (primary / secondary / tertiary / error / surface) tạo hệ thống bao trùm cả light và dark mode.

Color model 2026 — HSL, RGB, HEX và OKLCH

Designer 2026 cần biết 4 color model dùng song song trong Figma + CSS + design token. Mỗi model có ưu điểm riêng, không phải chuyện chọn 1 thay tất cả.

Model output — HEX và RGB/RGBA

• HEX (#RRGGBB): format ngắn 6 ký tự, designer dùng nhiều nhất khi share màu (#1e40af). Hạn chế không trực giác — không biết #1e40af đậm nhạt thế nào trừ khi mở browser xem.
• RGB / RGBA: 3 kênh red/green/blue 0-255, alpha 0-1. Phù hợp khi cần transparency rgba(30, 64, 175, 0.5).
• Hạn chế giống HEX — không trực giác về độ sáng / saturation.

Hai model này dùng cho output cuối (Figma export, CSS production). Không dùng cho thinking khi xây palette — vì designer phải nhìn nhiều màu cùng lúc và đoán quan hệ giữa chúng.

Model thinking — HSL và OKLCH

• HSL / HSLA: Hue 0-360°, Saturation 0-100%, Lightness 0-100%. Trực giác — tăng L = sáng hơn, tăng S = rực hơn, đổi H = đổi màu chính.
• Dùng cho thinking palette + sinh shade theo step (gen 9 step giữ H + S, đổi L từ 95% xuống 10%).
• OKLCH (mới 2023, full support 2025): Lightness perceptually uniform — L = 50% trong OKLCH thực sự là “trung bình sáng” với mắt người. Trong khi L = 50% HSL có thể cảm giác sáng/tối tuỳ hue.
• Chuyên gen palette với step lightness đều mắt thấy hơn HSL 30-40%.

OKLCH support full Chrome 111+ (2023), Safari 15.4, Firefox 113. Web22 chuyển dần sang OKLCH cho mọi project mới từ 2025 — tool visualize tốt nhất là oklch.com.

Quy tắc 60-30-10 — phối màu cân bằng theo diện tích

60-30-10 là quy tắc cổ điển từ design nội thất, áp dụng UI từ những năm 2000 và vẫn chuẩn 2026. Nguyên tắc: 60% nền + neutral, 30% brand, 10% accent.

Áp đúng thì screen có rhythm visual, mắt không bị mệt.

Phân bổ 60% / 30% / 10%

• 60% neutral: grayscale 11 step (50-950 theo Tailwind) hoặc warm gray cho brand mềm. Nền chính #ffffff hoặc #fafafa, body text #1f2937 (gray-800), border #e5e7eb (gray-200).
• 80% diện tích screen rơi vào nhóm này.
• 30% brand: phủ navigation, hero section, link inline, button primary. Brand color thường 1 hue với 3-5 step (50, 500, 700, 900) cho hover, active, focus state.
• 10% accent: spot color cho CTA chính, error message, success badge. Khác hue với brand để tạo contrast — brand xanh + accent cam, brand tím + accent vàng.
• Diện tích nhỏ nhưng tạo focal point, user 80% click vào accent.

Áp dụng cho shop, dashboard và landing

• Shop e-commerce: 60% trắng + xám (background card), 30% brand (header + filter sidebar), 10% accent đỏ/cam (nút “Mua ngay”, badge sale, giá khuyến mãi).
• Dashboard SaaS: 60% trắng + xám siêu nhạt, 30% brand (sidebar + header), 10% accent (chart highlight, alert, button “Upgrade”). Dashboard có data viz nên thêm 5-7 màu chart riêng ngoài 60-30-10.
• Landing page B2B: 60% nền sáng + section background, 30% brand (hero gradient, icon, headline), 10% accent (CTA “Book demo”, đánh giá khách highlight). Landing có thể nâng accent 12-15% để CTA dày hơn.

WCAG contrast — ngưỡng 4,5:1, 7:1 và cách audit

WCAG 2.2 AA yêu cầu contrast tối thiểu cho text + UI component. Pass AA là chuẩn pháp lý tại EU và đang dần áp dụng tại Việt Nam (Bộ TT&TT khuyến cáo cho website cơ quan nhà nước).

Vi phạm AA khiến user khiếm thị nhẹ + lớn tuổi không đọc được, chiếm 8-12% tổng user tuỳ ngành. Chi tiết về accessibility rộng hơn ngoài contrast xem tại bài về accessibility thiết kế web.

Ngưỡng contrast cho text body, large và UI

• Text body (≥18px regular hoặc ≥14px bold): AA cần ≥ 4,5:1, AAA cần ≥ 7:1. Vd #6b7280 (gray-500) trên #ffffff → 4,83:1, pass AA nhưng fail AAA.
• Để pass AAA dùng #4b5563 (gray-600) → 7,59:1.
• Text large (≥24px regular hoặc ≥18px bold): AA cần ≥ 3:1, AAA cần ≥ 4,5:1. Heading lớn dễ pass hơn, có thể dùng màu nhạt hơn body text mà vẫn đạt chuẩn.
• UI component và graphic: AA cần ≥ 3:1 với background xung quanh. Border button outline phải ≥ 3:1 — không dùng border xám nhạt #e5e7eb (1,4:1) vì invisible cho user low-vision.

Tool đo contrast và quy tắc thực hành

• WebAIM Contrast Checker: paste 2 hex code → ratio. Tool đơn giản nhất, dùng audit từng cặp text/background khi designer cân nhắc 2-3 option màu.
• Stark plugin Figma: audit toàn file Figma, list mọi cặp text/background fail WCAG, suggest màu pass. Free tier đủ cho project 1-3 designer.
• Chrome DevTools Lighthouse + axe DevTools: audit live site, scan toàn page, list element fail kèm path CSS để fix. Browser extension miễn phí.
• Figma color picker 2026: show contrast ratio ngay khi chọn màu so với background, highlight đỏ nếu fail. Tích hợp sẵn không cần plugin thêm.

Quy tắc thực hành: mọi cặp text/background trong design system phải tag rõ AA hoặc AAA và document trong design token. Designer chọn màu xám nhạt cho body text vì “trông professional” mà không đo — 80% trường hợp fail AA.

Color psychology — chọn màu theo brand và ngành

Color psychology là chủ đề tranh cãi. Có nghiên cứu cho thấy red tăng cảm giác cấp thiết, blue tạo trust, green liên quan tới success.

Cũng có nghiên cứu cho thấy ảnh hưởng phụ thuộc văn hoá nhiều hơn màu cụ thể — không thể áp công thức cứng cho mọi thị trường.

Trắng là đám tang ở Đông Á nhưng đám cưới ở phương Tây. Designer Web22 áp dụng kết hợp: chọn theo brand identity + đối thủ analysis + cultural fit, không dựa “color psychology cứng” tách rời context.

Pattern phổ biến theo ngành tại Việt Nam 2026

• Fintech / banking: xanh dương (TPBank, Techcombank, MB Bank) — convention quốc tế (Chase, BoA, Citi). Đa số chọn xanh để align “trust”.
• Cách break: cam (ING), tím (Cake, Timo) — dùng được nếu brand có lý do khác biệt rõ.
• Shop e-commerce: đỏ + cam (Shopee, Tiki, Sendo) cho cảm giác cấp thiết / khuyến mãi. Lazada chọn xanh + cam khác biệt nhưng vẫn đỏ accent ở badge sale.
• F&B / nhà hàng: đỏ, cam, vàng kích thích thèm ăn theo nghiên cứu food psychology. McDonald’s, KFC, Lotteria.
• Brand healthy / organic chọn xanh lá.
• Tech / SaaS: xanh dương (Atlassian, Salesforce) hoặc tím (Slack, Stripe, Linear). Tím trở thành “tech 2020s” — modern, premium.
• Đen + trắng + accent (Vercel, Notion) cho minimalist tech.
• Healthcare: xanh dương + xanh lá + trắng. Trắng dominant cho cảm giác sạch / vô trùng.
• Tránh đỏ trừ khi cần cảm giác cấp thiết cấp cứu.
• Education / EdTech: cam, vàng (sáng / vui), hoặc xanh dương (chuyên nghiệp). Coursera vàng + xanh dương, Udemy tím.

Chiến lược chọn theo convention hay khác biệt

Quy tắc thực hành: nghiên cứu 5-8 đối thủ cùng ngành, plot palette của họ trên vòng tròn màu. Brand mới có 2 lựa chọn — đi theo convention (an toàn, dễ trust ngay) hoặc chọn màu khác biệt rõ (đầu tư brand education nhưng nhớ lâu hơn).

Cả hai đều ổn, phụ thuộc chiến lược + budget marketing. Brand startup ngân sách thấp nên theo convention để tiết kiệm brand education.

Brand có budget marketing dài hạn có thể break convention để khác biệt — đầu tư brand education ban đầu nhưng nhớ lâu hơn.

Tool xây palette 2026 — từ brand color tới 11 step

Designer Web22 dùng kết hợp tool sau cho mỗi project mới khi xây palette từ brand color. Mỗi tool có vai trò riêng — gen palette, audit contrast, simulate colorblind, export token.

Tool gen palette từ 1 brand color

• Tailwind palette generator: nhập 1 brand color, tool gen 11 step (50-950) với perceptually balanced lightness. Output JSON cho design token.
• Import vào Figma qua Tokens Studio plugin.
• Adobe Color (color.adobe.com): tạo palette từ 5 relationship (analogous, monochromatic, triad, complementary, compound). Có “Extract from image” upload ảnh brand → tự gen palette.
• Tốt cho cảm hứng giai đoạn đầu.
• Coolors (coolors.co): generator nhanh, bấm space gen 5 màu mới. Lock màu để giữ.
• Phù hợp brainstorm giai đoạn đầu. Pro plan 5 USD/tháng cho unlimited palette + image extract.

Tool pro cho design system production

• Realtime Colors (realtimecolors.com): apply palette vào template UI thật (landing page demo) để xem màu trong context. Không phải swatch khô rời rạc.
• Stark plugin Figma: ngoài audit contrast còn có “Color Generator” — nhập brand, gen 9 step pass WCAG cho text on white + dark background. Best plugin cho production design system.
• Leonardo.io (Adobe): tool advanced gen palette với contrast ratio fixed. Chọn ratio target (vd 4,5:1) và base color, tool gen step phù hợp.
• Tốt cho design system enterprise.

7 lỗi phổ biến với màu sắc trong UI

Sau audit color trên 50+ project Web22 đã review, 7 lỗi dưới đây xuất hiện thường nhất theo thứ tự ưu tiên fix. Lỗi 1-3 ảnh hưởng accessibility, lỗi 4-7 ảnh hưởng consistency và maintenance.

Lỗi 1-3 — Contrast, brand thừa, saturation cao

• Lỗi 1 — Body text contrast dưới 4,5:1: dùng gray-400 hoặc gray-500 trên trắng vì “đẹp”, fail WCAG AA. Fix tối thiểu gray-600 (#4b5563), tốt nhất gray-700 (#374151) cho body text trên nền trắng.
• Lỗi 2 — Quá nhiều brand color: brand đỏ ở header, nav, button, link, icon, border — đỏ tràn 50% screen. Fix áp 60-30-10, brand color giới hạn 30% diện tích.
• Lỗi 3 — Saturation cao đều: mọi màu đều saturate 100% → chói mắt, mệt sau 5 phút đọc. Fix chỉ accent saturate cao (10%), brand 60-80% saturation, neutral 0-10%.

Lỗi 4-7 — Dark mode, semantic, colorblind, hardcode

• Lỗi 4 — Không có dark mode plan: design palette chỉ light mode, 6 tháng sau khách yêu cầu dark mode phải redo từ đầu. Fix ngay từ đầu xây palette với 2 mode — semantic token --color-bg chứ không hardcode --color-white.
• Lỗi 5 — Color ý nghĩa không nhất quán: đỏ ở header là brand, đỏ ở form là error, đỏ ở badge là sale. User bối rối.
• Fix tách brand color (ngẫu nhiên) khỏi semantic color (error = đỏ universal), không trùng nhau.
• Lỗi 6 — Colorblind không pass: chart dùng đỏ + xanh lá phân biệt 2 dataset. 8% nam giới deuteranopia không phân biệt được.
• Fix thêm pattern + label + icon, không dựa duy nhất vào màu để communicate.
• Lỗi 7 — Hex code hardcode khắp Figma: 200 element dùng #1e40af thay vì biến color.brand.primary. Khi đổi brand phải sửa từng element.
• Fix dùng Figma variable + Tokens Studio bind mọi màu thành token.

Câu hỏi thường gặp về màu sắc trong UI design

Tài nguyên và bước tiếp theo

Color system là 1 trong 6 thành phần UI cốt lõi. Sau khi nắm palette + WCAG + 60-30-10, cần đi sâu sang các thành phần khác để hoàn thiện design system.

Các bài liên quan trong cụm UI/UX cơ bản:

• UI/UX là gì — định nghĩa, 5 layer UX và 6 thành phần UI cốt lõi — color là 1 trong 6 thành phần, đặt trong context tổng thể.
• 7 nguyên tắc thiết kế UI — checklist mỗi screen cần verify — contrast và hierarchy color liên quan trực tiếp nguyên tắc 1 và 2.
• Typography cho web 2026 — modular scale, variable font và woff2 self-host — cặp typography + color tạo readability hoàn chỉnh.
• White space trong thiết kế — spacing scale 8pt và token chuẩn — màu sắc + spacing là 2 yếu tố perceived quality lớn nhất.
• Thiết kế design system cho thương hiệu — gói trọn gói gồm palette + WCAG audit + design token + Figma variable.

Cần đội Web22 xây color system chuẩn WCAG 2.2 AA + 60-30-10 + design token cho website doanh nghiệp? Thiết kế design system cho thương hiệu — gói trọn gói gồm palette + WCAG audit + token JSON + Figma variable bàn giao editable cho khách.