Skip to main content
Nexus Inclusion - home

Free UK Colour Contrast Checker

UK Public Sector Accessibility Regulations

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 Public Services

People rely on public services to find information, make applications and get support. Clear contrast helps people with low vision read instructions, form labels and essential details. Check your colours when designing new pages or updating existing content.

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

Learn

Read WCAG 2.2 AA Contrast Results for UK Content

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.

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.

UK government guidance asks covered public sector bodies to meet WCAG 2.2 AA. Text contrast is one part of that work; a passing colour pair does not establish website 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 public service information and application forms.
Compare Plans

How to Improve Insufficient Colour Contrast

Start by darkening the text or lightening its background, then check the pair again. For a council application instruction, #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 guidance text, form labels and validation messages across the application journey. Include keyboard focus and error states in the wider review, and use words as well as colour to explain what needs correcting.

Test Your Revised Colours

Colour Contrast Questions

  • Current UK government guidance specifies WCAG 2.2 AA for covered websites and apps. For text, that means at least 4.5:1 for normal text and 3:1 for large text. AAA results offer a higher text contrast target, but do not replace the other AA checks.

  • No. It compares the selected colours with contrast thresholds. WCAG 2.2 also addresses keyboard use, focus, target size, authentication and other needs. Those require separate checks of the page and the way people interact with it.

  • Record the affected page or component, the original and revised colours, the text size and the state tested. Recheck the implemented change. Use that evidence within your wider accessibility review and keep your accessibility statement accurate.

  • 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 updates to public information, application forms and other online services.

Compare Plans

Identify objects, colours and other elements in your images. Use the analysis to support reviews of public information, service illustrations 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

UK accessibility guide

Read about the wider accessibility requirements for UK websites and digital services.

Explore accessibility guidance