Color is never the only signal
Red for error, green for success, blue for links. Take the color away and ask what is left. If the answer is nothing, the state was never communicated.
Here is a form after a failed submit. The email field has turned red. Nothing else changed.
For about one in twelve men and one in two hundred women, red and the field's normal gray are close enough to miss. For anyone using a screen reader, the color is not announced at all. For anyone on a phone in sunlight, the red is a slightly warmer gray. For all of them, the form just refused to submit for no reason.
Color is a fine signal. It is a terrible only signal.
Take the color away
Here are four common states with the color removed. Decide, for each, whether you can still tell what is going on.
Email: name@example Color only
Email: name@example Enter an address like name@example.org Color plus text
Payment Shipping Color only (one has failed)
Payment: failed Shipping: on time Color plus word
These demos are rendered in grayscale on purpose. In the first and third rows, the state is gone. In the second and fourth, it survived, because something other than color carries it.
What else can carry a state
- A word. "Failed." "Required." "Selected." The cheapest and most reliable signal there is, and the one screen readers can speak.
- An icon. A cross, a check, a warning triangle. Pair it with a word or an
aria-label, because an icon alone is another color-like signal to someone who cannot see it well. - An underline. Links inside body text need one. A link that differs from the surrounding text by color alone is invisible to a reader who cannot tell that blue from that gray.
- A border or weight change. A selected tab with a thicker bottom border. An invalid field with a thicker border and an error message. Weight and shape survive grayscale.
- Position or pattern. In a chart, a dashed line against a solid one. A direct label at the end of each series instead of a legend that depends on matching hues.
The rule, stated plainly
Every state that is shown by color is also shown by something that is not color. That is the whole rule. WCAG calls it "use of color." The agent ruleset calls it AW-COLOR-002, and the corpus page 10-contrast plants a status shown by color alone so an agent can learn to catch it.
See it in the lab
The Color Lab can show your whole palette as someone with protanopia, deuteranopia, or tritanopia would see it, and in grayscale. Switch the view and look at your error red and success green side by side. If they collapse into the same color, you have found a state that needs a word.