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