Loading...
Loading content...
Loading content...
Interactive elements and meaningful graphics need 3:1 minimum contrast.
Why it matters: Users with low vision need sufficient contrast to identify interactive elements.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): (Level AA) User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation is essential to the information being conveyed.
What This Means: This success criterion extends contrast requirements beyond text to include user interface components (buttons, form controls, icons) and graphical objects (charts, graphs, diagrams). These elements must have at least 3:1 contrast ratio with their adjacent colors to be distinguishable by users with low vision.
Why It's Important: Users with low vision need sufficient contrast to identify interactive elements like buttons, form controls, and icons. Low contrast makes it difficult or impossible to see where elements are, what they do, or what state they're in. This criterion ensures that all interactive elements and meaningful graphics are visible and distinguishable.
Ensure buttons, form controls, icons, and meaningful graphics have at least 3: 1 contrast with their backgrounds. This includes button borders, focus indicators, icons, and parts of charts or graphs that convey information. Test with contrast checking tools and verify that all interactive elements are clearly visible. Inactive or disabled components are exempt from this requirement.
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 users with color blindness 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.
A light gray button on a white background has insufficient contrast (1.5:1).
<button style="background: #e0e0e0; color: #ffffff;">Submit</button>A dark blue button on a white background meets the 3:1 contrast requirement.
<button style="background: #0066cc; color: #ffffff;">Submit</button>A light gray icon on a white background is barely visible.
A dark icon on a light background is clearly visible.
This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.11 Non-text Contrast are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.11. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.11 Non-text Contrast 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