Contrast (Minimum)
Summary:
WCAG criteria 1.4.3 "Contrast (Minimum)," 1.4.6 "Contrast (Enhanced)," and 1.4.11 "Non-text Contrast" collectively focus on contrast in digital content, crucial for users with visual impairments. These guidelines, categorized under different compliance levels (A, AA, and AAA), set standards for text and visual element readability against their backgrounds.
What:
- 1.4.3 Contrast (Minimum) – AA: Demands a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against their backgrounds.
- 1.4.6 Contrast (Enhanced) – AAA: Requires a higher contrast ratio of 7:1 for normal text and 4.5:1 for large text, catering to users with more severe vision impairments.
- 1.4.11 Non-text Contrast – AA: Ensures that graphical objects and user interface components have a minimum contrast ratio of 3:1 against adjacent colors.
Why:
These criteria acknowledge the diverse visual capabilities of users. Adequate contrast is essential for readability and usability, especially for those with low vision or color vision deficiencies. The different compliance levels (A, AA, AAA) allow for scalable accessibility improvements, with AA being the generally targeted standard and AAA offering the highest level of accessibility.
Examples and Scenarios:
- Web Text – AA & AAA: Text on websites should meet the AA standard contrast ratio, with an option to meet the AAA standard for enhanced accessibility.
- Interactive Elements – AA: Buttons and controls must be distinguishable, meeting the AA standard for contrast against their backgrounds.
- Graphical Elements – AA: Essential icons and graphical indicators need to comply with the AA contrast ratio requirements.
How to Comply:
- Websites and Apps: Regularly use contrast-checking tools to ensure text and elements meet at least the AA standard, with an aim for AAA where feasible.
- Design Practices: Integrate high-contrast design principles from the outset, treating accessibility as a core aspect of design rather than an add-on.
Exceptions:
- Logos and Branding: Elements that are part of logos or brand names are exempt from these contrast requirements.
- Decorative Elements: Items that are purely decorative and do not convey essential information are not bound by these contrast standards.