Success Criterion 1.4.11 Non-Text Contrast *

Understanding Success Criterion: 

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;

Accessibility Level: 
AA
Exceptions to Success Criterion: 

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:
• Logotypes and flags: The brand logo of an organization or product is the representation of that organization and therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.
• Sensory: There is no requirement to change pictures of real life scenes such as photos of people or scenery.
• Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include:
◦ Screenshots to demonstrate how a website appeared.
◦ Diagrams of medical information that use the colors found in biology (example medical schematic from Wikipedia).
◦ Colour gradients that represent a measurement, such as heat maps (example heatmap from Wikipedia).

Intent of Success Criterion: 

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.
Active User Interface Components
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, any visual effects implemented which are necessary 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.

Specific Benefits of Success Criterion: 

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.