Make sure each page has at least one mechanism for a user to bypass navigation and jump straight to the content

All text elements must have sufficient color contrast between the foreground text and the background to ensure readability for users with visual impairments.

About This Rule

This rule ensures that all text elements have sufficient contrast between the foreground and background colors, adhering to WCAG 2 AA contrast ratio thresholds. Elements with a 1:1 ratio require manual review.

Why It Matters

Adequate color contrast is essential for users with low vision or color blindness. Text that lacks sufficient contrast can be difficult to read, leading to accessibility barriers. Approximately 8% of men and 0.4% of women in the U.S. experience color vision deficiencies, making proper contrast crucial for inclusivity.

How to Fix

Ensure that all text elements meet the following contrast ratios:

• Small Text: A contrast ratio of at least 4.5:1 between the text and its background.
• Large Text: A contrast ratio of at least 3:1. Large text is defined as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels).

Challenges with Color Transparency and Opacity

Detecting and accounting for transparency and opacity in foreground colors can introduce additional challenges, including:

• 1:1 Colors: Foreground and background colors being identical can make text invisible.
• CSS Background Gradients: Gradients in the background can affect contrast at different parts of the text.
• CSS Pseudo-elements: Background colors applied via pseudo-elements (e.g., ::before or ::after) may not be detected properly.
• CSS Borders: Background colors created using borders may overlap with text, affecting contrast.
• Overlapping Foreground Elements: Elements positioned over text (e.g., via z-index) may create visual interference or reduce contrast.
• Offscreen Elements: Text or elements moved outside the viewport using CSS (e.g., position: absolute; left: -9999px;) may not be included in the contrast calculation.

Example

Incorrect

Text with insufficient contrast:

<p style="color: #777; background-color: #fff;">This is low contrast text.</p>

Correct

Text with sufficient contrast:

<p style="color: #000; background-color: #fff;">This is high contrast text.</p>