Skip to main content
Nexus Inclusion - home

Free ADA Color Contrast Checker

Web Content Accessibility Guidelines ADA

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 Color Contrast Matters for ADA Accessibility

People need to read your content before they can buy, book or use a service. Clear contrast helps people with low vision distinguish text and important controls. Checking your colors is a practical step in your ADA accessibility work.

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

Learn

Understand Your ADA Color Contrast Check

The contrast ratio measures the difference between your foreground and background colors. 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 colors, subject to exceptions. This non-text result is separate from the text result.WCAG provides practical contrast criteria for ADA accessibility work. The Title II web rule uses WCAG 2.1 AA for covered state and local government content. Title III does not specify one detailed federal technical standard for business websites. A passing pair does not establish ADA compliance.For a check without regional guidance, use our general color contrast checker.

Check Another Color 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 Color Contrast Checker

Review contrast across a webpage with our paid Full Page Color Contrast Checker. Add page-level checks to your work on booking forms and service pages.
Compare Plans

How to Improve Insufficient Color Contrast

Start by darkening the text or lightening its background, then check the pair again. For a booking form 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.Review booking instructions, field labels and error messages together. Make errors clear in words as well as color, and check the label against every background used in the form.

Test Your Revised Colors

Color Contrast Questions

  • WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. These criteria support ADA accessibility reviews. Which legal requirements apply depends on your organization; this checker does not issue an ADA compliance verdict.

  • Start with the level required for your project. The Title II web rule specifies WCAG 2.1 AA for covered content. AAA offers higher text contrast thresholds of 7:1 for normal text and 4.5:1 for large text; it is not a general ADA requirement.

  • No. Check the label against its background, then review the visual information needed to identify the control and its states. The button also needs an accessible name, keyboard operation and visible focus. Contrast is one part of that review.

  • 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 color pair.

  • A single pair checks only one background color. 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 color pair. Use the free browser extension to inspect individual elements, or the paid Full Page Color 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 Color Contrast Checker. Make it part of your team’s regular checks as you improve access to online information and services.

Compare Plans

Identify objects, colors and other elements in your images. Use the analysis to support accessibility reviews of product images, service pages 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

ADA accessibility guide

Explore the wider ADA accessibility obligations that may apply to your organization.

Explore accessibility guidance