T

Text Machine

Powerful text tools, in your browser

Color Accessibility Checker

Enter a foreground and background color (hex codes) to check their contrast ratio and WCAG compliance.

Color Inputs
Preview Text

This is large bold text.

This is normal sized text.

Contrast Ratio

21.00:1

Contrast Ratio

Normal Text (AA)

AAA

Large Text (AA)

18pt+ or 14pt+ bold

AAA

UI Components (AA)

Buttons, form controls, etc.

AA
WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

How to use Color Accessibility Checker

  1. 1

    Enter two colors

    Provide a foreground (text) color and a background color as hex codes, for example #1a1a1a and #ffffff.

  2. 2

    Check the contrast

    Click Check Accessibility to calculate the contrast ratio between the two colors.

  3. 3

    Review WCAG results

    See pass or fail badges for AA and AAA at normal text, large text, and UI component levels, and view the live preview.

  4. 4

    Adjust as needed

    Swap the colors or tweak a hex value until the combination meets the WCAG level your project requires.

Frequently asked questions

What is a contrast ratio and what counts as good?
Contrast ratio measures the luminance difference between text and its background, from 1:1 to 21:1. WCAG requires at least 4.5:1 for normal text and 3:1 for large text at the AA level, and 7:1 and 4.5:1 at the stricter AAA level.
What is the difference between AA and AAA?
AA is the standard most websites and legal requirements target, while AAA is an enhanced level for maximum readability. The checker shows pass or fail for both so you can choose the bar that fits your needs.
Why does large text pass when normal text fails?
Large text, defined as roughly 18pt or 14pt bold and above, is easier to read, so WCAG allows a lower contrast threshold for it. The same color pair can therefore satisfy large-text rules while failing the normal-text requirement.
What color format should I enter?
Enter colors as hex codes in #RRGGBB or shorthand #RGB form. The tool validates your input and shows a live preview of normal and large text so you can see the real result.
Is the checker free and does it send my colors anywhere?
It is completely free with no sign-up, and the contrast calculation runs entirely in your browser, so the colors you test are never uploaded to a server.

Related tools

Keep going with these handy tools

Meta Tag Generator

Robots.txt Generator

Open Graph Previewer

HTML Entity Encoder/Decoder

HTTP Header Viewer

URL Redirect Chain Checker