Skip to main content
Nexus Inclusion - home

Free EAA Colour Contrast Checker

European Accessibility Act

Contrast Ratio

—

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 EU Customers

From reading a product description to completing a checkout, people need to see what your service is asking them to do. Clear contrast helps people with low vision read content and identify important controls. Checking your colours is a practical step in your EAA accessibility work.

Checking contrast early also helps teams avoid repeating inaccessible colour combinations across templates, components and published pages.

Learn

Use Contrast Results in Your EAA Accessibility Work

The contrast ratio measures the difference between your foreground and background colours. At WCAG AA, normal text needs at least 4.5:1 and large text needs 3:1. Large text is at least 18pt regular or 14pt bold, equivalent to 24px or approximately 18.67px.

AAA raises the text thresholds to 7:1 for normal text and 4.5:1 for large text.

WCAG 2.1 and 2.2 AA also require 3:1 for visual information needed to identify controls, their states and meaningful graphics against adjacent colours, subject to exceptions.

For teams working on services covered by the European Accessibility Act, WCAG contrast checks help identify readability barriers. Test the colours used throughout the customer journey. A passing pair is one technical result and does not establish EAA compliance.

For a check without regional guidance, use our general colour contrast checker.

Check Another Colour Pair

Choose How You Check Contrast

Check an individual element while you browse, or review contrast across a webpage in the Nexus Inclusion platform.

Free Contrast Checker Browser Extension

Inspect individual page elements with our free browser extension. Use it to check contrast where your content appears, then review the result in context.
Get the Browser Extension

Full Page Colour Contrast Checker

Review contrast across a webpage with our paid Full Page Colour Contrast Checker. Add page-level checks to your work on product pages and checkout journeys.
Compare Plans

How to Improve Insufficient Colour Contrast

Start by darkening the text or lightening its background, then check the pair again. For a checkout delivery label, #777777 on white (#FFFFFF) gives approximately 4.48:1 and fails AA for normal text. Changing the text to #555555 gives approximately 7.46:1, passing both AA and AAA text contrast thresholds.

Check product details, delivery prices, payment instructions and validation messages across the customer journey. Recheck responsive layouts and every language version you provide.

Test Your Revised Colours

Colour Contrast Questions

  • This tool measures WCAG contrast ratios. AA text thresholds are 4.5:1 for normal text and 3:1 for large text. The EAA covers specified products and services and has wider requirements; a WCAG colour-pair result is not an EAA compliance certificate.

  • Review field labels, delivery prices, payment instructions and the text on action buttons. Then inspect error messages and selected states. Text over promotional images needs checking against the actual background behind it, which can change on smaller screens.

  • The ratio stays the same when the two colours stay the same. Check the rendered content in each version: longer translations can change wrapping, font size or placement over an image. Each of those changes can affect which result applies.

  • Use the unrounded value to decide pass or fail. A ratio below 4.5:1 does not meet the 4.5:1 requirement, even if a rounded display shows 4.5. Aim above the minimum when choosing a revised colour pair.

  • A single pair checks only one background colour. Review the lowest contrast behind the text across the image or gradient and at different screen sizes. A solid background behind the words can make contrast more predictable.

  • No. This tool checks your selected colour pair. Use the free browser extension to inspect individual elements, or the paid Full Page Colour Contrast Checker to review contrast across a webpage. Wider accessibility testing is still needed.

Explore Our Tools for Digital Accessibility

Explore All Features

Review contrast across a webpage with our paid Full Page Colour Contrast Checker. Build page-level checks into product pages, forms and checkout journeys.

Compare Plans

Identify objects, colours and other elements in your images. Use the analysis to support reviews of product imagery, checkout journeys and other visual content.

Explore image analysis

Make Accessibility Part of Your Everyday Work

Continue Your Accessibility Review

View all

WCAG Explained

Understand the guidelines behind contrast checks and explore the other requirements that help people access and use your content.

Explore WCAG

Free Website Accessibility Scan

Check your homepage for automatically detectable accessibility issues. Use the findings to plan your next checks alongside your contrast review.

Scan Your Homepage

Coming Soon

European accessibility guidance

Explore the wider EAA requirements and the guidance relevant to your products, services and EU markets.