WCAG Color Contrast: Ratios, Rules and How to Fix Failing Colors

Low colour contrast is the most common accessibility failure on the web, found on the large majority of home pages in yearly audits. It is also the easiest to fix. Here is what the rules say and how to meet them without abandoning your palette.

The numbers

Contrast is a ratio from 1:1 (identical colours) to 21:1 (black on white).

• Normal text: at least 4.5:1 (AA), 7:1 for AAA.
• Large text (24px+, or 19px+ bold): at least 3:1 (AA), 4.5:1 for AAA.
• UI components and graphics: icons, input borders, focus rings and chart lines need 3:1 against what is next to them.

AA is the baseline that most accessibility laws reference. AAA is a good target for body text in products used for long periods.

Where designs usually fail

• Light grey body text on white. Very common, very fixable.
• Placeholder text in inputs.
• White text on brand colours such as yellow, light green or orange.
• Input borders at 1px light grey, which disappear for low-vision users.
• Text on images without an overlay.

How to fix a failing pair

You rarely need to change the hue. Move the lightness:

1. Keep the background.
2. Darken the text colour in small steps until it passes, keeping the same hue and saturation.
3. If the text colour is fixed by brand, lighten or darken the background instead.

The free Contrast Checker does exactly this: enter two colours and it shows the nearest shade of each that passes AA, keeping the hue. One click applies it.

Building contrast in from the start

• Generate a full 50 to 900 scale of each brand colour, then pick text and background steps that pass. The Color Match Finder builds the scale for you.
• Write the passing pairs into your design system tokens so nobody has to check again.
• Test with real content in dark mode too.

For choosing a palette that starts accessible, see how to choose a color palette for UI.