The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in 1.4.3 Contrast (Minimum).
Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.
For active controls on the page, such as buttons and form fields, any visual information provided that is necessary for a user to identify that a control exists and how to operate it must have sufficient contrast with the adjacent background. Also, the visual effects which are implemented to order to indicate state, such as whether a component is selected or focused, must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.
This success criteria does not require that controls have a visual boundary indicating the hit area, but that if the visual boundary is the only way to identify that a control can be activated, then that boundary must have sufficient contrast. If text (or an icon) within a button is visible and there is no visual indication of the hit area, or the visual indication does not provide the only indication, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects portion of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.
The visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.
The Use of Color success criteria addresses changing only the color of an object (or text) without otherwise altering the object's form. If the states of an object vary by color this Success Criteria indicates that this is acceptable if the luminosity contrast ratio between the colors of the states differ by at least 3:1 or if there is another indicator of state. For example, a text link that only differs from adjacent text using color and there is no other visual indication that the text is linked (e.g. the link underline is removed) needs to ensure that the link color meets the 3:1 luminosity contrast ratio relative to the non-linked text color in order to meet this Success Criterion.
For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.
Type | Description | Examples |
---|---|---|
Visual Focus Indicator | Visual focus indicator for a link that is a blue (#6699cc) outline around the link. The blue (#6699cc) outline does provide a sufficient contrast with the white (#ffffff) background that is equal to 3 to 1. | Example 1 |
Text Input with border | Border line (#787878) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. | |
Text input using background colour | Text input using a different in background colour to indicate the input. | |
Text Input with partial border | Bottom-border line (#787878) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. The input also has a very light background, however, it is the bottom border that is intended to convey the nature of the input. |
User Interface Components that are not available for user interaction (eg: a disabled control in HTML) are not required to meet this color contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. Example: A submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.
Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations:
text or images of text that are part of an inactive user interface component. It would be confusing and inconsistent to exempt text in inactive components from contrast considerations while requiring sufficient contrast for the graphical container the text resides in.
Variations in significance: Depending on the circumstances, disabled controls may be intentionally designed to be more or less visible depending on how meaningful a control's disabled state is. Two examples can illustrate.
The disabled control in the first example offers a more significant cue, and a designer may intentionally decrease the contrast in the second case to de-emphasize its importance.
A one-size fits all solution has been very difficult to establish, a method of varying the presentation of disabled controls based on user preferences is anticipated as an advancement in future.
The term "graphical object" applies to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. For simple graphics such as single-color icons the entire image is a graphical object. Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding.
Not every graphical object needs to contrast with its surroundings - only those that are required for a user to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphical objects or colors.
Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:
Due to the strong contrast of the red and white, it would also be possible to only put the outline around the white tips of the magnet and it would still conform.
The term "required for understanding" is used in the Success Criterion as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. However, that is not a requirement when:
Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent colour which does not have sufficient contrast, can you still identify and understand the graphical object?
Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, there must be contrasting colors or text in order to find the graphics. Within that area, information available by a conforming method (e.g. focusable elements) can be used to make that information available dynamically as text, or dynamically increase the contrast.
Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.
Infographics often fail to meet several WCAG level AA criteria including:
An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart.
Graphical objects do not have to meet the contrast requirements when "a particular presentation of graphics is essential to the information being conveyed". The Essential exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning. For example:
Pie charts make a good case study for the graphical objects part of this success criteria, the following pie charts are intended to convey the proportion of market share each browser has. NB: The actual figures are made up, these are not actual market shares.
The graphical objects are the circles (measured against the background) and the icons in each circle (measured against the circle's background).
There are many possible solutions to ensuring contrast, the example shows the use of borders. Other techniques are to use darker colours for the circle backgrounds, or to add text labels & values for each item.
A summary of the high-level process for finding and assessing non-text graphics on a web page:
The techniques below each have testing criteria.
People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.