Skip to main content
RAWEBAA

3.3 On each web page, are the colours used in the user interface components or graphic element conveying information sufficiently contrasting (excluding special cases)?

WCAG references
  • 1.4.11 Non-text Contrast (AA)
Techniques
  • F78
  • G18
  • G136
  • G145
  • G174
  • G183
  • G195
  • G207
  • G209

Official methodology to test criterion 3.3

Test 1 (3.3.1)

  1. Find in the document the user interface components that could cause contrast problems.
  2. For each of these components, check that
    • either the contrast ratio between the colours of the component in its various states and the adjacent background colour is at least 3:1;
    • or a mechanism allows the user to display the component with a contrast ratio of at least 3:1.
  3. If this is the case for each component, the test is validated.

Test 2 (3.3.2)

  1. Find in the document the graphic elements that could cause contrast problems.
  2. For each of these elements, check that
    • either the contrast ratio between the colours of the graphic element required to understand it and the adjacent background colour is at least 3:1;
    • or a mechanism allows the user to display the graphic element with a contrast ratio of at least 3:1.
  3. If this is the case for each component, the test is validated.

Test 3 (3.3.3)

  1. Find in the document the graphic elements that could cause contrast problems.
  2. For each of these elements, check that
    • either the contrast ratio between the different adjacent colours of the graphic element, when they are necessary for its understanding, is at least 3:1;
    • a mechanism allows the user to display the graphic element with a contrast ratio of at least 3:1.
  3. If this is the case for each graphic element, the test is validated.

Test 4 (3.3.4)

  1. Find in the document the mechanisms that enable a compliant contrast ratio to be displayed.
  2. For each of these mechanisms, check that the contrast ratio between the colours of the component or the graphic element conveying information of which it is composed is sufficiently high.
  3. If this is the case for each mechanism, the test is validated.