020 — Use enough contrast for the boundaries of interactive elements
by Óscar Otero
2 min read
The WCAG specifies the minimum contrast ratio for text to 4.5:1 for regular text and 3:1 for large-scale text. This is something that most web designers and developers know.
But it's also important to know the criterion for non-text contrast, especially for user interface components that provide information about their boundaries or state.
Interactive components like buttons, inputs or selectors should be easily identifiable by users. The minimum non-text contrast for UI elements is 3:1, so a way to define the boundaries of these elements is by using a border with enough contrast.
In the following example, we have an input and a button with low contrast.
This can look enough for many users, but a person with a vision impairment may find it hard to differentiate the interactive components from plain text. This is a simulation:
A minimum contrast of 3:1 will ensure the elements are correctly identified by
most users:
With the vision impairment simulated:
