Skip to main content

Free Colour Contrast Checker

Web Content Accessibility Guidelines (WCAG) 2.1/2.2 AA & AAA

Contrast Ratio

—
0.50
0.50

Preview

Contrast Preview

This sample text helps you evaluate colour contrast and readability. A good colour combination should remain clear and comfortable to read for all users.

Example CTA

Summary

  • Large Text

    (≥ 18.5 px / ≥ 24px bold)

    AA —
    PASS

  • Normal Text

    (< 18.5 px / < 24px bold)

    AA —
    PASS

  • UI Components

    (Icons, borders, controls)

    AA —
    PASS

Why Colour Contrast Matters for Accessibility

Poor colour contrast is one of the most common accessibility failures online, affecting users with low vision, colour blindness and age-related vision changes. Getting it wrong can hinder readability and navigation of a website.

Our free colour contrast checker helps you test text, UI elements, and background colours against WCAG 2.1, 2.2 AA and AAA standards in seconds.

Learn

Need to check the colour contrast of an entire webpage?

With Nexus Inclusion’s Pro and Advanced Plans, you can run a comprehensive contrast analysis across your entire website. Quickly identify and resolve contrast issues within navigation menus, text and font elements, photos and images.

Nexus Inclusion’s Design Tools

Scan your entire website to find colour contrast issues in existing content and navigation

Assess text layovers on images and photos for consistent colour contrast across multi-coloured backgrounds

Use integrated tools to create meaningful alt text and image tags, enhancing accessibility

Scan your images for assessment of visual analysis, text extract, colour and layout

Accessibility Tools for Designers and UX Teams

Exceptional design prioritises inclusion from the start. Integrating accessibility tools for designers into the process allows you and your team to scan, detect, and analyse critical elements such as contrast, structure, readability, and interaction.

Why Choose Nexus Inclusion’s Design Tools?

Accessible First

Check common design issues like colour contrast, alt text and font sizes as part of your design process.

Integrate with Other Teams

Use the same accessibility platform as your development team and avoid conflicting advice.

Full Website Audits

Work efficiently and at scale across your whole website.

FAQs

Explore the answers to commonly asked questions below.

  • For most text, WCAG recommends a contrast ratio of at least 4.5:1 between the text and its background. This means that a colour is 4.5 times brighter in relative luminance (light reflection) than the darker colour. Larger text can use 3:1. Higher contrast generally makes content easier to read for more people, especially those with low vision or colour vision deficiencies.

  • Yes, it is. The European Accessibility Act (EAA), Americans with Disabilities Act (ADA), and similar regulations commonly align with accessibility standards such as WCAG. While the exact legal requirements vary by country and organisation, meeting WCAG colour contrast guidelines is widely considered a best practice and is often used to demonstrate accessibility compliance.

  • The easiest way to improve contrast is to create a bigger difference between the text colour and the background colour. You can:

    • Darken the text colour
    • Lighten the background colour
    • Increase text size where appropriate
    • Avoid placing text on busy images or patterns
    • Use a tool such as the Nexus Inclusion colour contrast checker to test colour combinations
    • Small colour adjustments can often make a big difference while still maintaining your brand's look and feel

There is more to digital accessibility than colour contrast

For a full accessibility audit, explore Nexus Inclusion's WCAG audit and solution tools

Get Started