Color Contrast Accessibility: WCAG Ratios and How to Fix Failures
Low color contrast is one of the most common WCAG failures and one of the easiest to detect automatically. Here are the exact ratios you need and practical ways to hit them without abandoning your brand.
Contrast is the relationship between the luminance of your text (or UI element) and its background. Too little contrast and the content becomes hard or impossible to read for people with low vision, color vision deficiency, or anyone on a glary screen. It's also one of the top issues plaintiff firms cite, because it's trivially easy to detect.
The WCAG contrast ratios you need
- Normal text: at least 4.5:1 (Level AA).
- Large text (18pt / 24px, or 14pt / 18.66px bold): at least 3:1 (Level AA).
- UI components and meaningful graphics (icons, borders, focus indicators): at least 3:1.
- Level AAA raises text to 7:1 (and 4.5:1 for large text) if you need a higher bar.
How to measure contrast
Use a contrast checker — WebAIM's is the best known — by entering the foreground and background hex values. Browser dev tools also show the contrast ratio when you inspect a text element, and accessibility scanners flag every failing pair across a page automatically.
What counts (and what doesn't)
- Logos and incidental/disabled elements are exempt from the contrast requirement.
- Text over an image or gradient must meet the ratio against the actual pixels behind it.
- Placeholder text counts — faint gray placeholders are a frequent failure.
How to fix failing contrast without ruining your brand
- Darken text on light backgrounds (or lighten text on dark) while keeping the same hue — checkers suggest the nearest passing color.
- Reserve very light brand tints for large headings or non-text accents, not body copy.
- Add a solid or semi-transparent scrim behind text placed over images.
- Increase size or weight to qualify for the easier 3:1 large-text threshold.
- Define accessible color tokens once in your design system so every component inherits them.
Contrast is fully machine-detectable, so there's no excuse to ship failures — and no reason a quick scan can't clear the entire category.
Run a free accessibilitywebsite.com scan to get every failing text and UI color pair on your site, with the measured ratio and the threshold it missed.
Frequently asked questions
- What is the minimum color contrast ratio for WCAG AA?
- 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold), and 3:1 for meaningful UI components and graphics.
- How do I check my website's color contrast?
- Enter your foreground and background colors into a checker like WebAIM's, inspect text in browser dev tools, or run an automated accessibility scan that flags every failing pair on the page.
- Does color contrast apply to buttons and icons?
- Yes. Meaningful non-text UI components such as button borders, icons, and focus indicators must meet a 3:1 contrast ratio against adjacent colors.
See where your site stands — free
Run an instant WCAG 2.2 AA scan and get a severity-ranked report with AI fix suggestions in seconds. No overlay, no false promises.