Instant Contrast Ratio Checker for Designers & Developers
WCAG Contrast Checker And Fixer
Test & adjust text–background color pairs for WCAG AA/AAA compliance—all in your browser.
How the Contrast Checker Works
Quickly verify and tune any text–background color combination in three simple steps:
- Pick your colors
Use the HEX input or the color-picker to set your text (foreground) and background hues. All changes happen instantly—in your browser, with no data ever uploaded. - View your ratio & WCAG status
The tool calculates the exact contrast ratio (e.g. 4.72 : 1) and displays Pass/Fail badges for WCAG AA/AAA in both normal and large-text scenarios. - Auto-fix or fine-tune
- Click Auto-Fix Text or Auto-Fix Background to automatically adjust lightness until you hit at least a 4.5 : 1 ratio.
- Or drag the lightness sliders to dial in the perfect balance manually, with live percentage feedback.
What Is Color Contrast?
Color contrast measures the relative luminance difference between two colors—typically text (foreground) and its background. Luminance is a perceptual metric of brightness, calculated from the RGB components of a color. The contrast ratio is defined as:
(L1 + 0.05) / (L2 + 0.05)
Where:
- L1 is the higher luminance of the two colors.
- L2 is the lower luminance.
Higher ratios mean greater separation between light and dark, making text easier to read.
WCAG Contrast Requirements
| WCAG Level | Normal Text (≥ 14 pt / 18.66 px) | Large Text (≥ 18 pt / 24 px) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
- AA is the minimum standard for most body text.
- AAA is a stricter level, often used for critical interfaces or people with low vision.
Running your colors through this checker ensures you meet these accessibility benchmarks right away.
Why Contrast Matters
Good color contrast isn’t just about aesthetics—it’s a fundamental requirement for accessibility, usability, and even your site’s performance:
- Accessibility & Legal Compliance
Meeting WCAG 2.1 contrast standards (4.5:1 for normal text, 3:1 for large text) is often mandated by law (ADA in the U.S., EN 301 549 in Europe, AODA in Canada). Failing to comply can expose your organization to complaints or legal risk. - Readability & User Experience
Low-contrast text forces users to strain their eyes, increasing bounce rates on your pages and reducing engagement. Clear contrast ensures everyone—especially older adults and people with low vision—can comfortably read your content. - SEO & Brand Perception
Search engines increasingly reward sites that prioritize accessibility. Plus, accessible design signals professionalism and inclusivity, strengthening user trust and brand loyalty.
Running your color choices through this checker helps you catch and correct contrast issues early—before they impact real users or your search rankings.
Understanding the Results Panel
Once you’ve set your foreground and background colors, the Results panel breaks down exactly how they measure up:
- Contrast Ratio
Displayed prominently at the top (e.g. 5.23 : 1), this number quantifies the luminance difference between your two colors. Higher is better—4.5 : 1 is the AA bar for normal text; 7 : 1 is the AAA bar. - Pass / Fail Badges
For each WCAG level, you’ll see a green Pass or red Fail indicator:- WCAG AA (Normal Text) – requires ≥ 4.5 : 1
- WCAG AAA (Normal Text) – requires ≥ 7 : 1
- WCAG AA (Large Text, ≥ 18 pt) – requires ≥ 3 : 1
- WCAG AAA (Large Text, ≥ 18 pt) – requires ≥ 4.5 : 1
- What Counts as “Large Text”?
Large text is defined in CSS terms as at least 18 pt (or 24 px) regular weight, or 14 pt (18.66 px) bold. These thresholds reflect how legibility improves with bigger type. - Live Preview
Above the ratio and badges, a dashed-outline preview box shows Sample Text rendered with your chosen colors—so you can instantly see how headings, paragraphs, or buttons will look at those contrast levels.
This panel gives you a clear, at-a-glance report of where your colors stand and guides you toward adjustments that meet both legal requirements and real-world usability.
Fixing Poor Contrast
When your colors fail to meet WCAG standards, use these tools to bring them into compliance:
- Auto-Fix Buttons
- Auto-Fix Text will lighten or darken your text color until it reaches at least a 4.5 : 1 ratio against the current background.
- Auto-Fix Background does the same for the background color, preserving your brand’s primary hue where possible.
- Manual Sliders
- Drag the Text Lightness or Background Lightness slider to fine-tune luminance by percentage.
- Each move updates the contrast ratio and Pass/Fail badges in real time, giving you precise control over tone.
- Pro Tip: Tweak Background Last
- It’s often best to adjust your background color after setting text contrast, since background changes affect all foreground elements globally.
- Use the smaller slider increments (1 %) for subtle adjustments, or the Auto-Fix button for a one-click solution.
With these repair tools at your fingertips, you can quickly iterate your palette—ensuring every headline, paragraph, button, and label stays legible and accessible.
Accessible Color Best Practices
- Don’t rely on color alone
Combine color with text labels, icons, or patterns. For example, use both a red border and an “Error” icon—so users who can’t see red still know something’s wrong. - Maintain a 4.5 : 1 minimum
Even if your design looks light and airy, ensure body text meets at least AA contrast. Reserve AAA (7 : 1) for critical UI elements like form labels and navigation links. - Test all UI states
Hover, focus, disabled, and visited states can have different colors. Run them through the checker to make sure buttons, links, and form fields stay compliant in every interaction. - Use semantic markup
HTML elements like<button>,<label>, and ARIA attributes enhance accessibility beyond color. Screen readers and keyboard users benefit from proper semantics. - Leverage accessible palettes
Consider building a companion “color-blind friendly” palette with distinct hues (blues, oranges, purples) that maintain contrast across both luminance and hue. - Automate in your workflow
Integrate contrast checks into design handoffs (Figma plugins, linting tools) so accessibility becomes a seamless part of your process—not an afterthought.
By pairing thoughtful design choices with this Contrast Checker, you’ll create interfaces that are both beautiful and usable for everyone.
Related MightyPaint Tools
- Color-Blindness Simulator – See how your images and UI appear to users with Protanopia, Deuteranopia, Tritanopia, or total color-blindness.
- Image Color Sampler – Hover-and-click to extract average HEX values from any photo.
- Interactive HTML Color Picker – Browse named web colors and click to copy their HEX or RGB codes.
- Shade & Tint Generator – Generate a full spectrum of lighter tints and darker shades from a single base color.
Use these in tandem to build, test, and refine a truly accessible color palette at every stage of your project.
Frequently Asked Questions
Q: Will my colors ever be uploaded or stored?
A: No. All calculations run locally in your browser. Your HEX values and any images remain on your device.
Q: Can I export the adjusted colors for my stylesheet?
A: While there’s no direct “export” yet, you can copy the HEX codes or use the sliders and auto-fix buttons to finalize values in your CSS or design tool.
Q: Why adjust background instead of text?
A: Changing the background last lets you preserve your primary brand text color and only tweak the backdrop for contrast, which affects all text globally.
Q: Does this support WCAG AAA for large text?
A: Yes—the panel shows pass/fail for both AA and AAA in normal and large text scenarios.
Q: What about dynamic states (hover, focus, disabled)?
A: You’ll need to plug each state’s color pair into the checker separately. Consider automating with our future Figma plugin or build-time linting.
Final Thoughts
Accessibility isn’t an afterthought—it’s the foundation of great design.
Use this WCAG Contrast Checker & Fixer every time you pick a new palette, set a button color, or style form labels. Pair it with our Color-Blindness Simulator and other MightyPaint tools to catch issues early, iterate quickly, and deliver interfaces that work for everyone.
Bookmark this page, share it with your team, and let us know what feature you’d like us to build next!