Colour cues

Relying on red for incorrect and green for correct isn’t enough when creating fully usable products. Use more than colour, use symbols, movement, and/or text can help indicate to the user that something is incorrect, correct, or that something has changed.


Tips for using colour effectively

Tips for using colour effectively

When indicating the state or change in user experience do not use colour cues on their own.  

This is related to the Plain language for accessibility guide.

Review the related guides to help with this:

Avoid using tactics like green border to indicate a state to the user. For example if a form field is valid it is green or a red border to indicate an error, will appear the same to someone with red-green colour-blindness or be completely stripped away with High Contrast Themes.

Add an accompanying text that includes a success or error feedback message. 

Designers can also use iconography alongside with colour cues, like the green highlight, to supplement the communication with a shape: eg. a checkmark, stop sign or exclamation mark. 

When indicating the state or change in user experience do not use colour cues on their own.  

This is related to the Plain language for accessibility guide.

Review the related guides to help with this:

Avoid using tactics like green border to indicate a state to the user. For example if a form field is valid it is green or a red border to indicate an error, will appear the same to someone with red-green colour-blindness or be completely stripped away with High Contrast Themes.

Add an accompanying text that includes a success or error feedback message. 

Designers can also use iconography alongside with colour cues, like the green highlight, to supplement the communication with a shape: eg. a checkmark, stop sign or exclamation mark. 


Explore more

Explore more