Skip to main content
Nexus Inclusion - home

Free Colour Contrast Checker

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

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 Accessibility

Clear colour contrast helps people read your content and recognise important controls. It is especially valuable for people with low vision, colour blindness, and age-related changes.

Check your colour choices early to make headings, body text and buttons easier to see and use.

Learn

Understand Your Colour Contrast Results

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. Use the result for the text as it appears on your page. A pair can pass for a large heading and fail for smaller body 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. This non-text result is separate from the text result.
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. Check contrast directly on your page and quickly identify issues as they appear.
Get the Browser Extension

Full Page Colour Contrast Checker

Review contrast across a webpage with our Full Page Colour Contrast Checker. Check more than an individual colour combination and use it as part of your accessibility workflow.
Compare Plans

Colour Contrast Checkers by Region

Check colour contrast against accessibility requirements in different regions. Choose the checker that matches your location or the markets you operate in.
Explore Regional Checkers

How to Improve Insufficient Colour Contrast

Start by darkening the text or lightening its background, then check the combination again. For example, #777777 on white (#FFFFFF) has a contrast ratio of approximately 4.48:1, which fails WCAG AA for normal text. Changing the text to #555555 increases the ratio to approximately 7.46:1, passing both AA and AAA text contrast thresholds.

Check paragraph text, links and button labels separately. If a link is identified only by its colour, add a visible indicator such as an underline.

Test your Revised Colours

Colour Contrast Checker Faqs

  • No. A colour combination check answers only if there’s enough contrast between them. Your website also needs checks for keyboard access, text alternatives, forms and other accessibility requirements. Review the colours in their actual page context, including different backgrounds and states.

  • The AA and AAA text contrast thresholds are the same across these versions. WCAG 2.1 added the AA non-text contrast criterion, which is also present in WCAG 2.2. A passing colour contrast result does not establish conformance with every criterion in any version.

  • Often, yes. Try a darker text shade or a lighter background, then test the combination again. Record which combinations work for body text, large headings and controls so your team can reuse them consistently.

  • Use the exact ratio to determine if it passes. For example, 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 combination.

  • 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 combination. Use the free browser extension to inspect individual elements, or the Full Page Colour Contrast Checker to review contrast across a webpage. Wider accessibility testing is still needed.

Make Accessibility Part of Your Everyday Work

Bring contrast checks into your team’s regular reviews. Explore Nexus Inclusion tools for webpages and digital content and get support with your wider accessibility work.

Continue Your Accessibility Review

Explore all Features

Free Website Accessibility Scan

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

Scan your homepage

Accessibility compliance guides

Find guidance on the accessibility obligations relevant to your organisation and markets you operate in.

Explore accessibility guidance

WCAG Explained

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

Explore WCAG