Color Contrast Checker for WCAG Accessibility
The Color Contrast Checker measures the contrast ratio between a text color and its background, then tells you instantly whether the pair passes WCAG AA and AAA. It is built for designers and developers who want readable, accessible interfaces without guessing.
Enter a foreground (text) color and a background color with the picker or a HEX code, and the ratio updates live alongside pass/fail badges for normal text, large text, and UI components. When a pair falls short, the checker proposes accessible alternatives and simulates how the colors look to people with color vision deficiency.
How to Check Color Contrast
Enter your colors
Set the Foreground (text) and Background colors. Click a color square to open the native picker, or type a HEX code directly such as #1F2937 or 1F2937.
Read the results
See the contrast ratio (from 1:1 up to 21:1) update instantly, with pass/fail badges for Normal Text, Large Text, and UI Components at AA and AAA, plus a live preview of real text on your background.
Fix low contrast
If a pair fails normal-text AA, open Suggested Alternatives and click any swatch to apply an accessible color. Use Swap Colors to flip foreground and background and test the reverse.
Test for color blindness
Open More Tools to simulate Protanopia, Deuteranopia, and Tritanopia, or apply a Quick Preset to compare common pairings in one click.
Features
Real-Time Contrast Calculation
The contrast ratio recalculates the moment you change a color, so you get instant pass-or-fail feedback as you design.
Complete WCAG Compliance Check
Test Normal Text (AA 4.5:1, AAA 7:1), Large Text (AA 3:1, AAA 4.5:1), and UI Components (AA 3:1) all at once.
Smart Color Suggestions
When a pair fails AA, get up to four accessible alternatives showing the adjusted color, its ratio, and whether the text or background changed. Click one to apply it.
Live Preview
See your colors on a real sample heading, body text, small caption text, and a bordered button before you commit to them.
Color Blindness Simulation
Preview your combination as it appears with Protanopia, Deuteranopia, or Tritanopia to make sure it works for everyone.
Quick Presets
Load common pairings such as black on white or white on black with a single click to start from a known baseline.
Swap Colors
Instantly switch the foreground and background to test the reverse contrast scenario.
Copy to Clipboard
Copy any color value with one click to drop straight into your design tool or code.
Frequently Asked Questions
What is a good color contrast ratio?
For normal text, aim for at least 4.5:1 (WCAG AA) or 7:1 (AAA) for stronger accessibility. Large text — 18px and up, or 14px bold — only needs 3:1 to pass AA.
What contrast ratio passes WCAG AA?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. The same 3:1 minimum applies to UI components such as icons, borders, and interactive elements.
How is contrast ratio calculated?
The checker uses the official WCAG formula. It computes the relative luminance of each color, then divides the lighter value plus 0.05 by the darker value plus 0.05, giving a ratio between 1:1 and 21:1. Results match other accessibility tools and browser dev tools.
What is the difference between AA and AAA?
AA is the minimum standard most websites target and is widely referenced for ADA-style compliance. AAA is a stricter level that improves readability further but can be hard to meet with some palettes. Most teams aim for AA and reach for AAA on body text where they can.
Why does my design fail even with dark text on white?
Light gray text (around #999999 or lighter) on white often falls below 4.5:1. A color can look "dark enough" to you and still miss the ratio, which is exactly why a numeric check matters.
How do I fix low contrast?
Darken the text or lighten the background until the ratio clears the threshold. The Suggested Alternatives panel does this for you, calculating accessible colors that reach AA and letting you apply one with a click.
What color format does the checker accept?
Enter colors as HEX codes (with or without the leading #), or use the native color picker. To test an RGB or HSL value, convert it to HEX first with any color converter.
What is color blindness simulation for?
Roughly 8% of men and 0.5% of women have some color vision deficiency. The simulation shows your colors as they appear with Protanopia, Deuteranopia, or Tritanopia, helping you confirm the design still reads clearly for those users.
No comments yet. Be the first to comment!