VOCABULARY / ENTRY
Contrast and Legibility
contrast-legibility
Body text must reach a specified minimum contrast against its background, and interface control boundaries and state indicators must reach a separate, lower minimum contrast; this is a measurable pass/fail check, not the name of a visual style.
Recognizing it
- Body text reaches the specified minimum contrast against every background it can actually appear over, including translucent and image backgrounds
- Control boundaries, checkboxes, radio buttons, and other state indicators reach the minimum non-text contrast against adjacent colors
- Contrast is measured from the actual rendered result, not from an isolated color swatch on a design file
Concept boundary
Figure-ground describes the perceptual mechanism by which the eye separates a foreground from its background. This entry is the quantified check for whether that separation is "clear enough" — using a contrast-ratio number to decide whether text and controls can actually be read. The two address different questions and can apply at the same time. Low contrast is not shorthand for any one visual style: glassmorphism, minimalism, flat design, maximalism, and Memphis can all produce low contrast when implemented carelessly, and the fix is to bring that style's text and controls up to the measured threshold, not to abandon the style.
When to consider it
- Designing or reviewing body text, captions, labels, or other text meant to be read
- Designing or reviewing form controls, button boundaries, checked states, or other elements that need to be identified
- Text or controls sit over a translucent layer, gradient, or image background
When to be cautious
- Treating "this looks like a popular visual style" as proof that contrast already passes
- Measuring contrast once on a clean mockup and assuming every real rendering condition passes
- Applying the same mandatory threshold to purely decorative graphics that are not needed to understand the content
Tradeoff
Raising contrast keeps text and controls legible across more lighting conditions and visual abilities, but pushing contrast too high or thickening every border indiscriminately can flatten visual hierarchy so everything looks equally important.
Conditional rules · Editorial advice
Related entries
Figure-ground describes the perceptual mechanism that separates foreground from background; this entry is the quantified check for whether that separation clears a measurable threshold. They are complementary but measure different things.
Glassmorphism relies on translucency and background show-through for its texture, but if the resulting composited contrast falls below the specified threshold, that is a defect under this entry — fix it by adjusting opacity, deepening the overlay, or changing the color, not by abandoning the style.
Minimalism often reduces visual noise by removing elements, but if that pushes body text or control-boundary contrast below the specified minimum, that is a measurable defect; adjust color while keeping the minimal look, rather than treating the style itself as the fix.
A focus indicator must first clear the non-text contrast minimum to be visible at all; this entry supplies that threshold, while the focus-indicator entry covers the specific rules for its visibility and discoverability.
Sources and what they support
WCAG 2.2 Success Criterion 1.4.3 (Level AA) requires a contrast ratio of at least 4.5:1 for body text against its background, and at least 3:1 for large-scale text (18 point, or 14 point bold and larger).
Retrieved: 2026-09-15 · Archived 2026-09-16WCAG 2.2 Success Criterion 1.4.11 (Level AA) requires a contrast ratio of at least 3:1 for visual information used to identify user interface components and their states, and for the parts of graphical objects required to understand the content.
Retrieved: 2026-09-15WCAG 2.2 Success Criterion 1.4.12 (Level AA) requires that content not lose functionality or be clipped when a user sets line height to at least 1.5 times the font size, paragraph spacing to 2 times the font size, letter spacing to 0.12 times the font size, and word spacing to 0.16 times the font size.
Retrieved: 2026-09-15Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.
Type extensions and implementation notes
No operable specimen exists yet; the illustration is editorial, meant to convey that contrast is a measurable, quantified check, and does not represent a verified implementation. Before shipping in a real product, contrast still needs to be measured with actual color values and rendering conditions, covering light and dark themes, hover states, and disabled states.
{
"evidenceType": "A measurable success criterion from a W3C accessibility standard",
"limit": "This entry covers only the WCAG 2.2 Level AA contrast and text-spacing values listed here; the higher Level AAA thresholds and finer-grained legibility concerns such as color-blindness simulation are out of scope and need separate evaluation."
}Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.