UI UX tool

Color Contrast Checker - WCAG AA & AAA

Check the contrast ratio between text and background colors and compare the pair with WCAG AA and AAA thresholds.

Text color

Background color

Very good

★★★★☆

Small Text ★★★

Large Text ★★★

Eleventor Design

Every pixel matters because even the smallest detail can affect trust and experience.

How to use this tool

Enter foreground and background colors using HEX values or the color pickers.
Read the contrast ratio and the normal-text and large-text results.
Adjust one color, then check the pair in your actual design, including hover and focus states.

Example and use case

Black (#000000) on white (#FFFFFF) has a 21:1 contrast ratio. A ratio of 4.5:1 meets the WCAG AA threshold for normal text.

Limitations to check

A passing pair does not certify a complete page. Gradients, transparency, images, font weight and component states affect the final rendered result. WCAG defines large text by size and weight, not by heading level.

Processing and privacy

The tool's browser code handles entered text or selected files locally. Optional URL imports and external resources can make network requests. This website also uses third-party scripts, including analytics and advertising. Read the privacy policy and use sample data when testing sensitive workflows.

Found a problem? Report a tool issue with the browser version and steps to reproduce it. Avoid sending private document content or credentials.

Frequently asked questions

What contrast ratio does normal text need?

WCAG AA requires at least 4.5:1 for normal text; AAA requires 7:1. Large text has lower thresholds of 3:1 and 4.5:1 respectively.

Does a passing score make my site accessible?

No. Keyboard access, labels, focus indicators, alternatives for images and other accessibility requirements still need checking.

Can I check a transparent color?

Check the resulting composited color against the actual background. A solid HEX pair alone cannot model every layered design.