WCAG (Level AAA) SC 1.4.6 Contrast (Enhanced) (W3.org)
Issue description
WCAG 1.4.6, “Contrast (Enhanced)” takes the contrast requirements of WCAG (Level AA) SC 1.4.3 Contrast (Minimum) a step further. It aims to provide a higher level of accessibility for people with low vision by requiring even greater contrast between text and its background.
While WCAG 1.4.6, “Contrast (Enhanced)” sets a minimum contrast ratio of 4.5:1 for normal text, some users with low vision may still find it difficult to read text at this level of contrast. This is especially true for users with certain types of color blindness or those with cataracts.
Foreground and background contrast examples
WCAG requirements
This guideline increases the contrast requirements:
- Normal text: Text should have a contrast ratio of at least 7:1 against its background.
- Large text: Large text (18pt or 14pt bold) should have a contrast ratio of at least 4.5:1 against its background.
Exceptions
- Incidental text: Text that is part of an inactive user interface component, pure decoration, not visible to anyone, or part of a picture with significant other visual content has no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Higher contrast makes text much easier to read for people with low vision and It can help reduce eye strain and fatigue, especially for users who spend a lot of time reading on screens. While this is a Level AAA criterion, meaning it’s a higher level of accessibility, it’s becoming increasingly important to consider as the population ages and more people experience age-related vision loss.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.6, “Contrast (Enhanced)” involves ensuring a higher level of contrast between text and its background than the minimum requirements of WCAG 1.4.3. Here’s how:
Choose colors with high contrast
- Use a contrast checking tool: Use a contrast checker (e.g., WebAIM Contrast Checker) to analyze the contrast ratio between your text and background colors. Aim for a ratio of at least 7:1 for normal text and 4.5:1 for large text (18pt or 14pt bold).
- Prioritize high-contrast combinations: Choose color combinations that provide very high contrast. For example, black text on a white background or yellow text on a black background.
- Avoid borderline combinations: Even if a combination meets the 4.5:1 ratio, consider increasing the contrast further for enhanced accessibility.
Adjust text and background colors
- Darken or lighten: If your current colors have insufficient contrast, try darkening the text color or lightening the background color (or vice versa) to improve the ratio.
- Test different combinations: Experiment with different color combinations until you achieve the enhanced contrast requirements.
- Consider text size and weight:
- Larger text: Larger text is generally easier to read, so consider increasing the font size if possible.
- Bold text: Using bold text can also improve readability and contrast.
- Use text shadows or outlines:
- Enhance contrast: Apply a text shadow or outline to the text to further enhance its contrast against the background. However, ensure the shadow or outline doesn’t create its own contrast issues.
High-contrast themes
Offer high-contrast themes as an option for users who need them. Example: If your website has dark gray text on a light gray background, you can:
- Change the text color: Change the text color to black or a much darker shade of gray.
- Change the background color: Change the background color to white or a much lighter shade of gray.
- Increase the font size: Make the text larger to improve readability.
- Add a text shadow: Add a subtle white text shadow to enhance contrast.
By implementing the WCAG (Level AAA) SC 1.4.6 Contrast (Enhanced) techniques, you can ensure that your website’s text is highly legible and readable for everyone, including those with significant low vision.
