UX Encyclopedia

Color in Interface Design

Functional roles first

A minimal palette mapped to jobs: one brand accent, a five-step neutral ramp for surface hierarchy, four semantic status colors, and a 60-30-10 proportion bar showing dominant neutral, secondary, and accent shares. brand accent identity · buttons · links #4F46E5 neutrals surface hierarchy · text semantic status pair with icon + label success warning error info 60 · 30 · 10 — a proportion convention 60% neutral 30% secondary 10% accent
Color jobs — 1 accent + 5 neutrals + 4 semantics covers most products. The 60-30-10 split is a convention, not science, but it operationalizes Von Restorff: accents only work when they are scarce.

Assign color jobs before picking hues: (1) brand/identity accent, (2) interactive affordance (links, buttons), (3) semantic status (success/warning/error/info), (4) neutrals for surface hierarchy. A workable minimal palette: 1 accent + 4–6 neutrals + 4 semantic colors, each with accessible variants for text-on-color and both light/dark themes.

Try it — live contrast checker. Pick a text and background color; the ratio and WCAG verdicts update as you change them.

Rules with evidence or standards behind them

Left: three status dots in green, amber, and red collapse into nearly identical olive under simulated deuteranopia. Right: the same statuses with an icon and a text label stay readable for everyone. color alone as designed deuteranopia which one is the error? color + icon + label Success Warning Error readable by everyone WCAG 1.4.1 — never color as the only cue
Never color alone — under deuteranopia (simulated here) all three dots collapse into the same olive. An icon and a label cost nothing and read for everyone (WCAG SC 1.4.1).
  • Contrast: text 4.5:1 (AA, SC 1.4.3), UI components & graphical objects 3:1 (WCAG 2.2 SC 1.4.11). Check both themes.
  • Never color alone (WCAG SC 1.4.1): pair color with an icon, label, or pattern. ~8% of men and ~0.4% of women of Northern European descent have congenital color-vision deficiency, most commonly red–green; prevalence is somewhat lower in other populations (Birch 2012).
  • The 60-30-10 rule (interior-design heuristic adopted by UI): dominant neutral ~60%, secondary ~30%, accent ~10%. A convention, not science — but it operationalizes Von Restorff: accents only work when scarce.
  • Semantic conventions: red=error/destructive, green=success, yellow/amber=warning, blue=information/links. These are learned Western conventions reinforced by every major design system; violating them costs comprehension. Cultural meanings of color vary (e.g., red is auspicious in China; white associates with mourning in parts of East Asia) — verify for the target market.
  • Blue for links persists because it's the deepest-rooted web convention (Jakob's Law), not because blue is special.

APCA — draft contrast method (label everything here as DRAFT)

APCA (Accessible Perceptual Contrast Algorithm) is the candidate contrast method explored for WCAG 3. As of mid-2026, WCAG 3 is still a W3C Working Draft, the contrast method is explicitly "to be determined," and APCA is exploratory — WCAG 2.x ratios remain the legal/compliance standard. Why designers still use it as a design-time tool:

  • It models perceived contrast: polarity-aware (dark mode scored correctly, where WCAG 2 ratios overstate contrast of dark pairs) and font size/weight aware (thin/small text needs more Lc).
  • Reported as Lc (lightness contrast) 0–~106. Draft guideline levels: Lc 90 preferred for body text, Lc 75 body minimum, Lc 60 large/other content text, Lc 45 large headlines, Lc 30 absolute floor for any text, Lc 15 for non-text elements.
  • Sane workflow: design with APCA for perceptual quality, then verify the shipped palette also passes WCAG 2.x AA for conformance.

Color spaces worth knowing (web/design tooling)

  • sRGB is the baseline; Display-P3 is the ~25%-wider gamut of most modern screens — CSS color(display-p3 …) unlocks more vivid accents; always give sRGB fallbacks and don't encode meaning in P3-only vividness.
  • OKLCH (CSS Color 4 oklch(), supported in all major browsers since 2023): perceptually uniform — equal L = roughly equal perceived lightness across hues, and changing lightness doesn't shift hue. HSL has neither property (HSL "50%" yellow and blue differ wildly in real lightness).
  • Design implication: build tonal ramps and dark-mode variants in OKLCH (step L evenly, hold C and H), so contrast behaves predictably across the whole palette; let tooling gamut-map to sRGB.

