Skip to main content
Nexus Inclusion - home

Free Section 508 Color Contrast Checker

Revised Section 508 Standards

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 Federal Digital Content

Federal information and services need to be usable by people with disabilities. Clear contrast helps people with low vision read instructions, form labels and other essential content. Check your color choices as part of your Section 508 accessibility review.

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

Learn

Read Your Section 508 Text Contrast Result

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.

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.

For covered federal electronic content, the Revised Section 508 Standards incorporate WCAG 2.0 Level A and AA. Use the AA text result for a contrast review. The additional non-text contrast result comes from WCAG 2.1 and 2.2, beyond that WCAG 2.0 baseline.

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 federal webpages and supplier interfaces.
Compare Plans

How to Improve Insufficient Color Contrast

Start by darkening the text or lightening its background, then check the pair again. For a federal 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 instructions, field labels and validation messages in the delivered interface. When documenting a supplier review, record the color values, text size, background and state tested so another reviewer can reproduce the result.

Test Your Revised Colors

Color Contrast Questions

  • For covered electronic content, use WCAG 2.0 AA text thresholds: at least 4.5:1 for normal text and 3:1 for large text. A tool result labelled WCAG 2.1 or 2.2 uses the same text thresholds, but includes other criteria outside the WCAG 2.0 baseline.

  • You can record it as evidence for the color pair and context tested. It does not assess a whole product or produce an Accessibility Conformance Report. Check representative pages, components and states, and evaluate the other applicable requirements separately.

  • WCAG 2.0 does not contain success criterion 1.4.11 Non-text Contrast. That criterion was added in WCAG 2.1. It is a useful additional check, but do not describe it as part of the WCAG 2.0 requirements incorporated by Section 508.

  • 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 reviews for federal webpages and supplier interfaces.

Compare Plans

Identify objects, colors and other elements in your images. Use the analysis to support accessibility reviews of federal services, supplier interfaces 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

Section 508 compliance guide

Understand the wider requirements for federal technology and the suppliers providing it.

Explore accessibility guidance