The parts of graphical objects required to understand the content, and the visual information required to identify UI components and states, have a contrast ratio of at least 3:1 against adjacent colors. (Level AA)
Objective: Ensure important visual information such as graphics and icons meets the same minimum contrast that is required for larger text
The key intended beneficiaries of this checkpoint are low-vision users who need to perceive active UI components and their states, as well as meaningful graphics. The requirement calls for a 3:1 contrast ratio against adjacent colors for two types of non-text content:
- User interface components
- Graphical objects
For User interface components, the visual information that identifies a component as well as its state needs to meet the contrast ratio. This typically means that the outer edge of a component will need to be distinguishable from the background, as will any indicators for focus, selection or other states. The WCAG Understanding document provides extensive explanations of how contrast can be achieved for both common components and customized widgets.
For every important graphical object, whether it be a UI component or a non-interactive object, the parts of the graphic that make it understandable must meet a 3:1 contrast with the neighbouring information. The WCAG Understanding document provides a range of examples for everything from monochrome icons to pie charts with different colored wedges. Considerations for such things as gradients and infographics are also discussed.
Not all graphics need to meet this requirement; only those "required for understanding" the content. Where the graphic conveys no additional information or is merely decorative (i.e., it could be removed from the page and not affect a person's ability to understand the content), it does not need to meet the contrast requirements. For instance, if an icon is paired with a label (which has sufficient text contrast), then the icon itself will not normally need to be perceived.
Unmodified Exception: UI components whose appearance is entirely determined by the user agent (e.g., stock HTML radio buttons and checkboxes) do not need to meet the 3:1 contrast if they are not modified by authors. This exception is intended to prevent making authors responsible for any shortcomings of a particular user agent default implementation.
Inactive Exception: UI Components that are not active (i.e., disabled) are not required to meet a minimum contrast. This matches the exception for text that is "part of an inactive user interface component" in 1.4.3 Contrast (Minimum).
Essential Exception: If a particular presentation of a graphical object is essential to the information being conveyed, it also does not need to meet the 3:1 contrast requirement. Examples of such essential graphics may be logos and flags, as well as reproductions of physical objects, whether drawn or photographed.
IBM has simplified the normative language of this checkpoint. Refer to Understanding 1.4.11 (external link to WCAG) for more information.
This paragraph appears generically in all checkpoints. Review the General techniques as well as other tabs applicable to your technology. Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.
Instructions: Where applicable, each item in this section represents a technique that is deemed sufficient. Ensure you review WCAG Common Failures to avoid development mistakes.
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G195: Using an author-supplied, highly visible focus indicator
- G207: Ensuring that a contrast ratio of 3:1 is provided for icons
- G209: Provide sufficient contrast at the boundaries between adjoining colors
There are no specific Web techniques for this checkpoint. Refer to the General techniques section.
There are no specific Mobile Native iOS techniques for this checkpoint. Refer to the General techniques section.
There are no specific Eclipse techniques for this checkpoint. Refer to the General techniques section.
There are no specific Windows-based (MSAA+IA2) techniques for this checkpoint. Refer to the General techniques section.
Many links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation 05 June 2018: http://www.w3.org/TR/WCAG21/
Copyright © 1994-2019 World Wide Web Consortium, ( Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.
Copyright © 2019 IBM Corporation