For people with visual impairments, low-contrast elements can make it difficult—or even impossible—to interact with a website.
Non-Text Contrast ensures that interactive elements like buttons, form fields, and icons have enough contrast to stand out, making sure they’re visible and usable for everyone.
Who this impacts
- People with low vision: Strong contrast helps users see and interact with buttons, form fields, and other essential elements.
- People with color blindness: Higher contrast improves visibility and usability, even when users can’t distinguish between certain colors.
- People using small screens: On mobile devices, clear contrast is essential for usability, especially for buttons and links.
- Everyone: Clear, high-contrast elements benefit everyone, making websites easier to navigate.
How to meet Non-Text Contrast
- Ensure at least a 3:1 contrast ratio for UI components: Make sure buttons, form fields, and other essential interactive elements have a minimum of a 3:1 contrast ratio with their background.
- Test contrast for visual indicators: Check that all visual elements used to indicate functionality (like icons or button outlines) meet the contrast requirement.
- Maintain high contrast for essential elements: Use strong color pairings that make functional elements stand out against the surrounding content.
Practical example
Ensure that all buttons, icons, and form fields have a minimum contrast ratio of 3:1 against their background. This makes it easier for users with low vision to identify and interact with the page elements.
Exceptions
Elements that are purely decorative, such as icons used for aesthetic purposes, do not need to meet the contrast requirements. Also, elements that are disabled or inactive do not need to meet the 3:1 contrast ratio.
Top tips
- Use contrast-checking tools: Test the contrast ratio of non-text elements with tools like the free Silktide accessibility checker
- Keep focus on usability: Ensure that all interactive elements are not only visible but also easy to identify and understand.
- Test under different conditions: Check your design in various lighting environments, including bright sunlight or dim rooms, to ensure visibility. Use both desktop and mobile devices.