2.3 On each screen, are the colours used in the user interface components and the graphic elements conveying information sufficiently contrasted (excluding special cases)?

Test 1 (2.3)

iOS

1. Activate the Increase contrast option (Settings > Accessibility > Text display and size > Increase contrast) or, if present in the application, activate the application's replacement mechanism to display graphic elements with a sufficient contrast ratio.
2. Identify on the screen the graphic elements conveying information and for each
   • Identify which colour(s) of the component are necessary to identify the location and/or the information conveyed (this could be the border, the colour of an icon, the background colour);
   • Identify the adjacent colours that have an impact on the visibility of the component colour(s).
3. Identify on the screen the interactive components that may have several states (hovered, focused, activated, checked) and for each
   • Identify which colour(s) of the component are necessary to identify the location and/or the information conveyed and the state (this could be the border, the colour of an icon, the background colour) for each of the states;
   • Identify the adjacent colours that have an impact on the visibility of the component's colour(s).
4. Activate the Colour Contrast Analyser software on the computer and capture the foreground and background colours on the mobile device either
   • by broadcasting the screen of the mobile device to the computer;
   • by taking screenshots of the elements to be evaluated (and importing them onto the computer).
5. Check that the contrast ratio between the colours identified is at least 3:1.
6. If this is the case, the criterion is validated. Note: It is possible to use the Accessibility Inspector application available on macOS to carry out a quick evaluation of screen contrasts. The software has an "Audit" function which allows you to automatically test certain text and graphic elements on screens. This function does not detect all contrast faults, and additional tests following the methodology described above will be necessary.

Android

1. If it exists in the application, activate the application's replacement mechanism to display graphic elements with a sufficient contrast ratio.
2. Identify on the screen the graphic element conveying informations and for each
   • Identify which colour(s) of the component are necessary to identify the location and/or the information conveyed (this could be the border, the colour of an icon, the background colour);
   • Identify the adjacent colours that have an impact on the visibility of the component colour(s).
3. Identify on the screen the interactive components that may have several states (hovered, focused, activated, checked) and for each
   • Identify which colour(s) of the component are necessary to identify the location and/or the information conveyed and the state (this could be the border, the colour of an icon, the background colour) for each of the states;
   • Identify the adjacent colours that have an impact on the visibility of the component's colour(s).
4. Activate the Colour Contrast Analyser software on the computer and capture the foreground and background colours on the mobile device
   • either by broadcasting the screen of the mobile device to the computer;
   • or by taking screenshots of the elements to be evaluated (and importing them onto the computer).
5. Check that the contrast ratio between the colours identified is at least 3:1.
6. If this is the case, the criterion is validated. Note: It is possible to use the Accessibility Scanner application to carry out a rapid assessment of screen contrasts. The application does not detect all contrast defects, and additional tests following the methodology described above will be necessary.