What does this accessibility issue mean?
Accessibility issue summary: Insufficient text contrast ratio
Adequate text contrast is crucial for users with visual impairments, low vision, or color blindness, as well as for those who may be accessing the content in suboptimal viewing conditions. WCAG emphasizes the principle of perceivability, and ensuring sufficient contrast between text and its background is integral to making content more readable and understandable.
When text contrast is insufficient, it can result in poor legibility, making it difficult for users to discern and comprehend the text content. This issue is particularly pronounced for users with visual disabilities who may rely on screen readers or magnification tools. Inadequate contrast can lead to eye strain and fatigue, hindering overall user experience.
To address this, WCAG provides specific guidelines regarding text contrast ratios. These guidelines ensure that text is presented in a way that is visually distinguishable from its background. Meeting these contrast requirements enhances the readability of text for all users and is a fundamental aspect of creating an inclusive and accessible web environment.
The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 (except in certain situations, for example, with Large-scale text, which should have a contrast ratio of at least 3:1).
Solution: Ensure the contrast between foreground and background colors meets WCAG 2 AAA contrast ratio thresholds.
Example HTML violation: Insufficient text contrast (WCAG Level AAA Issue)
<style> body { background-color: #f5f5f5; color: #333333; font-family: Arial, sans-serif; } h1 { color: #000000; } p { color: #666666; } </style>
<h1>Example Heading</h1>
Example paragraph with sufficient text contrast.
The above HTML violates the color-contrast-enhanced accessibility rule because the text contrast does not meet the requirements stated in the W3C Web Content Accessibility Guidelines.
Specifically, the paragraph's text color '#666666' is too light when compared to the background color '#f5f5f5'.
How to fix "Insufficient text contrast (WCAG Level AAA Issue)" issue
<style> body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } h1 { color: #000000; } p { color: #000000; } </style>
<h1>Example Heading</h1>
Example paragraph with sufficient text contrast.
Corrections made:
-
The background color of the body was changed from '#f5f5f5' (light grey) to '#ffffff' (white). This creates more contrast between the text and background.
-
The color of the body and paragraphs were changed from '#333333' and '#666666' (both grey) to '#000000' (black) respectively. This makes sure that the text is as distinct as possible from the white background.
According to WebAim Contrast Checker, the contrast ratio between black text and a white background is 21:1 which exceeds the recommended contrast ratio of 7:1 for enhanced contrast. Thus, this correction helps users with moderate visual impairment, and users with a color vision impairment to read the content better.
