Success Criterion 1.4.11 Non-text Contrast (Level AA):
The visual presentation of the following has a contrast ratio of at least 3:1 against adjacent colour(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.
Description
problems/challenges
As you know, there is a contrast related checkpoint in the WCAG 2.0 which is 1.4.3 contrast(minimum). This checkpoint talks the contrast of the text and images of text alone. However, WCAG 2.0 1.4.3 contrast does not talk the contrast of the icons, meaningful graphical objects, or any other non-text related things. When non-text elements (such as icons, graphical objects, and so on.) do not have sufficient contrast then people who are low vision users would be having difficulty in perceiving those elements.
WCAG 2.0 does not also talk contrast of the controls/elements that require visual information and if those elements/controls have insufficient contrast then it would be difficult in identifying the same for the moderately low vision users. For moderately low vision users, even different states of those user interface components are difficult to identify if the contrast is insufficient. There would be many states for the user interface components. The examples of such states could be selected, focussed, hovered, checked, current, pressed, expanded/collapsed, active, enabled, and so on. if those states do not have enough contrast, then it is going to be difficult for moderately low vision users in perceiving the same. Overall, there are certain challenges/problems in identifying the user interface components (that require visual information), icons, meaningful graphical objects, various states if enough contrast is not maintained with its adjacent colours.
Solution
WCAG 2.1 introduces new check point called 1.4.11 non-text contrast to address mentioned problem. This success criterion emphasizes on the few things. They are.
- The informative icons (such as status, print, and so on.) that do not have any associated text must meet 3:1 contrast ratio with its adjacent background
- The user interface component that is identifiable with the visual information alone (ex: text input with dark border around white editable area) must meet 3:1 contrast ratio with its adjacent colour
- The state of user interface components (such as selected, active, expand/collapse, and so on.) must meet 3:1 contrast ratio with its adjacent colour
- Meaningful graphical objects (such as graphs, charts, and so on.) must meet 3:1 contrast ratio with its adjacent colour
If author follows the above 4 mentioned points, then moderately low vision users would not have any difficulty in accessing/perceiving those non-text things.
Complementary info on 2.5.4: motion actuation
This checkpoint does not talk about the contrast of inactive user interface components.
Exceptions
There is no need of meeting the contrast if the graphic is essential (essential in the sense it cannot be represented other than graphic). The logos, flags, screenshots, diagrams, photos, and any other such things. are the exceptions for this checkpoint
References
understanding 1.4.11: Non-text Contrast