Ensure element has sufficient contrast

(In development)

Ensure that the contrast ratio between the element foreground color and background color is at least 3:1. By maintaining this ratio, visually impaired and color blind users can usually recognize visual user interface elements.

Impact

If an element has insufficient contrast, visually impaired people might not be able to read it. Sufficient contrast makes an app easier for everyone to use for everyone. For example, outside in the sun.

Solutions

Elements

  • All interactive elements

Testing

Automated testing

This issue can be detected automatically with the Abra Test Engine.

Manual testing

Make a screenshot and pick the foreground and background colors of graphical element. Use a contrast checker to calculate the contrast ratio.

  • Passes if the contrast is at least 3:1.

Note: When making a screenshot, the colors are compressed, resulting in a deviation of 1 to 10%. Therefore, contrast ratios between 2,7:1 and 3,3:1 might not sufficient.

Exceptions

  • Inactive components, e.g. disabled state
  • Default components without custom styling, e.g. native Android/iOS components
  • Screenshots can be disabled on Android (SECURE_FLAG). Ask the developer for color values.

Relevant sources

Always check the official guidelines.