Dark mode

Don't: a pure black panel with full-white text and the fully saturated light-mode accent — harsh glare and a vibrating button. Don't — invert the light theme #000 + 100% #FFF + full accent glare · no elevation · vibration
Don't — pure #000 behind 100% white glares, shadows have nothing darker to cast, and the saturated light-mode accent vibrates.
Do: an elevated dark-gray card on a near-black surface, primary text at 87 percent white, and a lightened, desaturated accent. Do — elevated dark surfaces #121212 · #1E1E1E card · 87% white accent lightened + desaturated
Do — dark grays near #121212 let elevation show, primary text drops to ~87% white, and the accent is lightened and desaturated. Test contrast separately per theme.
  • Don't invert: use elevated dark-gray surfaces, not pure black panels with pure white text (Material's classic dark-theme guidance: surfaces near #121212 and ~87%-opacity white for primary text; Material 3 derives dark surfaces from neutral tonal ramps; Apple provides semantic colors that adapt automatically).
  • Desaturate accents slightly on dark backgrounds to avoid vibration; test contrast separately — colors that pass on white often fail on dark.
  • Respect the OS setting (prefers-color-scheme); offer a manual override.

Building a palette

A tonal ramp: one indigo hue rendered as eleven evenly stepped tones from 0 (black) to 100 (white), with brackets mapping tone bands to roles — on-container text, containers, primaries, and on-primary. one hue, eleven tones L stepped evenly · hue and chroma held 01020 304050 607080 90100 container (dark) · primary (light) on-primary (light) on-container (light) primary (dark) · container (light)
Tonal ramps — generate 8–12 tones per hue (Material 3's tonal-palette model), then let components pick tones by role: light and dark themes just select different tones from the same ramp. Name the tokens by role, not hue — that is what makes theming possible.
  1. Pick the accent from brand; verify a text-safe variant (≥4.5:1 on both themes). 2. Derive neutrals with a hint of the accent hue for cohesion.
  2. Generate 8–12 step tonal ramps per color (Material 3's tonal-palette approach) so components can pick tones by role. 4. Name tokens by role (surface, on-surface, primary, on-primary), not by hue — this is the Material/Fluent token model and is what makes theming possible.

Testing for color-vision deficiency

  • Simulate at minimum deuteranopia and protanopia (the common red–green forms); also check pure grayscale — if hierarchy survives grayscale, it survives almost anything.
  • Real tools: Chrome/Edge DevTools → Rendering → "Emulate vision deficiencies"; Sim Daltonism (macOS/iOS); Color Oracle (cross-platform); Photoshop/Illustrator proof setup; Figma CVD-simulation plugins.
  • Classic failure pairs to avoid as sole distinction: red/green, green/brown, blue/purple, light green/yellow.

Sources

  • W3C WCAG 2.2 — SC 1.4.1, 1.4.3, 1.4.11 (w3.org/TR/WCAG22).
  • W3C WCAG 3.0 Working Draft (w3.org/TR/wcag-3.0) — status of contrast method; APCA documentation, Somers/Inclusive Reading Technologies (apcacontrast.com). Draft — not a conformance standard.
  • CSS Color Module Level 4 (w3.org/TR/css-color-4) — oklch(), color(display-p3). Ottosson, B. (2020). "A perceptual color space for image processing" (bottosson.github.io) — Oklab/OKLCH.
  • Material Design 3 — Color system & dynamic color (m3.material.io).
  • Apple HIG — Color; Dark Mode (developer.apple.com/design).
  • Birch, J. (2012). "Worldwide prevalence of red-green color deficiency." JOSA A, 29(3), 313–320.
  • Itten, J. The Art of Color (1961) — classic color theory (contrast types).
↑↓ to navigate · Enter to open · Esc to close