Color Independence

Ensure that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. You can still use color and color-coding, just not as the sole means of differentiating multiple things.

There are various best practices:

Check for color independence as you’re designing, and do so by using the grayscale test.

For error message styling: Indicate errors by adding/changing something structural (e.g. add an icon, indent/offset the field) as opposed to swapping a current color (e.g. gray field border changes to red).

For current menu items (and other “selected” states):Style the currently selected menu item with a color independent indicator (not just a color change), or use relative luminance.

For links that have surrounding text, underline them; for links that are standalone, use bold.

For progress trackers / progress indicators (and other similar UI elements):Start by designing all three states for the steps in a progress tracker (past, current, and future) in one shade to avoid using color to convey meaning, and then make them visually unique using non-color styling, and finally add color as the secondary visual cue.

For bar charts (and other similar data visualizations):Use pattern fills for bar charts and other similar data visualizations

For data visualizations: Use interactivity in data visualizations to allow users to pinpoint specific numbers, and to view individual graph elements isolated.

For line graphs (and other similar data visualizations):Use dashed/dotted line styles, and/or varying line widths, for line graphs and other similar data visualizations.

For data visualizations: Use other non-color indicators, like shapes, labels, or icons, to make data visualizations color independent (when pattern fills or line styles are not feasible).

For any colored UI elements: Combine multiple color independence tactics for a more failproof design that’s more usable for all.