The colors you choose for your app interface affect how easily users can read and understand it. Sufficient color contrast makes text and images easier to read and comprehend.
Along with benefiting users with various visual impairments, sufficient color contrast helps all users when viewing an interface on devices in extreme lighting conditions, such as when exposed to direct sunlight or on a display with low brightness.
Implementation
When implementing an app's user interface, specify background and foreground colors with sufficient color contrast.
A "contrast ratio" is a computation of the difference in luminance, or intensity of light emitted, between two neighboring colors when shown on a display. This ratio ranges from 1 to 21 (often written as 1:1 to 21:1), where increasing numbers mean higher contrast. There are many tools available for computing the contrast ratio of two neighboring colors, such as this color contrast ratio calculator.
When using TextView to display text, use android:textColor and android:background to define foreground and background colors with a high contrast ratio. When using Text in Compose, use the color parameter and Modifier.background to define foreground and background colors with a high contrast ratio.
The W3C recommends:
- At least 4.5:1 for small text (below 18 point regular or 14 point bold)
- At least 3.0:1 for large text (18 point and above regular or 14 point and above bold)
Notes about color contrast:
-
When using
ImageVieworImageto render graphical content or iconography, make sure that contrast between foreground and background colors meets or exceeds the recommended ratios. - Contrast ratios are measured based on the apparent color of an element’s foreground and background when layered on other elements. If defining colors in an ARGB format (hex values of #AARRGGBB), note that non-opaque colors (those with an alpha-channel value of less than 255) may have a different apparent color due to blending with content rendered beneath them.
- Font smoothing and anti-aliasing can affect the apparent color of some content, especially content with a low stroke width. To improve readability, choose a color combination with a greater contrast ratio or increase the content’s stroke width.
Design
When designing a user interface, consider choosing a palette with sufficient color contrast for adjacent colors.
- For text and iconography specifically, follow W3C guidelines for minimum contrast ratios
- Consider including a high contrast theme as an option, or allow the user to choose colors for primary content
For more information, refer to Material Design Accessibility color and contrast guidelines.
Testing
To manually check color contrast in an app:
- Open the app.
- Capture a screenshot.
- Using image viewing or editing software, use an "eyedropper tool" to extract an apparent sample of colors from the screenshot.
- Use a contrast ratio calculator to determine the contrast ratio of adjacent colors.
- If the contrast ratio is less than that defined by W3C guidelines, the interface might benefit from increased color contrast.
Android's automated testing tools can detect many color contrast issues. Consider using Accessibility Scanner for Android for manual testing of your app on-device. For automated tests, turn on accessibility checking in Espresso and Robolectric.