A color contrast checker verifies whether your text and background colors meet the Web Content Accessibility Guidelines (WCAG) contrast requirements. Poor contrast makes text unreadable for millions of users — including the elderly, those with low vision, and anyone using a screen in bright sunlight.
Check Color Contrast — WCAG AA & AAA
Enter text and background colors to verify accessibility compliance.
WCAG Contrast Requirements
| WCAG Level | Normal Text (< 18px / 14px bold) | Large Text (≥ 18px / 14px bold) | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
WCAG AA is the legal standard in many countries (ADA in USA, EAA in EU). Failing AA means your website may face legal complaints and excludes ~15% of the population with some form of visual impairment.
Most Common Contrast Failures
| Combination | Ratio | WCAG AA | Fix |
|---|---|---|---|
| #999 on #FFF | 2.85:1 | FAIL | Use #595959 or darker |
| #777 on #FFF | 4.48:1 | FAIL (barely) | Use #767676 minimum |
| Blue #3B82F6 on #FFF | 3.44:1 | FAIL for small text | Use #2563EB or larger font |
| Green #22C55E on #FFF | 2.09:1 | FAIL | Use #15803D for text |
| #FFF on yellow #FDE047 | 1.31:1 | FAIL | Never use white on yellow |
Many brand blues, greens, and oranges fail AA contrast when used as text on white. Always verify brand color accessibility before using in UI text. You can use the brand color for large headings (3:1 threshold) while using a darker variant for body text (4.5:1).
How Contrast Ratio Is Calculated
The formula compares relative luminance of two colors:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 = lighter color luminance, L2 = darkerRelative luminance uses a weighted formula: L = 0.2126×R + 0.7152×G + 0.0722×B (after gamma correction). Green contributes most to perceived brightness, which is why green text on white often fails.
Maximum possible ratio: 21:1 (black on white). Minimum: 1:1 (identical colors).
How to Fix Contrast Issues Without Changing Your Design
- Darken text color — Use a darker shade of your brand color for body text while keeping the original for large headings
- Add background tint — Instead of white, use a very light tint: #F0F4FF instead of #FFFFFF with blue text
- Increase font size — Large text (18px+) only needs 3:1 instead of 4.5:1
- Add text shadow — For text on images: text-shadow: 0 1px 3px rgba(0,0,0,0.5)
- Add overlay on images — Semi-transparent dark overlay behind text on hero images
Contrast in Dark Mode
- Don't use pure white (#FFF) on pure black (#000) — 21:1 ratio causes eye strain and halation. Use #F8FAFC on #0F172A (~16:1) instead
- Desaturate brand colors — Bright, saturated colors on dark backgrounds cause halation (glowing effect). Reduce saturation by 10-20%
- Test both modes — A color pair that passes in light mode may fail in dark mode and vice versa
Simply inverting your light palette creates jarring dark mode. Dark surfaces should be dark gray (#0F172A, #1E293B), not pure black. Elevation in dark mode = lighter surface, not darker shadow. Brand colors need lightness bumps of 10-20% to maintain vibrancy on dark backgrounds.
Accessibility Testing Workflow
Step-by-Step Contrast Audit
- Identify all text-background pairs in your design — body text, headings, links, buttons, form labels, placeholders, error messages, tooltips
- Check each pair against WCAG AA minimums (4.5:1 normal, 3:1 large)
- Fix failures — darken text, lighten background, increase font size, or add text-shadow
- Test in both light and dark modes
- Test on actual devices — laptop screens, phone screens, and low-brightness settings all affect perceived contrast
Automated Tools
| Tool | Type | Checks |
|---|---|---|
| ToolsArena Contrast Checker | Manual (per pair) | Exact ratio + AA/AAA |
| axe DevTools (browser ext) | Automated (whole page) | All text elements |
| Lighthouse (Chrome DevTools) | Automated audit | Contrast + other a11y |
| Stark (Figma plugin) | Design phase | Check during design |
How to Use the Tool (Step by Step)
- 1
Open the Checker
Navigate to Color Contrast Checker on ToolsArena.
- 2
Enter Colors
Input your text color and background color (hex, RGB, or HSL).
- 3
View Results
See the contrast ratio and WCAG AA/AAA pass/fail for normal and large text.
- 4
Adjust and Fix
Tweak colors until you achieve the required contrast level.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?+−
4.5:1 for normal text (under 18px). 3:1 for large text (18px+ or 14px bold+). 3:1 for UI components like buttons, form borders, and icons.
What is the minimum contrast for placeholder text?+−
Placeholder text in form inputs should also meet 4.5:1 against the input background. Many designs use light gray placeholders that fail this — use #767676 minimum on white backgrounds.
Does contrast ratio apply to images?+−
WCAG contrast requirements apply to text and UI components, not photographs. However, text overlaid on images must meet contrast requirements — use dark overlays or text shadows to ensure readability.
Why does my brand blue fail contrast?+−
Many brand blues (#3B82F6, #2196F3) have contrast ratios of 3-4:1 on white — passing for large text but failing for body text. Solution: use the brand blue for headings/buttons and a darker variant (#1D4ED8, #1565C0) for body text.
Should I avoid pure black and white?+−
Pure black (#000) on pure white (#FFF) is 21:1 — technically perfect but causes eye strain, especially on screens. Use off-black (#0F172A) and off-white (#F8FAFC) for a comfortable ~16:1 ratio.
Is this tool free?+−
Yes. Check unlimited color combinations in your browser. No data sent anywhere.
Check Color Contrast — WCAG AA & AAA
Enter text and background colors to verify accessibility compliance.
Open Contrast Checker →Related Guides
Color Palette Generator Guide
Learn color theory, palette types, accessibility contrast rules, and how to generate harmonious color palettes for web design, branding, and UI.
Hex to RGB Converter Guide
Convert between Hex, RGB, RGBA, HSL, HSV, and oklch color formats. Understand color models, CSS color syntax, opacity handling, and when to use each format.
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.