Skip to main content
RAAM 1.1

Adjacent colour

Colour directly in contact with the colours of the component or graphic element, this can be the background colour or any other colour in direct contact.

Example: In a "no-entry" sign, the red of the sign is the colour adjacent to the white line in the centre of the sign.

It is important to understand that criterion 2.3 on the contrasts of user interface components and graphic elements only assesses non-textual elements. As soon as the contrast of text needs to be assessed, even if it is present in a user interface component, criterion 2.2 applies.

Not all colours in a graphic element or user interface component need to be evaluated. It is essential to assess

  • Information-conveying colours (not all colours convey information):
    • For example, in an application's navigation panel, the navigation buttons have a grey background colour, but the active screen button has a green background colour. It is necessary to check that the green colour in direct junction with the grey background colour has a contrast ratio of at least 3:1.
  • Colours used to identify the location of an element or interactive zones, for example
    • The border of a form field, if this is the only means of identifying the location of the interaction, must have a colour with a contrast ratio of at least 3:1 with the adjacent colour, generally the background colour;
    • The borders of checkboxes and radio buttons, and their status (selected or not). It is essential here to assess the contrast ratio of the border of these components with the adjacent colours (generally the background colour) but also to assess the contrast ratio of these components when they are selected. It is necessary to assess whether the visual element used to signify the selection has a sufficient contrast ratio.
  • The colours of non-text information elements (graphic elements):
    • A chevron is positioned to the right of the item selected in a list of items, the contrast ratio between the colour of the chevron and the adjacent colours (generally the background colour) must be at least 3:1.

The background colour of a form submit button, for example ("Submit"), does not have to contrast with the screen background. This is because the button is located by the text, which must already comply with the text contrast constraints (criterion 2.2). The size of the button and its edges are not considered to be information that meets this criterion.

Note 1: In the case of a gradient, the adjacent colour with the least contrast in the gradient will be considered as the adjacent colour.

Note 2: In the case of multiple colours, all the colours are to be considered as adjacent colours.