WCAG Color Contrast

Contrast is not a taste preference. WCAG 2 defines minimum contrast so text and meaningful UI components can be read by more people, including in bright rooms and with low vision. The common product failure is light gray body text on a white card that looked subtle in Figma.

Know the thresholds you are designing to

For WCAG 2 Level AA, normal text generally needs a contrast ratio of at least 4.5 to 1 against its background. Large text can meet 3 to 1. Non-text UI components that convey meaning, such as a selected tab or an input border that is the only cue, have their own 3 to 1 expectation in WCAG 2.1. Confirm the exact criterion you claim. Do not invent a house ratio and call it WCAG.

Text on images and overlapping surfaces

Scrims exist because photography behind type usually fails. If you cannot guarantee the photo, do not put small text on it. Overlays, chips, and toasts need their own checked pairs, not inherited brand colors that were picked on a dark marketing hero.

States need contrast too

Placeholder, disabled, and visited states are where palettes quietly fail. Disabled controls can be a lower emphasis, but if a control is still usable it cannot vanish. Focus indicators must be visible against both the component and the page.

Tools help, they do not decide

WebAIM's contrast checker and similar tools are useful. They do not know whether a 12px caption is large text. Measure the actual computed size and weight.

Practice this on UI Coach

Pair a UI challenge with color palettes from Inspiration and then check the text pairs. Accessibility resources exist specifically for this. Color that only works in a dark-mode shot is not a system.

Sources

• W3C understanding document for contrast minimum
• WebAIM contrast checker