What is Color Contrast Ratio?
Color contrast ratio measures the difference in luminance between text and its background. WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
Why Color Contrast Ratio matters
Contrast ratio compares the luminance of text with its background on a scale from 1:1 (invisible) to 21:1 (black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) and for interface components such as input borders and icons. Low-contrast text is the single most common accessibility failure on the web because light grey on white and dim grey on dark look elegant in a design tool and unreadable on a phone in daylight.
The trap is opacity: a token like 'foreground at 50%' produces different ratios on different backgrounds and in dark and light themes, so the same class can pass in one place and fail in another. Test the actual rendered colours, and remember that thin fonts need more contrast than their ratio suggests.
Example
Text at reduced opacity, both themes:
#111827 at 50% on #f8f9fb → 3.4:1 fails AA (light theme)
#111827 at 65% on #f8f9fb → 5.4:1 passes
#e2e8f0 at 50% on #06080f → 4.5:1 borderline (dark theme)The same 50% token passes on the dark theme and fails on the light one.
Common mistakes
- •Muted grey labels and captions at 40–50% opacity.
- •Placeholder text used as the only label.
- •White text on light photos or gradients with no overlay.
How Webmatik checks it
The Color contrast indicators check reads Lighthouse's contrast audit on the rendered page and lists the failing elements; the UI/UX category's Color contrast check adds the AI vision reviewer's reading of the screenshot.
Check your own site
Free Accessibility Audit Tool
Contrast, tap targets, alt text, keyboard navigation — every failure with a plain-English fix.
Related UX terms
See how your website scores across SEO, GEO, performance, and more
Run a free audit