This WCAG success criteria applies to every website as it’s based on using coloured text on coloured backgrounds.
In this WCAG Fix It guide, we’re breaking down one of the most common accessibility failures: insufficient colour contrast between text and its background.
It sounds technical. It involves ratios and numbers. But in reality, it’s about something simple: can people actually read your content?
Fixing it is often one of the fastest ways to improve usability across your entire website.
What Is WCAG 1.4.3?
WCAG 1.4.3 – Contrast (Minimum) requires that text has sufficient contrast against its background so it can be read by people with visual impairments.
For Level AA compliance, the required contrast ratios are:
- 4.5:1 for normal text
- 3:1 for large text (18pt+ regular or 14pt+ bold)
If your colour combination falls below these ratios, it fails.
What Is Colour Contrast?
Colour contrast measures the difference in brightness between text and its background.
For example:
- Dark grey text on a white background → usually compliant
- Light grey text on a white background → often fails
- White text on a bright yellow button → frequently fails
Designers often choose colours based on branding or aesthetics.
Accessibility asks a different question:
“Can someone with low vision, colour blindness, or reduced contrast sensitivity actually read this?”
The Human Impact of Poor Contrast
Imagine visiting a website with light grey text on a pale background.
At first glance, it looks modern and minimal. But if you have:
- Low vision
- Age-related sight changes
- Colour blindness
- Screen glare from sunlight
That text becomes difficult or impossible to read and you may:
- Miss important instructions
- Struggle to complete a form
- Abandon the page entirely
Poor contrast doesn’t just affect “a few users.” It affects millions of people, including older adults and when content can’t be read, the experience breaks down.
Common WCAG 1.4.3 Failures
Here’s what we typically see when scanning websites:
- Light grey body text on white backgrounds
- White text on brand-coloured buttons with low contrast
- Placeholder text in forms that’s too faint
- Links distinguished only by colour
- Text over background images without overlays
All of these can fail WCAG 1.4.3.
How to Fix Colour Contrast Issues
Identify Low Contrast Text
Run your site text and background colours through a colour checker. The Recite Me Colour Contrast Checker will flag WCAG 1.4.3 – Contrast (Minimum)
You’ll see:
- The affected text
- The contrast ratio
- What the required ratio should be
Adjust Text or Background Colours
You can fix contrast by:
- Darkening the text colour
- Lightening the background
- Adding a darker overlay on images
- Increasing font weight
- Increasing text size (where appropriate)
For example:
If your text colour is:
color: #B3B3B3;
You might adjust it to:
color: #595959;
That small change can move you from failing to compliant.
If You’re Using a CMS
No coding required.
In platforms like WordPress, Shopify, Wix, or Squarespace:
- Edit the text block
- Adjust text colour settings
- Update button styles
- Save and retest
If your brand palette is the issue, update your global style settings rather than individual blocks.
How to Check Contrast Ratios
Use:
- A contrast checker tool
- Your accessibility scanning tool
- Browser developer tools
- Design software accessibility previews
Remember:
- 4.5:1 minimum for normal text
- 3:1 for large text
Don’t rely on visual judgement alone. Always test.
What About Large Text?
Large text has a slightly lower threshold because it’s easier to read at bigger sizes.
Large text is defined as:
- 18pt (24px) regular
- 14pt (18.66px) bold
For this, the minimum ratio is 3:1.
But just because something technically passes doesn’t mean it’s comfortable to read. Aim for stronger contrast where possible.
Contrast (Enhanced) – WCAG 1.4.6 (AAA)
WCAG 1.4.6 increases the contrast requirements for Level AAA compliance.
The required ratios are:
- 7:1 for normal text
- 4.5:1 for large text
This is a much stricter standard and is not required under most laws (which reference Level AA).
However, AAA contrast provides:
- Better readability
- Improved usability for older users
- Greater resilience across devices
- Stronger inclusive design standards
If you serve the public sector, healthcare, or ageing populations, aiming beyond AA can significantly improve accessibility.
Why WCAG 1.4.3 Matters Beyond Compliance
Improving contrast:
- Makes your content readable
- Improves user engagement
- Reduces bounce rates
- Supports older users
- Strengthens brand credibility
- Reduces legal risk
It’s not about design compromise It’s about designing in a way that your brand standard and works for everyone. Small colour adjustments have a massive usability impact and basically makes your content pop and stand out better.
WCAG 1.4.3 Quick Fix Checklist
All body text meets 4.5:1 contrast ratio
Large text meets 3:1 minimum
Buttons and links meet contrast requirements
Placeholder text is readable
Text over images uses overlays
Contrast re-tested after changes
WCAG 1.4.3 Contrast Frequently Asked Questions
What is WCAG 1.4.3 Contrast (Minimum)?
WCAG 1.4.3 requires that text has sufficient contrast against its background so it can be read by users with low vision. Level AA requires a minimum ratio of 4.5:1 for normal text.
What contrast ratio is required for accessibility?
For Level AA compliance, text must meet 4.5:1 contrast. Large text must meet 3:1. Level AAA requires 7:1 for normal text.
Does WCAG apply to buttons and links?
Yes. Buttons, links, and interactive text must meet contrast requirements, including text inside buttons.
Is high contrast bad for branding?
No. Accessible colour choices can still align with your brand. Strong contrast improves readability, trust, and overall user experience.