Color Contrast Checker (WCAG)
Pick a text color and a background color to get the exact WCAG 2.1 contrast ratio, pass/fail badges, and automatic fix suggestions.
Large text at 24px looks like this.
Normal text at 16px looks like this. The quick brown fox jumps over the lazy dog, so you can judge readability at a glance.
Suggested fixes
Ratios follow the WCAG 2.1 relative-luminance formula. Large text means 24px, or 18.66px bold.
How it works
- Choose a foreground (text) color and a background color using the pickers or by typing hex codes.
- Read the live contrast ratio and the AA/AAA badges for normal and large text, with a real preview underneath.
- If a level fails, click a suggested fix to apply the nearest passing shade, then copy the CSS.
Frequently asked questions
- What contrast ratio does WCAG require?
- WCAG 2.1 Level AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises this to 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px, or 18.66px if bold.
- How is the contrast ratio calculated?
- The tool converts each color to relative luminance using the sRGB formula defined in the WCAG specification, then computes (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. This is the exact math accessibility auditors and browser dev tools use.
- How do the auto-fix suggestions work?
- The checker keeps each color’s hue and saturation and searches for the nearest lighter or darker lightness value that reaches the AA or AAA threshold. That way the fixed color still looks like your original brand color, just adjusted enough to pass.
- Are my colors sent to a server?
- No. Everything — ratio math, previews, and fix suggestions — runs entirely in your browser with no network requests. You can use the tool offline once the page has loaded, and nothing you test is stored anywhere.
- Does passing AA make my site legally accessible?
- Contrast is one requirement among many in WCAG, so a passing ratio is necessary but not sufficient on its own. Standards such as ADA, Section 508, and the European Accessibility Act reference WCAG AA, which makes 4.5:1 the practical baseline for body text on most sites.
About this tool
This contrast checker measures how readable text will be against a background color using the official WCAG 2.1 formula. Enter any two colors — with the native color pickers or by typing hex codes — and the tool instantly reports the contrast ratio along with pass/fail badges for Level AA and Level AAA, at both normal and large text sizes. A live preview renders real sample text in your exact colors so you can judge the result with your own eyes, not just a number.
All calculations happen locally in your browser. Each color is converted to relative luminance through the sRGB transfer function, and the ratio (L1 + 0.05) / (L2 + 0.05) is computed exactly as the specification defines it. Because there is no upload and no server, results update live on every keystroke and your color palette never leaves your device — useful when you are working with unreleased brand guidelines.
The auto-fix feature is what saves the most time. When a combination fails, the checker holds the hue and saturation of each color steady and walks its lightness up and down until it finds the nearest shade that reaches 4.5:1 for AA or 7:1 for AAA. One click applies the suggestion, so you land on a compliant color that still matches your palette instead of guessing with a slider. A swap button flips foreground and background, and a copy button gives you ready-to-paste CSS.
Practical tip: aim for AA as your floor on body text, and reserve AAA for long-form reading interfaces or audiences with low vision. Pure black on pure white (21:1) can feel harsh on large screens; something like #1a1a1a on #ffffff keeps a comfortable 17.4:1 while softening glare.