C·All Concepts
09
C

Contrast

Difference made meaningful.

1 min read·Community

Contrast is the engine of visual communication. Without difference, there is no emphasis, no hierarchy, no legibility. Contrast is how design communicates priority — and how it ensures that communication reaches everyone.

The Thought

Contrast operates across multiple dimensions simultaneously. There is tonal contrast (dark against light), size contrast (large against small), weight contrast (bold against regular), colour contrast (saturated against muted), and textural contrast (dense against open). In any given design, several of these are working at once, and the skill is in orchestrating them so they reinforce rather than undermine each other.

The WCAG 2.1 contrast ratio requirements — 4.5:1 for normal text, 3:1 for large text and UI components — are not arbitrary numbers. They encode decades of research into the threshold at which most people with low vision can reliably distinguish text from its background. These ratios are the minimum, not the target. High-contrast text is not just accessible; it is easier for everyone to read.

The most common contrast error in design is not between text and background but between elements of similar importance. When a primary button and a secondary button have too similar visual weight, the user has to work harder to understand the hierarchy. Contrast, applied to the full interface, is information architecture — it tells the user what matters, in what order.

Key Principles
  1. 01

    If everything is bold, nothing is bold — contrast requires a baseline.

  2. 02

    Meet WCAG contrast ratios as a floor, not a ceiling.

  3. 03

    Contrast communicates hierarchy; similar elements communicate equivalence.

  4. 04

    Test contrast in conditions of glare, low brightness, and colour blindness simulation.

  5. 05

    Contrast that works in Figma does not always work in the browser — verify in production.

Related