Given how common red-green colourblindness is, it’s surprising how often I still encounter red and green used for functional elements in user interface (UI) design and information design.
Here are just three problems I regularly encounter when using apps and websites, and how to avoid them.
1. Red and green used to indicate form validation errors
Problem: Using colour to indicate validation status means that I often can’t tell which form field is in error:
Solution: Add other visual indicators of validation status — ideally both an icon and a text label — and avoid using red and green together:
2. Red and green used for primary and secondary buttons in forms
Problem: Using red and green to indicate “OK” and “Cancel” (or similar) can lead to confusion and user errors, especially when working at speed:
Solution: Make it clear which is the primary and secondary action using distinct button styles:
Even better, place the buttons one below the other, so that it’s clear which is the primary action (this isn’t appropriate for dialogue boxes, which follow their own conventional design pattern):
Better still, use colourblind-friendly hues:
3. Red and green used to convey meaning in charts
Problem: Using red and green to plot different series of data can literally make the visualisation unusable, because I can’t see which points belong to which series:
Solution: Use different colours, and support interpretation by using different point styles for each data series, and adding a legend:
The same problem arises with charts that use areas rather than points — for example, donut charts:
In this case, as well as using more colourblind-friendly hues and including text labels, you can add patterns to help indicate which area relates to which category: