WCAG 2.2 - Success Criterion
1.4.3 Contrast (Minimum)
Description
The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1 against their background. Large text - defined as 18pt (approximately 24px) or 14pt bold (approximately 18.67px bold) or larger - requires a lower minimum ratio of 3:1. Sufficient contrast is essential for users with low vision, color deficiencies, or those viewing screens in bright ambient light conditions.
How To Test
- Identify text throughout the page, including body text, headings, links, button labels, form labels, placeholder text, and error messages.
- Use a color contrast checking tool (such as the WebAIM Contrast Checker or browser developer tools) to measure the contrast ratio of text against its background.
- Verify normal-sized text achieves at least 4.5:1 contrast ratio.
- Verify large text (18pt or 14pt bold and larger) achieves at least 3:1 contrast ratio.
- Check text that appears on images or gradient backgrounds, testing the worst-case background color under the text.
- Check placeholder text in form inputs, which is often styled with insufficient contrast.
- Confirm text in disabled controls is exempt, but note that decorative text and logo text are also exempt.
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo
This text uses light gray color on white background - very difficult to read:
Article heading
This body text is hard to read for users with low vision or in bright environments. The light grey color barely distinguishes itself from the white background, making it difficult to read at normal viewing distances.
This text uses dark gray color on white background - clearly readable:
Article heading
This body text is easy to read at adequate contrast. The dark gray has sufficient contrast against the white background, making it accessible for users with low vision, color blindness, or viewing in bright light.
Code
Form input with light border on light background - barely distinguishable:
Form input with dark border on light background - clearly visible:
Code
Button with light text on light background - text is hard to see:
The button label is light gray on a light background - insufficient contrast for users with low vision.
Button with dark text on light background - text is clearly readable:
The button label is dark gray on a light background - provides sufficient contrast for users with low vision.
Code
Placeholder text using #A8A8A8 on white — contrast ratio 2.37:1 (fails 4.5:1). Found in 10 real-world audits across payment forms and search fields.
Ratio: 2.37:1 — placeholder text is nearly invisible to users with low vision.
Placeholder text using #767676 on white — contrast ratio 4.54:1 (passes 4.5:1). Visible labels are also provided.
Ratio: 4.54:1 — #767676 is the lightest gray that passes on white.
Code
Real branded color combinations that failed audits. Each shows the exact hex values found:
All fail the 4.5:1 minimum for normal text.
The same branding with adjusted colors to meet 4.5:1:
Minor color adjustments maintain brand feel while meeting accessibility requirements.
Code
Fail Explanation
A failure occurs when text does not meet the minimum contrast ratio against its background color. Common failures include light grey text on a white background, muted brand-colored text that blends into its background, placeholder text in form fields that falls below the threshold, and text overlaid on images without a sufficiently opaque background. Users with low vision who do not use a screen reader rely on sufficient contrast to read text, and insufficient contrast can make content effectively unreadable.
Pass Explanation
A passing implementation ensures that all text meets or exceeds the required contrast ratio. This is verified by calculating the relative luminance of the foreground and background colors using the WCAG contrast ratio formula. Normal text achieves at least 4.5:1 and large text achieves at least 3:1. Decorative text that conveys no information and text that is part of a logo or brand name is exempt from this requirement.
Notes
Placeholder text in <input> elements is frequently a source of failure because it is often styled in grey to visually distinguish it from entered values, but must still meet the 4.5:1 minimum. Note that this criterion covers text contrast only; contrast requirements for user interface components and graphical objects are covered by 1.4.11 Non-text Contrast.
Techniques
WCAG techniques used in this demo: G17, G18, G156, F83, C15
Suggested Solutions & References
Curated from 77 real-world audit findings and official WCAG guidance.
Official W3C / WAI
- Understanding SC 1.4.3: Contrast (Minimum)
- Technique G18: Ensuring 4.5:1 contrast for text
- Technique G17: Ensuring 7:1 contrast for enhanced