Color Contrast for Readability
Proper contrast ensures your content is readable for everyone, including people with visual impairments. Learn the requirements and test your colors in real-time.
Interactive Contrast Checker
WCAG Contrast Requirements
Large Text
Minimum contrast for large text (18pt/24px bold or 24pt/32px regular). This is the baseline for accessibility compliance.
Normal Text
Minimum contrast for normal-sized text. Required for ADA compliance and most accessibility standards. This should be your default target.
Large Text
Enhanced contrast for large text. Recommended for healthcare, government, and applications prioritizing maximum accessibility.
Normal Text
Enhanced contrast for normal text. The gold standard for accessibility. Harder to achieve but ensures readability for everyone.
How Text Size Affects Contrast Requirements
Larger text is easier to read at lower contrast ratios. WCAG defines "large text" as 18pt bold (24px) or 24pt regular (32px) and above.
Large Text (Needs 3:1 AA)
Normal Text (Needs 4.5:1 AA)
Common Contrast Mistakes & Fixes
This text has a contrast ratio of only 1.6:1. It's nearly impossible to read for people with low vision or in bright sunlight.
Problem:
Fails all WCAG levels. Common mistake when designers want "subtle" secondary text. Ratio: 1.6:1
This text has a contrast ratio of 5.7:1. It's comfortable to read while still appearing lighter than primary text for visual hierarchy.
Solution:
Passes AA and AAA for large text. Perfect for secondary text that maintains hierarchy without sacrificing accessibility. Ratio: 5.7:1
Problem:
Color-blind users can't distinguish these. Never rely on color alone to convey information.
Solution:
Icons and labels provide meaning beyond color. Everyone can understand the status regardless of color perception.
This text may have good contrast in some areas but poor contrast in others. Gradients make contrast inconsistent.
Problem:
Contrast varies across the gradient. Some areas pass, others fail. Inconsistent readability.
Semi-transparent black overlay ensures consistent contrast across the entire background, regardless of the gradient.
Solution:
Overlay creates consistent contrast. Works on images and gradients. Minimum 60% opacity recommended.
While this has maximum contrast (21:1), the harshness can cause eye strain during extended reading. Too much contrast can be as problematic as too little.
Problem:
Maximum contrast can cause eye strain and halation (light bleeding). Can be harsh for dyslexic readers.
Slightly softer colors reduce eye strain while maintaining excellent contrast (17:1). This is easier on the eyes for long-form reading while remaining fully accessible.
Solution:
Softer contrast (still 17:1) reduces eye strain. Better for long-form content. Still exceeds AAA requirements.
Tools & Testing Methods
Browser DevTools
Chrome and Firefox have built-in contrast checkers. Right-click any text element, inspect, and look for the contrast ratio in the color picker.
Learn more →Figma Plugins
Plugins like "Stark" and "A11y - Color Contrast Checker" check your designs before development. Essential for design teams.
Explore plugins →WebAIM Contrast Checker
Simple, fast online tool. Enter two colors and instantly see if they pass WCAG requirements. Great for quick checks.
Try it now →Automated Testing
Tools like axe, Lighthouse, and WAVE scan entire pages for contrast issues. Include these in your CI/CD pipeline.
View tools →Real Device Testing
Test on actual phones in sunlight. Contrast that works indoors may fail outdoors. Always validate in real conditions.
Best practices →Color Blindness Simulators
Sim Daltonism, Color Oracle, and browser extensions show how your design looks to color-blind users. Essential testing step.
Download tools →