1.4.11 – Non-Text Contrast (Level AA)

The contrast between user interface components, graphics and adjacent colours is at least 3:1.

Introduction

All users benefit from a good contrast between the components on your website and the colour around them.

Some users with visual impairments need a stronger contrast than others to fully distinguish and use components such as input fields, buttons and controls, so getting your colour choice right is essential.

How to Pass ‘Non-Text Contrast’

• Ensure user controls have a contrast of at least 3:1 to the colour around them;
  
• Where controls change colour on focus or use, ensure the colours used have a contrast of at least 3:1; and
  
• Ensure all graphics (for example icons, graphs and charts) have a contrast of at least 3:1 to the colour around them.

Exceptions

• Where a user interface component is visible but inactive (for example, a disabled button)
  
• A graphic is not required for understanding (for example, a chart where labels give the same information as the coloured lines or a decorative graphic)
  
• Brand logos
  
• Representations of other things, such as a screenshot of a website or a heat map

‘Non-Text Contrast’ Tips

Remember the different states a component may have and ensure they all comply.

Where form fields use an indicator (for example for missing information), use a colour that meets the contrast criteria.

Where fields or controls use a border, ensure the border meets the criteria. 

For graphs, ensure each line or bar has a 3:1 contrast with both the background and the other lines or bars.

For pie charts, ensure each segment as a 3:1 contrast with both the background and the segment either side of it.

See Also

• 1.4.1 – Use of Colour
• 1.4.3 – Contrast (Minimum)
• 1.4.6 – Contrast (Enhanced)
• Understanding Success Criterion 1.4.11 (W3C)