Loading...
Loading content...
Loading content...
Text must have at least 7:1 contrast ratio (4.5:1 for large text).
Why it matters: Higher contrast benefits users with more severe vision loss.
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
What This Means: This success criterion requires a higher contrast ratio than Level AA - 7:1 for normal text and 4.5:1 for large text. This enhanced contrast provides better visibility for users with more severe vision loss or in challenging viewing conditions.
Why It's Important: While 4.5:1 contrast (Level AA) is sufficient for many users, those with more severe low vision, certain types of color blindness, or users viewing content in bright sunlight need higher contrast to read comfortably. The 7:1 ratio ensures text is readable for a wider range of users and viewing conditions.
Use contrast checking tools to verify text meets the 7: 1 ratio (4.5: 1 for large text). This typically means using darker text colors on light backgrounds or very light text on dark backgrounds. Common compliant combinations include black text on white, or white text on very dark backgrounds. Test in various lighting conditions and consider providing this enhanced contrast as an option even if you're targeting AA compliance.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that older users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Text has 4.5:1 contrast, meeting AA but not AAA requirements.
<p style="color: #666; background: #fff;">Text with 4.5:1 contrast</p>Text has 7:1 contrast, meeting AAA requirements.
<p style="color: #000; background: #fff;">Text with 7:1 contrast</p>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.6 Contrast (Enhanced) are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.6. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.6 Contrast (Enhanced) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable