Color · WCAG 2.0 Level AA
Elements must meet minimum color contrast ratio thresholds
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.
What it means
The color-contrast rule flags elements that fail this check. It maps to WCAG success criterion 1.4.3.
Who it affects
People with low vision or color vision deficiencies, and anyone reading in bright light.
How to fix it
Darken the text or lighten the background until normal text reaches 4.5:1 and large text (24px, or 18.66px bold) reaches 3:1. Check hover, focus and placeholder states too.
/* #767676 on white is 4.54:1 */
.note { color: #595959; background: #ffffff; }Check it on your site
Run a free scan. If this rule fails, the results list the affected elements. Deque, which maintains axe-core, also documents this rule in detail: Deque University: color-contrast.
Quick answers
What does the axe rule "color-contrast" check?
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.
How do I fix "Elements must meet minimum color contrast ratio thresholds"?
Darken the text or lighten the background until normal text reaches 4.5:1 and large text (24px, or 18.66px bold) reaches 3:1. Check hover, focus and placeholder states too.
Who is affected by color-contrast failures?
People with low vision or color vision deficiencies, and anyone reading in bright light.
Automated accessibility scan. Results are informational and may not identify every accessibility issue. This service is not legal advice, a compliance certification, or a substitute for comprehensive manual accessibility testing.