“The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- 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 of graphics is essential to the information being conveyed.”
(WCAG 1.4.11 Non-text Contrast)
Who is it for?
The primary group of users that is represented with this are those with low visoin. It has the added benefit for all users when they experience content in sunlight or brightly lit areas. It also benefits users who may be trying to conserve their batteries by lowering their screen brightness.
What is important to know?
The most important principal from this is that any visual part of the control that is necessary to understand and distinguish the control must be visible to all users.
Interestingly, this does not require users to provide a border around buttons to indicate the hit area. They only have to have a border if there is not an icon or text within the button.
How do I code it?
Unfortunately, this differs greatly depending on the type of control that you are developing.
I would highly recommend reading the Understanding Non-text Contrast documentation. It’s really well written and extremely helpful.