What are the WCAG contrast requirements, and why is 'color alone' a failure even when contrast passes?
The AA ratio thresholds and the separate 'use of color' requirement most teams miss.
Two distinct requirements, often conflated. (1) CONTRAST (WCAG 1.4.3, AA): normal text needs a contrast ratio of at least 4.5:1 against its background; large text (≈18.66px bold or 24px regular) needs 3:1; and non-text UI — icons, input borders, focus rings, the boundary of a control — needs 3:1 (1.4.11). AAA raises text to 7:1. The ratio is computed from relative luminance, so light-grey-on-white placeholder text is a frequent failure. (2) USE OF COLOR (1.4.1): color must not be the ONLY means of conveying information. A form field that turns red to signal an error, a required field marked only by red text, a chart whose series are distinguished only by hue, a link identified only by color inside body text — all fail, because colour-blind users and screen-reader users get nothing. The fix is a redundant cue: an error icon and text ('Email is required'), an asterisk plus a legend, patterns or direct labels on chart series, underlines on inline links. So a design can pass contrast and still fail on colour-alone, and vice versa — you must check both. Test with a contrast checker on real foreground/background pairs (including hover/disabled states), not just the base theme.
Reviewing a color palette; catching red-only errors and hue-only charts even when contrast is fine.
<!-- Contrast: light grey on white fails 4.5:1 for normal text -->
<p style="color:#bbb; background:#fff">Hard to read</p>
<!-- Use of color: red alone conveys 'error' -> fails 1.4.1 -->
<input class="error" aria-label="Email"> <!-- only a red border -->
<!-- Fixed: redundant text + icon, not color alone -->
<label for="email">Email</label>
<input id="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">⚠ Enter a valid email address</p>