Color Contrast Checker
Check text/background contrast against WCAG AA and AAA standards.
Color Contrast Checker
The color contrast checker measures the contrast ratio between a text color and its background and tells you whether the pair passes WCAG AA and AAA accessibility standards. Set a foreground and background color and you immediately see the exact ratio along with clear pass or fail results, so you can catch low-contrast, hard-to-read combinations before they reach your users.
How it works
The checker runs entirely in your browser. It calculates the relative luminance of each color and the resulting contrast ratio using the standard WCAG formula, then compares it against the AA and AAA thresholds for both normal and large text. Adjust either color and the ratio and results update instantly. Nothing is uploaded, so it works offline after loading and behaves the same on desktop and mobile.
How to use it
- Set your text (foreground) color.
- Set the background color behind it.
- Read the contrast ratio and the AA/AAA pass or fail badges.
- Tweak either color until the combination passes.
Refining a palette? Choose colors with the Color Picker & Palette, translate values with the Color Converter, or design backgrounds with the CSS Gradient Generator.
Private by design
Your colors never leave your device — there is no upload, no account, and no tracking. The tool is free and fully client-side.
Frequently asked questions
AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
Related tools
Box Shadow Generator
Design CSS box-shadows visually and copy the exact code.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview.
Color Picker & Palette
Pick a color, get every format, and generate tints, shades and palettes.
Meta Tag Generator
Generate SEO, Open Graph and Twitter meta tags from a simple form.