Developer guide

Error Message Color Contrast

Check error text, icons, and surfaces so validation feedback remains readable.

Short answer

Error feedback must remain readable and understandable without relying on red alone.

When this applies

Error text, icons, field borders, and message surfaces each need to work in their actual context. The message should state the problem and the next action in text.

Practical review steps

  1. Check error text against the message background.
  2. Add descriptive text or an icon instead of communicating an error only by color.
  3. Test the field, summary, and focus destination together.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.