color-contrast
Mobile validation
Text carries core content and labels for interactive elements such as buttons, links, and form fields, so it must be easy to read. When the color contrast ratio between text and its background is too low, many people cannot read the text. People with color vision deficiencies or low vision are affected the most. Normal text needs a contrast ratio of at least 4.5:1 with its background. Large text, meaning at least 24sp on Android or 24pt on iOS, or 18.66sp or 18.66pt when bold, needs at least 3:1. The requirement depends on the text's size and weight, not only on its colors.
Note: WCAG defines large text as at least 18 point, or 14 point when bold. Android sp and iOS points are close to CSS pixels rather than typographic points, so these sizes correspond to about 24sp or 24pt, and 18.66sp or 18.66pt when bold.
Pass Patterns
Normal text with enough contrast
Gray #767676 text on a white #FFFFFF background has a contrast ratio of 4.54:1, just above the 4.5:1 minimum.
Large text at the 3:1 threshold
Gray #949494 text on a white #FFFFFF background has a contrast ratio of 3.03:1. This is enough for large text, but not for normal text.
White text on a colored button
White #FFFFFF text on a blue #0066CC button has a contrast ratio of 5.57:1.
Fail Patterns
Normal text with low contrast
Gray #999999 text on a white #FFFFFF background has a contrast ratio of 2.85:1, below the 4.5:1 minimum.
White text on a light colored button
White #FFFFFF text on a light blue #3399FF button has a contrast ratio of 2.94:1, which fails even for large text.
Try It Yourself
Using a contrast checker
- Take a screenshot of the screen.
- Use a color picker to sample the text color and get its hex code.
- Sample the background color directly behind the text and get its hex code.
- Enter both colors in a contrast checker.
Expected results: The contrast ratio is at least 4.5:1 for normal text, or at least 3:1 for large text.
Actual results: The contrast ratio is below these thresholds.
Using developer tools
- iOS: In Xcode, open Xcode > Open Developer Tool > Accessibility Inspector, then open Window > Show Color Contrast Calculator and sample the text and background colors.
- Android: Go to the Running devices panel in Android Studio. Load the device screen and open the Layout Inspector. Find the attributes of the component that relate to the appropriate colors for the foreground (e.g.
textColor) and background (e.g.backgroundTint). Use these colors in the color contrast checker.
Expected results: The Color Contrast Calculator shows a passing ratio for the text size.
Actual results: The ratio is below the 3:1 threshold.
FAQ
How does this issue relate to 1.4.3 Contrast (Minimum)?
SC 1.4.3 requires text to have a contrast ratio of at least 4.5:1 with its background, or 3:1 for large text. This validation flags text whose contrast ratio is below these thresholds, so the criterion is not met.
Why is this issue marked as Serious?
Low contrast can make core content and the labels of interactive elements hard or impossible to read, especially for people with low vision or color vision deficiencies. When people cannot read the text, they cannot understand the content or complete tasks, so it is rated serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.4.3 Contrast (Minimum) (AA) | The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large-scale text (3:1), incidental text, and logotypes. |
| EN 301 549 | 11.1.4.3 Contrast (Minimum) | Same as the WCAG text. |
Personas impacted by this issue
Learn More
- Understanding Success Criterion 1.4.3: Contrast (Minimum)
- Color Theory and Contrast Ratios By Christopher Schmitt