Design Tools

Contrast Checker

This Accessibility Contrast Checker is a user-friendly tool designed to help you evaluate the contrast between foreground and background colors on your webpage. It ensures your design complies with the Web Content Accessibility Guidelines (WCAG) for readability and accessibility.

Results

AA

AAA

Aa

Normal Text

FAIL

Aa

Large Text

FAIL

Design Elements

FAIL

Your Colours

Colour One

Find nearest:

Reverse

Colour Two

Current Contrast Ratio

0.00

Example title

Example paragraph text

Button

How to use the Colour Contrast checker?

Using the Recite Me Colour Contrast Checker is simple. Add the hex code or use the colour selector to find your two desired colours.

The checker will immediate show the results in the box above, indicating if the contrast passes or fails WCAG compliance standards. The tool will highlight compliance results for small text, large text, and design elements.

If your selected colours do not meet the desired compliance level, you can find the nearest compliant colour that meets AA or AAA standards. You can also use the ‘reverse’ button to swap the foreground and background colours.

The tool will also provide an example section, where you can see how your chosen colours appear in titles, paragraph text, form fields, and buttons.

The importance of WCAG compliant colour contrast

WCAG-compliant colour contrast ensures readability for users with visual impairments, including colour blindness and low vision. By meeting WCAG requirements, websites enhance inclusivity, improve user experience, and comply with legal accessibility standards.

However, there are different levels of compliance that meet varying levels of success criteria:

WCAG Level AA: This level requires a contrast ratio of at least 4.5:1 for normal text. Large text and design elements must meet a ratio of at least 3:1
WCAG Level AAA: This level requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text

Businesses should aim to meet WCAG Level AA as a minimum standard, with the ultimate goal of achieving AAA compliance.