Link text
-
- {% include "./img/1.4.11-ntc-default-link-text.svg" %}
-
- Inactive User Interface Components
@@ -519,7 +212,6 @@Inactive User Interface Components
Graphical Objects
-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.
@@ -559,7 +251,7 @@Graphical Objects
The graphical objects are the "U" shape (by outline or by the
- solid red color #D0021B), and each tip of the magnet.
+ solid red color #D0021B), and each tip of the magnet.
Graphical Objects
Required for Understanding
+Required for understanding
-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:
--
-
-
-
A graphic with text embedded or overlaid conveys the same information, such as labels and values on a chart.
-Text within a graphic must meet 1.4.3 Contrast (Minimum).
-
- - The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality. -
- The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed. -
- The graphic is part of a logo or brand name (which is considered "essential" to its presentation). -
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:
+-
+
-
+
A graphic with text embedded or overlaid conveys the same information, such as labels and values on a chart.
+Text within a graphic must meet 1.4.3 Contrast (Minimum).
+
+ - The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality. +
- The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed. +
- The graphic's presentation falls under the essential exception. +
Logos
- -Logos are exempted from contrast requirements, under the assumption that they must comply with stricter color choices mandated - by corporate identity or brand guidelines. However, this can be problematic when logos act as user interface components - (such as a link or other interactive control). In these cases, as a best practice, authors should consider choosing a variant of - the logo that has sufficient contrast, if allowed by the corporate identity or brand guidelines. - Alternatively, authors should consider providing an equivalent user interface component which serves the same purpose and meets - contrast requirements.
- -If logos are presented with an insufficient contrast, but their presentation was an author choice rather than - being mandated by corporate identity or brand guidelines, then that particular low contrast presentation is - not "essential", and the logo is not exempt from the contrast requirements.
- -
- Gradients
- -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 color which does not have sufficient contrast, can you still identify and understand the graphical object?
-
- Dynamic Examples
- -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, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.
- - -
- Gradients
+ +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 color which does not have sufficient contrast, can you still identify and understand the graphical object?
+
+ Interactive changes in contrast
+ +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, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.
+ + +
+ Infographics
+Infographics
-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 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:
+Infographics often fail to meet several WCAG level AA criteria including:
- + -An infographic can use text which meets the other criteria to minimize the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infographic is not relied upon for understanding.
+An infographic can use text which meets the other criteria to minimize the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infographic is not relied upon for understanding.
Symbolic text characters
Essential Exception
+Essential exception
-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:
+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:
-
-
- Logos and logotypes: The brand logo of an organization or product is the representation of that organization, and is often +
- Logos and logotypes: The brand logo of an organization or product is the representation of that organization, and is generally presented in the brand's specific colors; it is therefore exempt.
- Flags: 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. @@ -736,10 +408,33 @@
Essential Exception
However, this exemption can be problematic when these graphical objects also act as user interface components (or are the only visible content of a user interface component). + While normatively the exemption "carries over" to the user interface component, as a recommended practice authors are encouraged to make sure that there is an aspect of the user interface components that allows users to identify the components.
+ +In the case of logos, authors may choose a variant of the logo that has sufficient contrast, if variants are allowed by the + relevant corporate identity or brand guidelines. Otherwise, authors should consider providing an additional visual element with sufficient + contrast that helps identify the user interface component, such as additional text.
+ +Alternatively, authors may provide an equivalent user interface component which serves the same purpose + and meets contrast requirements.
+ +Note that even when graphical objects acting as user interface components are exempted, the user interface components are not exempted from other aspects of this success criterion, such as the requirement to have sufficient contrast for the control's focus indicator.
+ +Essential exception and author choice
+ +If exempted graphical objects (such as logos) are presented with an insufficient contrast, but their low contrast presentation + was an author choice, then that particular low contrast presentation is not "essential", and the graphical object + is not exempt from the contrast requirements.
+ +
+ 
- 
- 
- 
- 
-