Contrast ratio
Also: color contrast
The luminance ratio between foreground text and its background, on a scale from 1:1 to 21:1. WCAG 2.x requires 4.5:1 for normal text and 3:1 for large text (≥18pt or 14pt bold) at Level AA.
Contrast ratio measures the perceptual difference in luminance between two colours — typically text and its background. The scale runs from 1:1 (no contrast at all — white on white) to 21:1 (pure black on pure white). WCAG defines minimum ratios for text legibility.
The WCAG thresholds
WCAG 2.x success criteria 1.4.3 (Contrast Minimum, Level AA) and 1.4.6 (Contrast Enhanced, Level AAA) set these floors:
| Text type | AA | AAA |
|---|---|---|
| Normal text (< 18pt or < 14pt bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt, or ≥ 14pt bold) | 3:1 | 4.5:1 |
| Graphical objects + UI components (1.4.11) | 3:1 | — |
WCAG 2.x measures contrast using the WCAG formula (a luminance-based ratio). WCAG 3 is investigating a perceptually-uniform replacement (“APCA” — Accessible Perceptual Contrast Algorithm) which behaves differently for very dark or very light backgrounds; APCA is not yet normative.
What gets missed
Contrast is one of the few WCAG rules a tool can detect with confidence, so automated scanners catch most pure-text-on-background failures. What still slips through:
- Placeholder text in inputs. Often #999 or lighter on white — fails
AA. Designers reach for low-contrast placeholders to distinguish
placeholder from filled value, but the actual best practice is to use
a separate
<label>above the field and a higher-contrast placeholder (or no placeholder at all). - Hover and focus states. A button with adequate default contrast can fail on hover (e.g. a light grey hover state on white). Audit interactive elements in every visual state.
- Disabled controls. Disabled controls are formally exempt from AA
contrast, but greying them out only with low contrast leaves
colour-vision-impaired users no way to know the control is disabled.
Pair colour with another cue — an icon, label change, or
aria-disabledso screen readers announce it. - Text over images and gradients. Hero overlays where the same text passes over both a light area and a dark area of the background image often fail in the lighter region.
- Icons used as the only label. A 24-pixel icon with no text needs 3:1 against its background (1.4.11), and the icon’s meaningful pixels — the outline strokes — are what’s measured.
Operational testing
Three workflows reduce contrast bugs early:
- Design-time linting. Stark, Able, and Adobe XD’s accessibility checker score contrast inside the design tool. Fix it before code is written.
- Tokenised palettes. Define every text/background pairing as a token whose contrast is checked once. Disallow ad-hoc colour values on text-bearing components.
- Automated CI checks. axe-core, Pa11y, or Lighthouse fail builds on contrast violations. Cheap to add, expensive to skip.
Beyond the floor
4.5:1 is a minimum, not an aesthetic target. Users with mild colour- vision deficiency, age-related vision loss, or low-quality displays prefer 7:1 or higher for body text. A site that just barely passes AA on every element generally feels low-contrast even to users without formal impairments.