How to use Color Contrast Checker
A comprehensive WCAG 2.1 color contrast checker that tests foreground/background pairs against AA and AAA standards with a live text preview. See exactly how your color combination looks with normal text, large text, and bold text rendered at realistic sizes. Share results via URL for design reviews and accessibility audits.
- Enter or pick the foreground (text) color using HEX, RGB, or the color picker.
- Enter or pick the background color.
- Review the live preview showing how text actually looks with this combination.
- Check the WCAG AA/AAA pass/fail badges for each text size category.
- Copy the shareable URL to include the result in a design review or audit report.
Your data never leaves your device — 100% private processing.
Beyond the ratio: real-world readability
A passing contrast ratio does not guarantee readability in all contexts. Font weight, letter spacing, line length, and font size all influence legibility. Thin (100–300 weight) fonts at the 4.5:1 minimum often feel harder to read than bold fonts at the same ratio. Users with dyslexia benefit from slightly wider letter spacing and avoiding pure black (#000) on pure white (#fff) — a softer off-white background like #f8f8f8 reduces visual stress. Always validate results with real users, especially for body text in content-heavy interfaces.
Accessibility audit workflow
Start by extracting your design system's text/background color combinations: primary text on page background, secondary text, disabled text, link colors, button labels on button backgrounds, placeholder text on input backgrounds, and badge/tag text. Test each pair here. Document failures with the actual ratio and the nearest passing color adjustment. For designs already in production, browser devtools (Chrome's CSS overview or the Accessibility pane) can identify contrast failures at scale across the whole page.
Worked examples
Maximum contrast
Inputs: #000 on #fff
Result: 21:1 — passes AA and AAA at every text size
Mid-grey on white
Inputs: #767676 on #fff
Result: 4.54:1 — passes AA for normal text
Light grey fails
Inputs: #999 on #fff
Result: 2.85:1 — fails AA for normal text
WCAG 2.1 minimum contrast ratios
| Content type | AA | AAA |
|---|---|---|
| Normal text (under 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Glossary
- WCAG 2.1 AA
- The baseline web accessibility conformance level required by most legal standards (ADA, EN 301 549, AODA).
- WCAG 2.1 AAA
- The enhanced accessibility level — stricter ratios, not always achievable for all text on all backgrounds.
- Luminance
- The perceived brightness of a color, calculated using the WCAG relative luminance formula.
- Design token
- A named variable (e.g., --color-text-primary) that centralizes color decisions in a design system.
Related reading
Frequently Asked Questions
Why use Color Contrast Checker?
- Test foreground/background pairs against WCAG AA and AAA thresholds with a live text preview
- Shareable URL encodes the tested color pair so you can attach results directly to audit reports
- Renders real text at multiple sizes to reveal legibility differences invisible in the raw ratio
- Side-by-side audit documentation helps build a complete compliance checklist efficiently
Common use cases
- Verifying body text color combinations meet AA requirements before a site goes live
- Documenting WCAG pass/fail ratios for each design-system token pair in an accessibility audit
- Sharing a result URL with a designer to explain concretely why a color combination must change
- Comparing multiple candidate text colors against a card background to select the most legible
- Validating that placeholder text on an input field meets 4.5:1 at the smallest rendered size
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Color & Design
Color Picker & Converter
Pick a color and convert HEX, RGB, HSL, HSB, and CMYK instantly. Generate tints, shades, and export-ready palette values.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Color Harmony Generator
Generate every color harmony from one base color: complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic schemes. Free, instant.
Color Blindness Simulator
Simulate how images appear to people with color blindness. Test protanopia, deuteranopia, tritanopia, and 5 more types. Free accessibility tool.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with live preview controls. Copy production-ready gradient code instantly online.
Explore all Color & Design.