How do I check and fix color contrast on my site?

The short version

• Normal text: at least 4.5:1 against its background (Level AA).
• Large text: at least 3:1. The W3C defines large as 18 point, or 14 point bold.
• Buttons, form borders, icons and focus outlines: at least 3:1 against what’s beside them.
• Measure with a free contrast checker using your exact color codes.
• Don’t use color alone. Pair it with words, an icon or an underline.

How do I check contrast?

You need the two colors as codes, such as #767676, and a contrast checker. Most free checkers work the same way.

1. Find the colors. Ask your designer for the brand palette, or use the browser’s developer tools: right-click the text, choose Inspect, and look for color and background-color. Many checkers also have an eyedropper.
2. Enter the text color and background color into the checker.
3. Read the ratio. It runs from 1:1 (no contrast) to 21:1 (black on white).
4. Compare it with the thresholds below.
5. Repeat for every pair that matters: body text, links, buttons, text on photos, form borders, placeholder text and the focus outline.

The W3C’s Easy Checks cover contrast as one of their first-review steps. Automated scanners also flag low text contrast. See our guide to free accessibility checkers. Scanners can’t measure text on top of photos, though, so check those by hand.

Which ratios apply where?

These come from the W3C’s pages on text contrast and non-text contrast. The W3C treats the ratios as strict lines: 2.999:1 doesn’t pass 3:1.

Diagram: example color pairs with their contrast ratios, calculated with the WCAG formula. Example colors only.

A few details from the W3C

• Button borders. A button needs a 3:1 edge only if nothing else shows it’s a button. A text label with good contrast can be enough.
• Logos. Exempt when brand guidelines set the colors. That exception doesn’t cover the rest of your design.
• Disabled controls. Exempt, because they can’t be used.
• Hover effects. A hover color change doesn’t need to meet 3:1. The normal state does.

How do I fix colors that fail?

1. Darken the text, not the background, on light pages. Swapping a pale gray for a darker gray usually fixes a whole site in one style change.
2. Keep the brand color, change its job. A pale brand color can stay as a background stripe or large heading and stop being used for small text or button labels.
3. Fix buttons. If white text on your button color fails, darken the button or use dark text on it. Check both the normal and hover states.
4. Add an overlay behind text on photos, such as a dark band behind white text, so contrast doesn’t depend on the photo.
5. Make the focus outline visible. A thick outline in a color that meets 3:1 against both the element and the background works on most designs.
6. Retest every pair you changed.

Ask your designer to add a “contrast-safe” version of each brand color to the palette, so new pages don’t bring the problem back.

Why not use color alone?

The W3C’s use of color rule (Level A) says color can’t be the only way to show information or ask for an action. Common failures:

• “Required fields are marked in red” with no asterisk or word.
• Links in body text that differ from normal text only by color. Underline them.
• A chart where the lines differ only by color. Add labels or patterns.
• Error states shown only as a red border. Add a text message.

DOJ’s web guidance lists both poor contrast and using color alone among the most common barriers on business sites.

Why does contrast matter?

Low contrast affects people with low vision and color vision differences. It also affects anyone reading a phone outdoors, on a cheap screen, or with tired eyes. Pale gray text is a design fashion that costs real readers. Fixing it is one of the cheapest accessibility wins there is.

What are the common mistakes and edge cases?

• Light gray placeholder text in form fields, used as the only label.
• White text on a bright brand color like orange, yellow or light green. These often fail.
• Checking only the desktop design. Phone layouts sometimes put text over images that the desktop keeps separate.
• Forgetting states: hover, focus, visited and error colors all need checking.
• Thin fonts. A ratio that passes can still be hard to read in a very light font weight. The ratio is the minimum, not the goal.
• Dark mode. If your site has one, check it too.

What if this didn’t work?

• The checker shows a pass but the text is still hard to read. Font weight and size matter. Make the text larger or heavier.
• You can’t find where the color is set. It may be in the theme, the page builder or a plugin. That’s a developer job.
• The brand owner won’t change the colors. Use the brand color for large elements and backgrounds, and a darker partner color for text. Our guide on building accessibility into a new website covers setting a palette that works.

How much does it cost, and how long does it take?

Checkers are free. Measuring your main colors takes about 15 minutes. Fixing a theme’s colors is often a short job for a developer, because colors are usually set in one place. Text baked into images takes longer, since each image must be redone.

How does E-3 handle this?

Color fixes are usually theme changes, so one fix can cover the whole site. On the sites we look after, they’re part of website care. Larger palette changes during a redesign are tested on a staging copy first.

Related questions

• Which WCAG level should I aim for?
• How do I test my site with a keyboard and a screen reader?
• How do I build accessibility into a new website?
• What WCAG 2.2 changed for small-business websites
• Back to the complete website accessibility guide

Sources

1. Understanding SC 1.4.3: Contrast (minimum) (W3C WAI)
2. Understanding SC 1.4.11: Non-text contrast (W3C WAI)
3. Understanding SC 1.4.1: Use of color (W3C WAI)
4. Guidance on web accessibility and the ADA (U.S. Department of Justice, March 18, 2022)
5. Easy Checks: contrast ratio (W3C WAI)