Text elements must have sufficient color contrast against the background
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- Low Vision
- Colorblindness
Requirement(s)
- User Agent Issue
WCAG Success Criteria
- 1.4.3 Contrast (Minimum)
Section 508 Guidelines
- Not specified, or not applicable
How to Fix the Problem
Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.
Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt or 14pt bold.
Note:
Five specific cases will return incomplete results:
- Elements found to have a 1:1 ratio are considered 'incomplete' and require a manual review.
- Elements marked with "N/A" background and foreground colors are considered incomplete and require a manual review. N/A background and foreground colors happen when the background is an image, or when the element is detected to have one or more background colors.
- When color contrast is between 3.0 and 4.5. Android is unable to distinguish between large and small text.
- When the element is partially off-screen.
- The view is an edit control. Edit text controls can have hint text and user input text of differing colors. Manual checks are required because hint text contrast is not important for accessibility.
Use the color contrast analyzer below to find colors that pass the guidelines.
Why it Matters
Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.
There are nearly three times more individuals with low vision than those with total blindness. One in twelve people cannot see the average full spectrum of colors - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.
Rule Description
The Algorithm (in simple terms)
The Color Contrast rule uses a snapshot of the screen to extract the background and text color of the view. Upon finding colors, the rule uses the WCAG 2.0 luminance color contrast formula.
Note:
Android color contrast is computed via a separate algorithm compared to iOS. Attest Android analyzes pixel to pixel comparisons of images of text regardless of what kind of view contains the text. Only text visible on the screen can be analyzed, e.g., Attest Android can not analyze color contrast for text that is not currently visible onscreen.
This also checks for child elements of disabled buttons so they can be ignored to avoid a false value.
Resources
Deque University Course Pages (subscription required)
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: