Color Contrast Checker
Free color contrast checker — verify WCAG 2.2 AA and AAA compliance instantly. Live preview, color blindness simulation, and accessible color suggestions....
Updated May 2026
Good color contrast ensures text is readable for all users, including those with low vision or color blindness. Aim for WCAG 2.2 AA compliance to meet legal accessibility standards.
Accessibility Fix
Your colors pass AA!
No fix needed for normal text contrast.
Color Blindness Simulation
WCAG 2.2 Reference
| Metric | Current Value | Threshold | Status |
|---|---|---|---|
| Normal Text (AA) | 6.18:1 | 4.5:1 | PASS |
| Normal Text (AAA) | 6.18:1 | 7:1 | FAIL |
| Large Text (AA) | 6.18:1 | 3:1 | PASS |
| Large Text (AAA) | 6.18:1 | 4.5:1 | PASS |
| UI Components (AA) | 6.18:1 | 3:1 | PASS |
How the color contrast checker works
Two colors, instant WCAG compliance
1. Set text and background colors
Click a swatch to open the picker, or type a 6-digit HEX code directly. "Swap Colors" flips foreground and background instantly.
2. Read the compliance results
See the contrast ratio and AA/AAA pass-fail status for normal text, large text, and UI components in one view.
3. Fix the color or simulate color blindness
"Accessibility Fix" suggests the closest passing color that keeps your original hue; the simulator previews Deuteranopia, Protanopia, and more.
What this color contrast checker does
More than a contrast ratio calculator
Automatic accessible color suggestion
Finds the nearest WCAG-passing color while preserving your original hue, instead of just flagging a failure.
Simulates 5 types of color vision
Deuteranopia, Protanopia, Tritanopia, and Achromatopsia, plus normal vision, so you can see what colorblind users actually see.
Live text and UI preview
Renders your color pair as body text, large headings, and buttons so you can judge readability, not just a number.
Runs entirely in your browser
No color values are sent to a server, which makes it safe to check unreleased brand palettes.
Contrast ratio reference points
Common combinations and where they land
When you'll reach for this tool
The most common scenarios among people who use it
Web and mobile design review
Check text, buttons, and form fields before shipping — catching a failing pair before launch is far cheaper than fixing it after.
Legal accessibility audits
ADA, Section 508, EAA, and WCAG audits all hinge on this ratio — the reference table maps each requirement to its threshold.
Dark mode contrast checks
The same WCAG ratios apply to dark themes — confirm your light text still clears the bar against a dark background.
Brand color accessibility
Check whether a brand color works as body text or a UI element, and find the closest passing alternative if it doesn't.
Common mistake? Start here
Trusting how different colors look, not the number
Two colors that look visually distinct can have almost identical luminance and still fail — always verify with the actual ratio.
Ignoring color blindness even after passing WCAG
WCAG measures luminance, not hue difference, so a red/green pairing can pass the ratio test and still be indistinguishable to colorblind users.
Forgetting that text size changes the requirement
Large text (18pt and up, or 14pt bold) only needs 3:1 instead of 4.5:1 — bumping the font size can save a color that otherwise fails.
Why use this contrast checker
Low contrast is the single most common accessibility failure on the web, present on 83.6% of home pages according to the WebAIM Million 2024 report. With the ADA, Section 508, and the EAA all citing WCAG contrast criteria, checking your colors is no longer optional for public-facing sites.
The automatic fix suggestion and color blindness simulation go further than a plain ratio calculator — they show you exactly how to resolve a failure and surface problems that the number alone won't reveal.
WCAG 2.2 contrast requirements
AA (legal minimum) vs. AAA (enhanced)
Frequently asked questions
It's a tool that calculates the contrast ratio between two colors — typically text and its background — and tells you whether it meets WCAG accessibility standards. This one also simulates color blindness and suggests accessible alternatives when a pair fails.
Resources
Related Tools
- Color Converter Design Convert colors between HEX, RGB, HSL, and CMYK instantly. Free online color picker with WCAG contrast checker and palette generator.
- Color Palette Generator Design Generate harmonious color palettes from any base color. Choose Analogous, Complementary, Triadic or Tetradic harmony — export as CSS variables or JSON.
- Color Palette from Image Design Extract color palettes from any image — get HEX, RGB, HSL codes and export as CSS variables, Tailwind config, JSON, or PNG. 100% client-side, no upload.
- CSS Box Shadow Generator — Neumorphism, Glassmorphism & Tailwind Design Free CSS box shadow generator with live preview. Build shadows, neumorphism, glassmorphism effects. Export to CSS, Tailwind, or CSS variables. No signup.
- CSS Flexbox Generator Design Free CSS Flexbox generator: live preview, Tailwind & CSS dual output, 10 preset layouts, contextual warnings, React/JSX export. No signup required.
