Do not rely on colour and position alone

For: Design, Content

Sensory characteristics (1.3.3 level A)

https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics

  • Do not use only colour, size, or shape to convey meaning, for example avoid pie charts on your web page because they often use a colour key which is not accessible if you are colour blind or visually impaired.
  • Do not convey information solely through icons or symbols. For example, a calendar widget which represents today with a diamond glyph would not be accessible.
  • Do not rely on people understanding instructions that refer to the position of page elements. For example, ‘Press the green button on the right’ or ‘click the menu on the left’ because zoomed in, the button may not be on the right and the menu may not be on the left.
  • Check to see if content is identified by its size, shape, colour, or position.

Use of colour (1.4.1 level A)

https://www.w3.org/WAI/WCAG21/Understanding/use-of-color

  • When the colour of words, backgrounds, or other content is used to convey information, also include the information in text. For example, on a bulky item collection form you have a green button with a plus symbol for adding an item. This should be accompanied by the text ‘Add item’ so colour and text convey the meaning.
  • Links should always be easily identifiable through non-colour means, including both default and hover states. The easiest and most conventional way to signify links is underlining.
  • Check links are underlined.
  • Required fields and fields with errors must include some non-colour way to identify them. For example, specific text to identify the error.