Don't use color alone to convey information
Users that are completely blind, have low vision or have a color vision deficiency will have trouble perceiving content if only color is used to indicate differences. The content should also use patterns to distinguish content as needed, or use meaningful semantics to describe information, rather than relying on color alone.
- If color is needed to convey meaning, ensure there is a text alternative for that meaning as well.
- Non-text elements need a 3:1 color contrast ratio with the background, and/or with surrounding non-text elements.
Red = required, green = not required
|MUS 101||Intro to Music|
|MUS 110||Music Listening|
This pattern isn't accessible for everyone because it requires being able to detect color at all, including red vs. green, to tell which class is required or not.
|MUS 101||Intro to Music||Yes|
|MUS 110||Music Listening||No|
The required column makes the table much more accessible, because the required info is detectable as text and doesn't solely rely on color.
Photo credit © Penn State Accessibility
The error is only indicated with a red border, which wouldn't be detectable by anyone with non-visual means.
This message indicates that there is an invalid password, which lets the user to figure out which field to fix.