Color and contrast

Contrast is a relationship, not a color.

A color is not accessible by itself. Measure the foreground against the background it actually touches—and measure it for the role it performs.

The principle

Choose the requirement first. Then test the two adjacent colors without rounding the result.

WCAG 2.2 · Level AA

Know which threshold applies.

Text and meaningful visual components have different success criteria, but the everyday minimums reduce to two ratios. A ratio ranges from 1:1 for identical luminance to 21:1 for black against white.

4.5:1

Normal text

Body copy, labels, placeholder text, helper text, and other text below the large-text threshold.

WCAG 1.4.3 Contrast (Minimum)
3:1

Large text

At least 24px regular, or approximately 18.5px bold. Thin or unusual type may need more contrast in practice.

WCAG 1.4.3 Contrast (Minimum)
3:1

Meaningful UI and graphics

Visual information needed to identify controls, states, focus indicators, icons, and parts of graphics.

WCAG 1.4.11 Non-text Contrast

Thresholds are exact. A computed ratio of 4.499:1 does not meet 4.5:1. Displayed values may be rounded for reading, but pass/fail logic must use the unrounded result.

Interactive checker

Test the pair in context.

Select what the colors are used for, enter the foreground and background, then check the exact ratio.

  • The page starts with a passing pair.
  • “Failing example” demonstrates a common muted-gray problem.
  • “Passing example” always provides a route back to sufficient contrast.
Foreground
Background
5.89:1 Passes normal text at 4.5:1

What to measure

Follow the pixels that carry meaning.

Contrast is measured between adjacent colors. Test every state and every background the element can appear over—not just the values listed next to each other in a design token file.

Controls and states

Test visual information needed to identify the component and its state.

  • Input and checkbox boundaries when those boundaries identify the control
  • Keyboard focus indicators against adjacent colors
  • Selected, error, and expanded-state indicators
  • Meaningful icons inside controls

Actual backgrounds

A foreground can pass on one surface and fail on another.

  • Text over cards, banners, gradients, and images
  • Placeholder and disabled-looking text that remains operable
  • Hover, active, visited, and focus states
  • Chart elements against the canvas and each other when adjacency conveys meaning

Contrast is not enough

Never use color as the only signal.

A red status may have excellent luminance contrast and still be ambiguous to someone who cannot distinguish the hue. Add text, an icon, a pattern, or another non-color cue.

Don’t

Color alone

The red dot requires someone to infer both status and meaning from hue.

Do
Error: payment failed

Color plus language

The text communicates the status even when the color is unavailable.

Quick test

Check the system, not one screenshot.

  1. Identify whether the foreground is normal text, large text, or meaningful non-text content.
  2. Measure it against every adjacent background used in the interface.
  3. Test interaction states: hover, focus, selected, error, and disabled only when the control remains operable.
  4. Use the unrounded ratio for the pass/fail decision.
  5. Turn the design grayscale or remove color mentally. Confirm that meaning remains available.
  6. Prefer a margin above the minimum, especially for thin fonts and text over complex backgrounds.
Common exceptions

WCAG 1.4.3 does not set a text-contrast requirement for logotypes, purely decorative or invisible text, text in inactive interface components, or incidental text inside a picture with significant other visual content. These exceptions do not automatically remove other accessibility obligations, and higher contrast is still a useful design goal.