Non-text elements have a contrast of at least 3:1
Ensure that important visual information, like user interface components and graphical objects, has sufficient contrast against its background. This helps users with low vision distinguish key elements.
Acceptance Criteria
• Contrast Ratio: Visual elements must have a contrast ratio of at least 3:1 against adjacent colors.
• User Interface Components: Contrast is required for elements necessary for understanding the interface, excluding inactive components or those whose appearance is not controlled by the author.
• Graphical Objects: Contrast is required for parts of graphics essential for understanding the content, except when specific presentation is crucial to convey information.
Examples
• Text input fields with borders that contrast 3:1 with the background.
• Lines in graphs that have a 3:1 contrast ratio with the background.
• Icons with a 3:1 contrast ratio against their background.
Exceptions
• Inactive user interface components where the appearance is controlled by the user agent.
• Graphics where a specific presentation is essential to convey the information.
Tips
• Use contrast checkers to ensure compliance with the 3:1 ratio.
• Consider color blindness when choosing contrast levels.
How to test?
1. Contrast Ratio Tools: Use online contrast checkers to measure the contrast between visual elements and their backgrounds.
2. Visual Inspection: Check key interface elements and graphical objects to ensure they meet the 3:1 contrast requirement.
3. Accessibility Audits: Regularly perform audits to ensure ongoing compliance with contrast guidelines.