WCAG color contrast for UI colors
Contrast is the difference in brightness between text (or an icon) and what sits behind it. Too little, and people with low vision, older screens, or bright sunlight cannot read your interface. The Web Content Accessibility Guidelines (WCAG) give clear thresholds, and many accessibility laws and procurement rules point to them.
How the ratio works
WCAG compares the relative luminance of two colours and expresses it as a ratio from 1:1 (identical colours) to 21:1 (black on white). The formula weighs green most heavily and blue least, because that is how our eyes perceive brightness. That is why yellow text on white fails even though both colours look "bright", and why two very different hues can have almost the same luminance.
The thresholds
- Normal text, level AA: at least 4.5:1 (WCAG success criterion 1.4.3).
- Large text, level AA: at least 3:1.
- Normal text, level AAA: at least 7:1 (criterion 1.4.6).
- Large text, level AAA: at least 4.5:1.
- Non-text UI, level AA: at least 3:1 for the visible parts of controls (input borders, toggles, focus indicators) and meaningful graphics such as icons and chart lines (criterion 1.4.11, added in WCAG 2.1).
AA is the level most organisations aim for. AAA is stricter and useful for reading-heavy or accessibility-first products.
What counts as "large text"
WCAG defines large text as at least 18 point, or 14 point bold. On the web that is roughly 24 CSS pixels regular, or about 18.7 CSS pixels bold. Most body text is smaller than that, so it needs 4.5:1.
What is exempt
Disabled controls, purely decorative graphics, and logos or brand names are not covered by the contrast requirements. That is not a reason to make disabled buttons unreadable, but it does mean a pale logo does not fail the check.
Checking pairs in HueSnap
HueSnap's preview table shows the contrast ratio for neighbouring swatches and for the first and last colour, with AA and AAA marks. Treat it as a quick check: if the pair you plan to use for body text and background does not reach AA, adjust it before building screens.
How to fix a failing pair
- Change lightness, not hue. Darken the text colour or lighten the background. Keeping the hue keeps the brand feel.
- Keep the brand colour for large elements. A mid-tone brand colour that fails for 16px text may pass as a 24px heading or a filled button with white bold text.
- Use a dark or near-white text colour on coloured buttons instead of a second mid-tone colour.
- Lock the colours that pass and regenerate the rest until the pairs you need work.
Contrast is not the whole story
- Do not use colour alone to convey meaning: add text or icons to error and success states.
- Check text over images and gradients at the lightest point behind the text.
- Test hover, focus and visited states too. Focus outlines need 3:1 against what is next to them.
- Very high contrast (pure black on pure white) can feel harsh for long reading. A near-black on off-white still passes AAA easily.
For the official wording, see the W3C's Understanding Contrast (Minimum) and Understanding Non-text Contrast pages.