Use colors consistently and effectively

Use colors consistently and effectively

  • Ensure that colors are used in the same manner throughout all your pages
  • Consider how users understand and feel about the colors that you use
  • Test contrast and accessibility using colorfilter.wickline.org

color banner

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.

color conventions include the traffic light colors

 

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.

color conventions include the traffic light colors

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:

Sample UI from material.io

SMU Blue Accessibility

SMU Gold Accessibility

  • 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:

Example of consistently used colors

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