WCAG Colour Contrast Checker

Colour Contrast Checker

Enter the colours first, press Inspect, then modify colours and record the before/after palette.

Step 1: Enter Colours

Press Inspect to check the original colours.

Recorded Colour Palette

Saved in this browser only. Each row records original colours and modified colours.

Mode State Original Background Original Text Original Ratio Modified Background Modified Text Modified Ratio Modified AA Modified AAA
No recorded colours yet.

WCAG guide: Normal text should be at least 4.5:1. Large text should be at least 3:1. AAA normal text should be at least 7:1.

WCAG Colour Contrast Checker

Use our free WCAG Colour Contrast Checker to test text, link, button and hover state colour combinations against current accessibility standards. Instantly calculate contrast ratios, identify WCAG AA and AAA compliance issues, and find accessible colour combinations for websites, apps and user interfaces.

Whether you are a web designer, developer, SEO specialist, accessibility consultant or business owner, ensuring sufficient colour contrast is an essential part of creating accessible digital experiences.

What Is A WCAG Colour Contrast Checker?

A WCAG Colour Contrast Checker is a tool that measures the contrast ratio between foreground and background colours.

The checker compares text colours, button colours and hover states against the Web Content Accessibility Guidelines (WCAG) to determine whether users with visual impairments can easily read and interact with your content.

Colour contrast is one of the most common accessibility issues found on websites and can impact:

  • Users with low vision
  • Users with colour blindness
  • Users viewing screens outdoors
  • Mobile users
  • Older users with reduced contrast sensitivity

Our WCAG Colour Contrast Checker helps identify these issues before they affect your users.

What Is WCAG?

WCAG stands for Web Content Accessibility Guidelines.

WCAG is the internationally recognised accessibility standard developed by the World Wide Web Consortium (W3C) and is used worldwide to improve website accessibility. WCAG defines a series of testable accessibility requirements that help make websites usable for people with disabilities.

Most organisations aim to achieve WCAG AA compliance, while some sectors such as government, education and public services may target higher levels of accessibility.

WCAG Colour Contrast Requirements

WCAG defines minimum contrast ratios between text and background colours.

WCAG AA Requirements

  • Normal text: 4.5:1 minimum contrast ratio
  • Large text: 3:1 minimum contrast ratio

Large text is defined as:

  • 18pt (24px) or larger
  • 14pt (18.66px) bold or larger

WCAG AAA Requirements

  • Normal text: 7:1 minimum contrast ratio
  • Large text: 4.5:1 minimum contrast ratio

These ratios help ensure text remains readable for users with reduced vision and contrast sensitivity.

Why Is Colour Contrast Important?

Poor colour contrast can make content difficult or impossible to read.

Common examples include:

  • Light grey text on white backgrounds
  • Pale blue links on white pages
  • Low contrast buttons
  • Hover states that reduce visibility
  • Text placed over images

Good colour contrast improves:

  • Accessibility
  • User experience
  • Mobile usability
  • Website readability
  • Conversion rates
  • SEO performance

Search engines increasingly reward websites that provide strong user experiences and accessibility standards.

Check Text Colours

Our WCAG Colour Contrast Checker allows you to compare:

  • Text colour vs background colour
  • Link colour vs background colour
  • Heading colour vs background colour
  • Hover text colour vs background colour

The tool instantly calculates the contrast ratio and displays whether the combination passes or fails WCAG AA and AAA requirements.

Check Button Accessibility

Buttons are one of the most important interactive elements on a website.

The Button Colour Check mode allows you to test:

Default Button State

  • Button background colour
  • Button text colour

Hover Button State

  • Hover background colour
  • Hover text colour

This helps ensure users can clearly see buttons both before and during interaction.

Auto Fix WCAG AA And AAA Colours

Finding accessible colours manually can be time-consuming.

Our tool includes Auto Fix functionality which can:

  • Automatically adjust colours
  • Find accessible alternatives
  • Improve contrast ratios
  • Maintain colours as close as possible to the original design
  • Update the colour picker automatically

This is particularly useful when working with existing brand colours.

Colour Contrast Examples

Example AA Pass

Background: #FFFFFF

Text: #000000

Contrast Ratio: 21:1

Result: Passes WCAG AA and AAA

Example AA Fail

Background: #FFFFFF

Text: #999999

Contrast Ratio: Approximately 2.8:1

Result: Fails WCAG AA

Example AAA Pass

Background: #FFFFFF

Text: #00458F

Contrast Ratio: Greater than 7:1

Result: Passes WCAG AAA

Who Should Use A Colour Contrast Checker?

This tool is useful for:

  • Web designers
  • UI designers
  • UX designers
  • Front-end developers
  • WordPress developers
  • SEO agencies
  • Accessibility consultants
  • Marketing teams
  • Website owners
  • Ecommerce businesses

Frequently Asked Questions

What Is A Good Contrast Ratio?

For most website text, WCAG AA requires a minimum contrast ratio of 4.5:1.

What Is The Difference Between WCAG AA And AAA?

AA is the most commonly adopted accessibility standard.

AAA requires significantly higher contrast ratios and is considered enhanced accessibility.

Does Large Text Have Different Requirements?

Yes.

Large text only requires a minimum contrast ratio of 3:1 for WCAG AA and 4.5:1 for WCAG AAA.

Do Buttons Need Colour Contrast Checks?

Yes.

Button text, backgrounds and hover states should all maintain sufficient contrast to ensure accessibility.

Is This Tool Free?

Yes. Our WCAG Colour Contrast Checker is completely free to use.

Start Testing Your Colours

Use the Colour Contrast Checker above to test text, links, buttons and hover states against WCAG accessibility standards. Instantly identify accessibility issues, improve readability and create a better experience for all users.

Links

Understanding WCAG 2.0

Use sufficient contrast