WCAG 1.4.3: Contrast (Minimum)
Text and images of text must have a contrast ratio of at least 4.5:1 against their background. Large text (18pt or 14pt bold) requires a minimum of 3:1. This ensures text is readable for users with low vision or color deficiencies.
What is WCAG 1.4.3 Contrast (Minimum)?
WCAG 1.4.3 Contrast (Minimum) is a Level AA web accessibility success criterion under the Perceivable principle. Text and images of text must have a contrast ratio of at least 4.5:1 against their background. Large text (18pt or 14pt bold) requires a minimum of 3:1. This ensures text is readable for users with low vision or color deficiencies. Common failures include light gray text on white backgrounds (e.g., #999999 on #ffffff = 2.85:1) and placeholder text with insufficient contrast. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Use a color contrast checker tool to measure foreground/background ratios
- ✓ Check all text colors against their backgrounds, including on images
- ✓ Verify placeholder text in form fields meets contrast requirements
- ✓ Check text over gradient backgrounds at the lowest contrast point
- ✓ Test with different browser zoom levels (up to 200%)
Common Failures
- ✗ Light gray text on white backgrounds (e.g., #999999 on #ffffff = 2.85:1)
- ✗ Placeholder text with insufficient contrast
- ✗ Text overlaid on images without a solid background or overlay
- ✗ Low contrast in disabled/inactive states (which are technically exempt but still an issue)
- ✗ Contrast that passes on desktop but fails on mobile due to different rendering
✓ Good Example
<!-- Good contrast: #374151 on #ffffff = 10.69:1 --> <p style="color: #374151; background: #ffffff;"> This text has excellent contrast. </p> <!-- Large text: #6b7280 on #ffffff = 5.03:1 (passes 3:1 for large text) --> <h1 style="color: #6b7280; background: #ffffff; font-size: 24px;"> Large heading with adequate contrast </h1>
Normal text uses a dark gray (#374151) with a 10.69:1 ratio, well above the 4.5:1 minimum. The large heading uses a lighter gray that still passes the 3:1 ratio required for large text.
✗ Bad Example
<!-- Insufficient: #9ca3af on #ffffff = 2.92:1 --> <p style="color: #9ca3af; background: #ffffff;"> This text is too light to read comfortably. </p> <!-- Placeholder with poor contrast --> <input placeholder="Enter email" style="color: #d1d5db;">
The text has only 2.92:1 contrast, well below the 4.5:1 minimum. The placeholder text is even lighter, making it very difficult for many users to read.
Test Your Site for 1.4.3 Compliance
Use our free accessibility tools to check your website against WCAG 1.4.3.
Open Testing Tool