WCAG Fix It Guide: 1.4.3 Colour Contrast

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

Here are some basic checks and fixes you can implement to achieve accessible colour contrast:

Identify Low Contrast Text

Run your site text and background colours through our Colour Contrast Checker to flag WCAG 1.4.3 errors.

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

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

To check colour contrast ratios and compliance with WCAG 1.4.3, you can 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 doesn’t just benefit the accessibility of your site. Other advantages include:

• 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

If your goal is to make your website compliant with WCAG 1.4.3 standards, following this simple checklist is a good start:

• 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 FAQs

Looking for a quick recap? Here are answers to some of the most frequently asked questions on this topic: