Information provided by color
Information provided by color refers to any situation where a color difference is the only means of conveying meaning in a web interface. A field in red to signal an error, an underlined link, a chart without labels: all cases where color-blind people lose the information. WCAG criterion 1.4.1 (level A) and RGAA criterion 3.1 require always doubling the color with another visual indicator.
A form field surrounded by red to signal an error. No text, no icon. Just red. Color-blind people represent 8% of the male population. For them, this border does not exist. And they are not the only ones affected: a screen in sunlight, monochrome mode, black and white printing. Color is never guaranteed.
#What the rule requires
WCAG criterion 1.4.1 (level A, the minimum) boils down to one sentence: color must not be the only visual means of conveying information, indicating an action, or distinguishing an element. RGAA takes up this requirement in criterion 3.1.
The rule does not say "do not use color". It says: double it. Text, icon, pattern, underline, shape. Any additional indicator is sufficient.
#Three pitfalls you encounter every day
Forms. Required fields marked by a red border, validation errors indicated by a colored background. The fix comes down to a few attributes:
<!-- Non-conformant: color alone -->
<input style="border-color: red;" />
<!-- Conformant: color + text + attribute -->
<input aria-invalid="true" aria-describedby="err-email" />
<span id="err-email">Invalid email address.</span>Links in text. A link in the same font as the surrounding text, distinguished only by its blue tint. Without underlining, a color-blind person sees only a word among others. The detail that many ignore: even with a different color, there must be a contrast ratio of at least 3:1 between the link and the surrounding text for the difference to be noticeable.
Charts. Curves or bars differentiated only by color, with an equally colored legend. Add patterns (hatching, dashes) or direct labels on each series. This is the only way to make a chart readable for everyone.
#The traffic light analogy
A traffic signal works for color-blind people. The reason has nothing to do with colors: it is the position that speaks. Red at the top, orange in the middle, green at the bottom. Your interface should offer the same type of redundancy.
#In summary
Convert your page to grayscale. If information disappears, there is a missing visual indicator. Text, icon, or shape—the choice is yours.