- Success Criterion 1.4.3
- Conformance level AA
1.4.3 · Contrast (Minimum)
Lesson overview · Contrast (Minimum)
In plain language
Normal text must meet at least 4.5:1 contrast against its background, and large text must meet at least 3:1.
Who it affects
Low-vision and older readers, plus anyone viewing a dim or sunlit screen.
How to check
Use a contrast checker (e.g., Colour Contrast Analyser) on body text, placeholders, links, buttons — in every state: normal, hover, focus, selected.
Common misconception
Passing an automated contrast checker on the design file doesn't guarantee compliance. Real states like placeholder text, hover, disabled-looking-but-active buttons, and dark mode are the ones that usually fail.
Learn more
Scenarios in this lesson
- Text Color Set Without a Matching Background Color
- Text Placed Directly Over a Photo With No Solid Backing
- Body Text Contrast That Falls Below the 4.5:1 Minimum
- Large Heading Text That Still Falls Below 3:1 Contrast
- Placeholder Text With Contrast Too Low to Read Easily
- Text on a Gradient Background Dropping Below Contrast Ratio
- Semi-Transparent Text That Fails the Contrast Minimum
- Active Button Styled to Look Disabled With Grey-on-Grey Text
- Link Text With Contrast Too Low Against the Page Background
- Text Overlaid on Video With Contrast That Drops Too Low
- Text Baked Into an Image Falling Below Contrast Minimum
- Hover or Focus State Text That Fails Contrast Rules
- Selected Tab or Item Text Failing the Contrast Minimum
- Error or Success Message Text With Too-Low Contrast
- Dark Mode Theme Shipped With Untested Contrast Combinations
- Low-Contrast Text Hiding in Dropdowns, Toasts, and Chips
- Custom Video Player Captions With Too-Low Contrast
- Thin Font Weight Text That Fails Contrast at Small Sizes