Success Criterion 1.4.3: Contrast (Minimum)
Official W3C Definition
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Why This Criterion Matters
Low contrast text is difficult or impossible to read for people with visual impairments, including those with low vision, color blindness, or age-related vision loss. Adequate contrast ensures text is readable by the widest possible audience.
Required Contrast Ratios
| Text Type | Minimum Ratio | Definition |
|---|---|---|
| Normal Text | 4.5:1 | Text smaller than 18pt (24px) or 14pt (18.66px) bold |
| Large Text | 3:1 | Text at least 18pt (24px) or 14pt (18.66px) bold |
| Incidental | None | Disabled controls, decorative text, logos |
Who Benefits
Low Vision Users
Adequate contrast makes text readable without magnification.
Color Blind Users
High contrast helps distinguish text regardless of color perception.
Older Adults
Age-related vision changes make low contrast text harder to read.
Users in Bright Light
Good contrast improves readability in challenging lighting conditions.
How to Meet This Criterion
Contrast Examples
Black on White (21:1)
Dark Gray on Light Gray (15:1)
Dark Teal on White (10.2:1)
White on Blue (7.0:1)
Gray on White (2.8:1) - FAIL
Yellow on White (1.5:1) - FAIL
Light Blue on White (2.3:1) - FAIL
Gray on Gray (1.5:1) - FAIL
CSS Implementation
:root {
/* High contrast color palette */
--text-primary: #1a1a1a; /* Dark gray text */
--text-secondary: #4a4a4a; /* Medium gray text */
--bg-primary: #ffffff; /* White background */
--bg-secondary: #f5f5f5; /* Light gray background */
--link-color: #0066cc; /* Blue links (4.5:1 on white) */
--error-color: #c62828; /* Red errors (6.5:1 on white) */
}
body {
color: var(--text-primary);
background-color: var(--bg-primary);
}
a {
color: var(--link-color);
}
.error-message {
color: var(--error-color);
}Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Light gray text on white | Very common, often below 3:1 | Use darker gray (#595959 or darker) |
| Placeholder text with low contrast | Form hints unreadable | Ensure 4.5:1 for placeholder text |
| Text over images without overlay | Background varies, contrast inconsistent | Add semi-transparent overlay behind text |
| Brand colors that don't meet ratios | Consistency vs. accessibility conflict | Adjust shades or use for decoration only |
| Disabled buttons too low contrast | Users can't read disabled options | Disabled state is exempt, but consider readability |
Testing Methods
Contrast Checking Tools
- WebAIM Contrast Checker
- Color Contrast Checker
- Browser DevTools (Lighthouse accessibility audit)
- WAVE Accessibility Tool
- axe DevTools
Testing Steps
- Identify all text: Headers, body text, links, buttons, form labels
- Check each combination: Use a contrast checker tool
- Verify large text: Confirm text size qualifies for 3:1 ratio
- Test hover/focus states: Ensure contrast maintained on interaction
- Check text over images: Verify contrast at all points
Related Criteria
1.4.1 Use of Color
Color not the only means of conveying information
1.1.1 Non-text Content
Images of text need alternatives