How to fix low contrast text on your website (without ruining your brand)

Low contrast text is one of the most common accessibility failures on Australian websites, and one of the easiest to fix. This guide explains what the numbers mean, where low contrast hides, and how to fix it step by step without throwing out your brand.

Why it’s so common

Light grey text, pale buttons and text over photos look stylish on a designer’s high-quality screen. On a phone in the sun, an older laptop or for someone with low vision, the same text can be hard or impossible to read. Around one in twelve men also has some form of colour vision deficiency, which makes some colour combinations even harder to tell apart.

What the numbers mean

WCAG measures contrast as a ratio between the text colour and its background. It runs from 1:1 (the same colour, so invisible) to 21:1 (black on white). To meet WCAG 2.2 Level AA:

• Normal text needs a contrast ratio of at least 4.5:1 (success criterion 1.4.3).
• Large text needs at least 3:1. Large means at least 18 point (about 24 pixels), or 14 point bold (about 19 pixels bold).
• Buttons, form field borders, icons and focus outlines need at least 3:1 against what’s next to them (success criterion 1.4.11).

Level AAA is stricter, at 7:1 for normal text. Logos and text in disabled buttons don’t have to meet these ratios.

You don’t need to calculate this by hand. Our free colour contrast checker gives you the ratio for any two colours.

What the error messages mean

If you’ve run a scanner and found this article, you’ve probably seen one of these:

• Google Lighthouse: “Background and foreground colors do not have a sufficient contrast ratio”
• axe DevTools: “Elements must meet minimum color contrast ratio thresholds”
• WAVE: “Very low contrast”

They all mean the same thing: some text on the page is below 4.5:1 (or 3:1 for large text). The tool will usually tell you which element, the current ratio and the colours involved.

Where low contrast hides

• body text set in a “muted” or “secondary” grey
• placeholder text inside form fields, which is often pale by default
• text over photos, videos or gradients, where the background changes
• white text on bright brand colours such as orange, yellow, teal or light green
• links that are only slightly darker than the text around them
• hover and focus states, where colours change when you move the mouse or tab to them
• footers, cookie banners and small print
• text inside images, such as banners and social media tiles

How to fix it, step by step

1. Find the problems. Run a free scanner such as WAVE or axe on your key pages, then look at hover states, menus and text over images yourself.
2. List your colour pairs. Write down every text colour and the background it sits on. Most sites only have 10 to 15 combinations.
3. Check each pair. Put each pair into the contrast checker and note which fail.
4. Adjust the colour, not the design. Usually you only need to darken the text, or darken or lighten the background, a few steps. Change the colour in one place, such as your theme settings or style sheet, so it updates across the whole site.
5. Fix text over images. Add a solid or semi-transparent dark panel behind the text, or move the text off the image.
6. Check states and small text. Retest hover, focus, visited links, error messages and placeholder text.
7. Retest on a real device. Look at the page on a phone outside or with the brightness turned down.

Before and after examples

These are real colour pairs and their contrast ratios on a white background unless stated:

• Light grey body text: #999999 on white is 2.85:1, which fails. #767676 is 4.54:1 and passes, and #595959 is 7:1 and passes AAA.
• Placeholder text: #A9A9A9 is 2.35:1, which fails. #6B6B6B is 5.33:1 and passes.
• Light blue links: #4DA3FF is 2.63:1, which fails. A deeper blue such as #1651B5 is 7.30:1 and passes.
• Grey text on a light grey panel: #777777 on #F2F2F2 is 4.00:1, which fails. #5E5E5E on the same panel is 5.79:1 and passes.

How to fix contrast without ruining your brand

This is a common worry. You don’t need a new brand. A few practical approaches keep your look and pass WCAG:

• Keep the brand colour, change what sits on it. White text on bright orange (#FF7A00) is only 2.61:1. Dark text on the same orange is 6.66:1. The orange stays exactly the same.
• Create a darker “text-safe” shade. Keep your bright orange for backgrounds, shapes and illustrations, and add a deeper shade such as #B85000 for buttons with white text (5.02:1). Most visitors won’t notice the difference, but they will be able to read it.
• Use bright colours for decoration, not text. A light teal (#2EC4B6) with white text is only 2.17:1. Use the teal for borders, icons and highlights, and pair it with navy text (7.44:1) when text has to sit on it, or use a deeper teal such as #13796F for white text (5.26:1).
• Use large, bold text where the colour is borderline. Large text only needs 3:1, so a headline can sometimes use a colour that body text can’t.
• Build an accessible palette once. Document which pairs pass for body text, large text and buttons, and share it with your designers and content team so new pages stay accessible.

Your logo is exempt from contrast rules, so you don’t need to change it.

What automated scanners get wrong

Scanners are good at contrast, because it can be measured. But they can only measure real text against a solid background. They miss:

• text inside images, such as banners and infographics
• text over photos, videos and gradients, where the background colour varies
• hover, focus and active states that only appear when someone interacts with the page
• menus, pop-ups and content that loads later
• focus outlines and form borders that are too faint

Our article on free accessibility testing tools explains what else scanners miss.

Found contrast problems on your site?

An accessibility audit checks contrast along with everything else, including the places scanners can’t reach, and tells you exactly which colours to change. Contact us for a fixed quote, or ask for a free homepage check.