Colour Theory — News

Colour in
Web Design

Recent observations, applied research, and practical notes on how colour decisions shape the way people experience interfaces.

3 Topics this edition

6 Years of publishing

WCAG AAA standard throughout

Latest
Observations

Three angles on colour decision-making — from accessibility to system architecture to perceptual psychology.

Contrast ratio testing diagram showing WCAG compliance thresholds across surface types

Accessibility

Contrast Ratios Under the Microscope

A 4.5:1 ratio passes WCAG AA, but on high-brightness OLED screens it often reads as insufficient. Researchers at several accessibility labs have started documenting screen-specific contrast thresholds that diverge from the existing standard — particularly for body text below 16px.

The practical takeaway is straightforward: test on at least two different display types before finalising a palette, not just against a contrast checker tool.

Dark Mode

Hue Shifts in Dark Mode Palettes

Direct inversion — flipping lightness while keeping hue and saturation intact — produces palettes that feel cold and hard. Designers working on Figma's own design system documented how shifting hue by 4–8 degrees toward warmer territory produces interfaces that feel intentional rather than procedurally generated.

Semantic colour token diagram illustrating role-based colour assignments in a design system

Systems

Semantic Colour in Component Libraries

Teams that name tokens by role — surface-primary, text-muted, state-error — instead of by value avoid the maintenance problems that come with rebrand cycles. One engineering team at a mid-size SaaS company described cutting their theming migration time from three weeks to four hours after switching to a role-based token system.

Ongoing threads

Questions the field
keeps returning to

Colour is never just aesthetic — every decision carries a consequence for someone reading on a device you haven't tested.

Colour theory in web design rarely settles into clean answers. The questions below keep surfacing in forums, design reviews, and accessibility audits — not because practitioners are careless, but because the variables are genuinely complex.

Each thread here connects to practical decisions: which tools to trust, where standards fall short, and what real implementations reveal about the gap between theory and screen.

When does saturation hurt more than help?

High saturation draws attention but fatigues users on prolonged reading sessions. Determining the threshold for a given context requires testing, not a formula.

Perception

Colour blindness and brand colour conflicts

About 8% of men with northern European ancestry have some form of red-green colour vision deficiency. Many brand palettes are built without simulating how those users see the interface at all.

Inclusion

Are design tokens solving the right problem?

Tokens centralise colour values effectively, but they don't enforce usage rules. Teams can still apply a token in a contextually wrong way — the naming convention is only as good as the documentation behind it.

Architecture

P3 wide gamut colours in browser rendering

Display P3 support has expanded across Safari and Chrome, but fallback strategies for sRGB displays remain inconsistent. The gap produces colour shifts that no designer intended.

Rendering

Colour in Web Design

Latest Observations