Text Color Contrast (Minimum)

App accessibility checks if text elements have sufficient color contrast for readability. Ensure the contrast ratio between text and background colors is at least 4.5:1. For large text, a minimum ratio of 3:1 is acceptable. The goal is to make content accessible to users with varying levels of visual sensitivity, including those with color vision deficiencies.

Success Criteria

The rule checks if the text contrast ratio is at least 4.5:1 for standard text (less than 18pt in iOS or less than 18dp in Android) and 3:1 for large text (18pt or larger in iOS , or 18dp or larger in Android).

How to Fix?

To prevent insufficient color contrast violations:

• Adjust colors
   If the contrast ratio is insufficient, modify the colors of the text or background to meet the required thresholds.
• Font size
  Use a sufficient font size to make sure the text is clearly readable.

Example

The following screenshot highlights an insufficient color contrast violation in a mobile app:

In this example, text elements have insufficient contrast ratios:

• Element #14: The text color #808080 against the background color #FFFFFF results in a contrast ratio of 3.95:1, which is below the WCAG 2.1 AA requirement of 4.5:1 for standard text. This low contrast makes it difficult for users with visual challenges to perceive the text input field clearly.
• Element #15: The text color #C0C0C0 against the background color #FFFFFF results in a contrast ratio of 1.82:1, significantly below the required 4.5:1.
• Element #16: Similar violations where the text color #C0C0C0 does not provide sufficient contrast against the background color #FFFFFF.

To resolve this violation, you must:

• Increase the text color contrast
   Change the text color to a darker shade of blue or a completely different, higher-contrast color (e.g., black).
• Adjust the background color
   If design constraints allow, slightly darkening or tinting the white background could also improve contrast.
• Adjust Font Size
  If the contrast ratio is above 3.0, consider increasing the font size to 18pt or higher on iOS and 18dp or higher on Android instead of adjusting the color.

Additional Information

what isPotentiallyObscured mean?

This attribute indicates that the element evaluated for contrast is overlaid by another element. The other element can be opaque or translucent. Suppose this attribute is reported as true, which means that additional factors, such as overlaying elements, might further affect the readability and accessibility of the text, necessitating even higher contrast.

Reference

Learn more about Color Contrast WCAG 2.1 - 1.4.3 (Level AA) guideline.