Color has many usability benefits. Aside from providing aesthetic value and brand recognition to your product, it can also be used for emphasis and communicating relationship and groupings. Use color effectively by following these guidelines:
Keep in mind the universal standards for color
For example, red is commonly associated with errors and warnings and should not be used for success messages.
Do not use color as the sole differentiator of elements
Not everyone can see all colors distinctly. Around 9% of men and 5% of women cannot perceive differences between some or all colors. Aside from this, there are users who access sites using their phones, sometimes with very low brightness.
To test your project against these use cases:
- use Google's material.io or colorfilter.wickline.org to test your color palette (material.io also has a neat feature of generating preview and the code of how the colors could look like in an interface. Here's a preview for SMU's two main colors:
- screen-capture your project and convert it to grayscale to see if you can tell the colors apart with ease.
Use colors consistently throughout all the pages
For example, this SMU website consistently uses a blue color for interactive controls such as buttons and links:
More best practices:
- Do not use a combination of more than 5 colors
- Keep in mind that cultural associations and psychology can influence responses to color
- Do not use highly saturated colors (e.g. bright red with bright blue) together