Color Contrast Analyzer
A professional-grade color contrast analyzer that goes beyond basic pass/fail checks. Measure luminance, evaluate against WCAG 2.2, scan entire URLs, and generate compliance-ready reports — all in your browser.
How the Analyzer Works
Pick foreground & background — hex, RGB, HSL, or color picker
Relative luminance calculated per WCAG sRGB formula
Ratio checked against AA (4.5:1) and AAA (7:1) thresholds
Pass/fail verdict + AI suggestions + exportable PDF report
Contrast Ratio Spectrum
What Passes and What Fails
The difference between 2.3:1 and 9.4:1 is the difference between a bounce and a conversion. Low-contrast text increases cognitive load — users with visual impairments may not be able to read it at all.
Checker vs Analyzer: What's the Difference?
| Feature | Basic Checker | This Analyzer |
|---|---|---|
| Single color pair | ✓ | ✓ |
| WCAG AA/AAA grading | ✓ | ✓ |
| Luminance breakdown | ✗ | ✓ — Lfg and Lbg individually |
| URL / full-page scan | ✗ | ✓ — crawls all visible text elements |
| APCA values | ✗ | ✓ — next-gen perceptual contrast |
| AI color suggestions | ✗ | ✓ — hue-preserving alternatives |
| PDF export report | ✗ | ✓ — compliance-ready documentation |
| Computed CSS resolution | ✗ | ✓ — handles variables, inheritance, cascade |
Contrast Ratio
Heading Preview
Body text rendered in your selected colors. This is how your content will look — check if it's comfortable to read at normal paragraph sizes.
12px caption · secondary information
URL Scanner
Scan any site for WCAG issues
Pick a seed color and get WCAG-compliant harmonies.
This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.
Contact Us