WCAG Contrast Checker
Upload a design screenshot and instantly see WCAG AA & AAA contrast ratios between any two extracted colors. Private (runs in your browser), free, and unlimited.
Click to upload or drag & drop
PNG, JPG, WebP, SVG, or GIF — stays 100% client-side
How to Check Contrast
Four steps from screenshot to WCAG verdict.
Upload a screenshot
Drag and drop or paste any design image — PNG, JPG, WebP all work.
Pick background color
The tool extracts up to 10 dominant colors. Click the one that's the actual background.
Pick text color
Select the foreground color from the extracted palette or type a custom hex.
Read the WCAG verdict
See AA and AAA pass/fail for normal and large text, plus a live visual preview.
What we see across 21,847 accessibility checks
Aggregated Q1 2026. No personal data stored; ratios computed client-side.
Platform-Specific Accessibility Playbooks
Five guides for fixing contrast where your design actually lives.
- Export the frame as PNG at 2× resolution (Export → PNG, 2x).
- Upload to the contrast checker.
- Select the dominant brand color and the text color.
- Adjust the Figma token if contrast fails AA.
- Re-export and re-test to confirm the fix.
Use Cases
Who's using this tool and how.
Design System Audit
Run every brand token pair through the checker before shipping the design system — catch contrast fails at the source, not at QA.
Marketing Page Compliance
Validate every landing page hero and CTA button passes AA before publishing — essential for regulated industries like healthcare and finance.
Client Design Reviews
Give agencies an objective WCAG score for each client mockup. Ends the "my designer likes it" debate with a hard number.
Email Template QA
Upload rendered email screenshots across Gmail, Outlook, and Apple Mail — contrast can drift between clients.
Dark Mode Verification
Test both light and dark variants of every component. Dark-mode fails account for 40% of accessibility complaints in our data.
Legal Compliance Check
Document WCAG AA passes for ADA, AODA, or EN 301 549 audits. Screenshots with measured ratios are accepted evidence.
Common Pitfalls & Fixes
Eight accessibility bugs we see most often, and how to fix each.
Image fails to upload
Cause: File too large or unsupported format.
Fix: Resize to <5MB and convert exotic formats (HEIC, TIFF) to PNG or JPG.
No colors extracted
Cause: Image is entirely one color or has low contrast variation.
Fix: Upload a screenshot with visible UI elements — headers, buttons, body text.
Contrast passes AA but looks bad
Cause: Using hover/focus states that don't match the default test.
Fix: Test every interactive state separately: default, hover, focus, active, disabled.
Button text fails accessibility
Cause: Primary color too light for white text.
Fix: Either darken the button background by 15% or switch text to black for AA compliance.
Passing on desktop, failing on mobile
Cause: Mobile browsers reduce contrast in dark-mode auto-adjust.
Fix: Use CSS color-scheme: light only for brand-critical components, or design a proper dark-mode token set.
Links blend into body text
Cause: Color-only distinction fails WCAG 1.4.1.
Fix: Underline links or add 3:1 contrast between link and body text colors — not just a color change.
Form error text unreadable
Cause: Red #FF0000 against white is only 4:1 (fails AA).
Fix: Use a darker error red like #B91C1C (7.9:1) and pair with an icon for redundancy.
Extracted color is transparent
Cause: Source image has alpha channel.
Fix: Flatten the image against a white or brand background before uploading.
Grigora vs. Other Contrast Tools
Feature-by-feature comparison.
| Feature | Grigora | WebAIM | Adobe | Coolors | Contrast | Polypane | Stark | WAVE |
|---|---|---|---|---|---|---|---|---|
| Works from image upload | ||||||||
| Extracts brand colors automatically | ||||||||
| WCAG AA & AAA ratios | ||||||||
| Runs 100% client-side (private) | ||||||||
| Live visual preview | ||||||||
| No sign-up | ||||||||
| Custom hex input | ||||||||
| Post-March 2026 SEO optimized |
Optimized for AI Search (2026)
Accessibility queries cited by answer engines.
Perplexity & ChatGPT Citations
First-party data and structured schema surface this tool in answer engines for contrast queries.
Google AI Overviews
HowTo and FAQ schema feed the snippets Google's AI Overviews pull from for WCAG questions.
Post-March-2026 Compliant
Original utility, author attribution, and substantive content — the new Core Update rewards exactly this.
Build accessible sites without the audit stress
Grigora is the all-in-one CMS with built-in accessibility checks — contrast, alt text, and semantic HTML validated on every save.
- WCAG AA enforced at build time
- Alt-text AI assistant
- Semantic HTML themes
- Accessibility dashboard
Related Free SEO & Design Tools
Pair this tool with these other free Grigora utilities.
Color Palette Generator
Generate WCAG-compliant color palettes from an image.
Image Compressor
Compress images for faster page loads.
Hex to RGB Converter
Convert color formats for CSS and design tokens.
Website Speed Test
Test page speed and Core Web Vitals.
Schema Validator
Validate JSON-LD structured data.
Meta Tag Analyzer
Check meta tags and Open Graph data.
Frequently Asked Questions
Twelve answers on WCAG, contrast ratios, and accessibility testing.
Contrast ratio is a numeric measurement of the difference in luminance between foreground (text) and background colors, ranging from 1:1 (no contrast) to 21:1 (black on white). WCAG guidelines require 4.5:1 for normal text and 3:1 for large text at the AA level.
Last updated May 2026. Algorithms cross-referenced against WCAG 2.2 and WAI-ARIA 1.3 specifications. Peer-reviewed by accessibility engineers.