About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in age-related vision changes, bright sunlight washing out screens, and cheap monitors with poor color reproduction, and suddenly your carefully designed color scheme does not work for a significant chunk of your audience.
Color contrast is not just an accessibility compliance checkbox. It directly affects whether people can read your content. Low contrast text is the single most common accessibility failure on the web, affecting an estimated 86% of home pages according to the WebAIM Million study.
The Contrast Checker tests your foreground and background color combinations against WCAG 2.1 standards and tells you instantly whether they pass or fail at each level.
Understanding WCAG Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background. The ratio is calculated from the relative luminance of both colors, on a scale from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, black on white).
WCAG AA (the minimum standard most sites should meet): - Normal text (under 18pt or 14pt bold): minimum 4.5:1 contrast ratio - Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast ratio - UI components and graphical objects: minimum 3:1 contrast ratio
WCAG AAA (the enhanced standard for optimal readability): - Normal text: minimum 7:1 contrast ratio - Large text: minimum 4.5:1 contrast ratio
To put these numbers in context: dark gray (#333333) on white (#FFFFFF) has a contrast ratio of 12.6:1, which passes both AA and AAA. Medium gray (#767676) on white has exactly 4.5:1, which barely passes AA for normal text but fails AAA. Light gray (#999999) on white is 2.8:1, which fails both levels.
Use the Contrast Checker to test any color combination. Enter your foreground and background colors, and it shows the exact ratio and whether it passes AA, AAA, or neither.
Common Contrast Failures (and How to Fix Them)
Light gray text on white backgrounds. This is the most common failure. Designers use light gray for secondary text, placeholder text, and disabled states. The fix: darken the gray until it passes. #767676 on white is the lightest gray that passes AA for normal text.
Colored text on colored backgrounds. A blue button with white text usually passes. A light blue button with white text usually fails. The fix: test every color combination, not just your primary palette.
Text over images. Text directly on a photograph often fails because parts of the image are close to the text color. The fix: add a semi-transparent overlay between the image and text. rgba(0, 0, 0, 0.6) over the image with white text on top typically works.
Gradient backgrounds. The contrast ratio varies across the gradient. If text spans the gradient, check the ratio at the lightest point, not just the average. The worst-case contrast must still pass.
Focus indicators. When a user tabs to a link or button, the focus ring must have at least 3:1 contrast against both the component background and the surrounding page. Browser default focus rings usually pass, but custom focus styles often fail.
Placeholder text. Input field placeholder text is notoriously low contrast. WCAG 2.1 does not require placeholders to meet contrast minimums (they are not "real" text), but making them readable is still good UX. Use a minimum of 4.5:1 for placeholder text.
**Light gray text on white backgrounds.** This is the most common failure.
Designing for Color Blindness
Contrast ratios address luminance differences, but color blindness is about hue perception. Someone with deuteranopia (the most common type of color blindness) can distinguish light from dark but may not see the difference between red and green.
This means your interface cannot rely on color alone to convey information. The classic example: a red/green status indicator with no other visual cue is useless for 8% of male users.
Add redundant cues. Use icons, patterns, or text labels alongside colors. A green checkmark with the word "Passed" works for everyone. A green dot alone does not.
Test with simulation. The Color Blind Simulator shows how your design looks through different types of color vision deficiency: protanopia (no red), deuteranopia (no green), tritanopia (no blue), and achromatopsia (no color). Run your key screens through the simulator and check that all information is still distinguishable.
Choose distinguishable pairs. Blue and orange have good contrast across all forms of color blindness. Red and green do not. If you must use both red and green, make one significantly lighter or darker than the other so they remain distinguishable by luminance.
Charts and graphs are where color blindness causes the most problems. Use different patterns (solid, dashed, dotted) in addition to colors. Add direct labels to data series instead of relying on a color-coded legend.
The Color Picker helps you explore colors and find alternatives that work for everyone.
Automated Accessibility Testing
Manual contrast checking is necessary for custom designs, but automated tools catch the majority of issues across entire pages.
Browser DevTools: Chrome and Firefox both show contrast ratios in their color picker. Chrome also flags contrast issues in the Accessibility panel. This is the fastest way to check individual elements.
axe DevTools (free browser extension): Scans the entire page and reports all WCAG violations, including contrast failures. It shows exactly which elements fail and what the ratio is.
Lighthouse (built into Chrome): The accessibility audit includes contrast checks. It gives you a score out of 100 and lists specific failing elements.
Pa11y (command-line tool): Runs WCAG checks on any URL from the terminal. Useful for CI/CD pipelines: fail the build if accessibility issues are found.
The workflow for a new design:
- Design your color palette and test key combinations in the Contrast Checker
- Build the page
- Run axe DevTools to catch anything you missed
- Simulate color blindness with the Color Blind Simulator for the critical screens
- Fix issues and re-test
Accessibility is cheaper to build in from the start than to retrofit later. Checking contrast ratios during the design phase saves hours of rework after the build is done.
Manual contrast checking is necessary for custom designs, but automated tools catch the majority of issues across entire pages.
Legal Requirements: Why This Matters Beyond Good UX
Accessibility is not just nice to have. In many jurisdictions, it is legally required.
European Accessibility Act (EAA): Takes effect June 28, 2025. Applies to e-commerce sites, banking services, e-books, and transport services serving EU customers. Non-compliance can result in fines.
Americans with Disabilities Act (ADA): US courts have consistently ruled that websites are "places of public accommodation." Thousands of lawsuits are filed annually against sites with accessibility barriers.
EN 301 549: The European standard for ICT accessibility, referencing WCAG 2.1 Level AA. Required for public sector websites in the EU and increasingly applied to private sector sites.
Section 508 (US): Requires federal agencies and their contractors to make electronic and information technology accessible. WCAG 2.0 AA is the referenced standard.
The common thread: WCAG 2.1 Level AA is the standard that nearly all regulations reference. Meeting AA contrast requirements (4.5:1 for normal text, 3:1 for large text) satisfies the contrast aspect of all these regulations.
This is not about fear of lawsuits. It is about serving your full audience. But having the legal framework on your side makes the business case easier to make to stakeholders who care more about risk than user experience.
FAQ
What is the minimum contrast ratio for WCAG AA?
4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These are the minimums. Higher contrast is always better for readability.
Does contrast ratio apply to images and icons?
WCAG 2.1 requires meaningful UI components (buttons, form controls, icons that convey information) to have at least 3:1 contrast against their background. Decorative images and icons that have a text label do not need to meet contrast requirements.
Can I use color alone to indicate errors in forms?
No. WCAG 1.4.1 says color cannot be the only means of conveying information. A red border on an invalid field must be accompanied by an error message, an icon, or another non-color indicator. This ensures users who cannot perceive the color change still understand the error.
How do I check contrast on a gradient or image background?
Check the contrast at the point where the background is closest to the text color (the worst-case scenario). For images, this usually means the lightest area behind dark text or the darkest area behind light text. If any part of the text area fails, the whole element fails.
### What is the minimum contrast ratio for WCAG AA.
CSS Layout Tools: Grid, Flexbox, Gradients and Shadows
A practical guide to CSS Grid, Flexbox, gradients, and box shadows. Learn when to use each technique and how to generate CSS code quickly.
Edit Images in Your Browser: Resize, Compress, Convert, and Extract Metadata
Learn how to handle common image editing tasks directly in your browser without installing software - resize, compress, convert formats, and inspect metadata.
CSS Generators for Modern Web Design: Gradients, Flexbox, Grid, and Shadows
Learn how to use CSS generators to quickly create gradients, flexbox layouts, grid systems, and box shadows - with the CSS code ready to copy into your project.