◐

Color Contrast Checker

Check the WCAG contrast ratio between a text and background color with AA/AAA results.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Privacy →

Text color

Background

The quick brown fox jumps over the lazy dog.

Large sample text

Try a worked example

Example

Set the text color to #767676 and the background to #ffffff. The ratio is 4.54:1, which passes AA for normal text. One shade lighter, #777777 gives 4.48:1 and fails, because AA needs at least 4.5:1 for normal text.

Keep in mind

Large text (about 24px, or 18.7px bold) needs only 3:1 for AA. The ratio ignores thin fonts, text over images and transparency, so check the real design as well, and do not rely on color alone to show meaning.

About this tool

Compare a foreground and background color to see the WCAG contrast ratio and whether it passes AA and AAA, all computed locally in your browser.

Frequently asked questions

What counts as large text?

WCAG treats text at 18pt (24px) or 14pt (18.66px) bold as large, which needs a lower ratio of 3:1 for AA.

Which ratios pass?

Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 for AA and 4.5:1 for AAA.