Recently I wrote that error messages need more than red: they need an icon, a clear description and a format suggestion.
Contrast comes before all of that. If your colors don't meet the minimum contrast requirements, the message is still invisible, just for a different reason.
WCAG defines two separate thresholds:
- 4.5:1 for text, such as titles, body copy and error messages (WCAG 1.4.3)
- 3:1 for non-text elements, such as icons, borders and UI components (WCAG 1.4.11)
Many teams miss that these rules apply to all feedback states, not only errors. Warning, success and info components fail just as often, and nobody checks them.
The image above puts the four states side by side, failing and passing, with the real ratios for both text and icons.
If your design system doesn't validate contrast per state, audit it.
WCAG 2.1 criteria referenced:
- 1.4.3 Contrast (Minimum): text and images of text, 4.5:1 (AA)
- 1.4.11 Non-text Contrast: UI components and icons, 3:1 (AA)