Communicating state with color alone
Marking errors red and successes green with no other cue fails users with color vision deficiency, and screen reader users entirely.
The wrong way
A row of status pills distinguished only by color — no icon, no text label, no shape variation.
<span
className="statusPill"
style={{ backgroundColor: status === 'success' ? 'green' : 'red' }}
/>Why
Roughly 8% of men and 0.5% of women have some form of color vision deficiency, and screen reader users get no color information at all. Color is a fine *secondary* signal, but it can never be the *only* signal. WCAG 1.4.1 (Use of Color) is a Level A requirement — the most basic tier. The fix is layering: keep the color, add an icon, add visible text, and you've helped every audience without losing the at-a-glance scan.
The right way
Pair color with at least one redundant cue — icon, text label, or shape. Use the semantic feedback tokens so contrast is already validated.
<span className={`statusPill ${styles[status]}`}>
{status === 'success' ? <CheckIcon /> : <AlertIcon />}
{status === 'success' ? 'Approved' : 'Rejected'}
</span>