Skip to content
This repository has been archived by the owner on Jun 30, 2018. It is now read-only.

Non-text-contrast understanding - additional content #776

Merged
merged 8 commits into from
Apr 5, 2018
Merged

Non-text-contrast understanding - additional content #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
340259e
Adding resource section and infographics examples.
alastc Feb 23, 2018
3dd6d20
Clarifying that inactive uic = disabled uic
goodwitch Mar 20, 2018
5cdf1e6
Minor changes it understanding inactive
goodwitch Mar 20, 2018
434e10a
one more edit for fun
goodwitch Mar 20, 2018
26984b3
more changes to make gower less sad
goodwitch Mar 20, 2018
9769783
minor edit
goodwitch Mar 20, 2018
1de532d
Added text for focus
Mar 24, 2018
40dc147
well formedness
Apr 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added understanding/21/img/infographic-fail.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/21/img/infographic-pass.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 58 additions & 18 deletions understanding/21/non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
figure {
text-align: center;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
Expand All @@ -38,31 +41,33 @@ <h1>Understanding Non-text Contrast</h1>
<h2>Intent</h2>


<p>The intent of this Success Criterion is to ensure that user interface components and meaningful (non-text) graphics are distinguishable by people with moderately low vision (who do not use contrast-enhancing assistive technology). The requirements and rationale are similar to those for text in WCAG 2.0's <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a>.</p>
<p>The intent of this Success Criterion is to ensure that active user interface components and meaningful (non-text) graphics are distinguishable by people with moderately low vision (who do not use contrast-enhancing assistive technology). The requirements and rationale are similar to those for text in WCAG 2.0's <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a>.</p>

<p>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.</p>


<section id="user-interface-components">
<h3>User Interface Components</h3>
<h3>Active User Interface Components</h3>

<p>For controls on the page, such as buttons and form fields, the visual boundaries of the component must have sufficient contrast with the adjacent background. Also, the visual effects which indicate state, such as whether a component is selected or focused, must also provide the minimum 3:1 contrast with the adjacent background of the component.</p>
<p>For active controls on the page, such as buttons and form fields, the visual boundaries of the component must have sufficient contrast with the adjacent background. Also, the visual effects which indicate state, such as whether a component is selected or focused, must also provide the minimum 3:1 contrast with the adjacent background of the component.</p>
<p>This success criteria does not require that controls have a visual indicator, but that if there is an indicator, it has sufficient contrast.</p>
<p>Regardless of the whether or not there is a visible indication of the hit area for the button, the focus indicator for the component must have sufficient contrast when the component is focused.</p>


<section id="ref-1-4-1">
<h4>Note on SC 1.4.1 Use of Color</h4>
<p>1.4.1 states <q>Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.</q> Although every object on a screen is arguably created through use of color only (shapes are created by altering a bunch of pixels from white to another color), the context made clear in the Understanding document is that 1.4.1 addresses changing <strong>only the color</strong> of an object (or text) without otherwise altering the object's form. If an author adds an outline or shadow to a shape to indicate a change in state, that is not relying solely on use of color.
<br><strong>Relative luminence:</strong> If the selected and unselected states of an object <em>do</em> vary only by color, this is still acceptable so long as the luminosity contrast ratio between the selected and unselected colors differs by at least 3:1.
<br><strong>User agent enhancment:</strong> If the author-supplied visual indicators of change in state vary <em>only</em> by color, this is still acceptable if the user agent provides a redundant visual effect which authors do not obscure.</p>
<br /><strong>Relative luminence:</strong> If the selected and unselected states of an object <em>do</em> vary only by color, this is still acceptable so long as the luminosity contrast ratio between the selected and unselected colors differs by at least 3:1.
<br /><strong>User agent enhancment:</strong> If the author-supplied visual indicators of change in state vary <em>only</em> by color, this is still acceptable if the user agent provides a redundant visual effect which authors do not obscure.</p>
</section>

<section id="ui-contrast-examples">
<h4>User Interface Component Examples</h4>
<p>For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.<p>
<h4>Active User Interface Component Examples</h4>
<p>For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.</p>

<table border="1" style="vertical-align:top;">
<caption>
User Interface Component Examples
Active User Interface Component Examples
</caption>
<tr>
<th width="20%">Type</th>
Expand All @@ -78,21 +83,21 @@ <h4>User Interface Component Examples</h4>
<tr>
<th>Text Input with border</th>
<td>Text Input with a border. The blue outline does provide a sufficient contrast that is equal to 3 to 1. Blue border line (#6699cc) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.</td>
<td> <input type="text" class="example2" placeholder="Example input"></td>
<td> <input type="text" class="example2" placeholder="Example input" /></td>
</tr>
<tr>
<th>Text input using background colour</th>
<td>Text input using a different in background colour to indicate the input.</td>
<td><label class="example3">Name: <input type="text" class="example3"></label></td>
<td><label class="example3">Name: <input type="text" class="example3" /></label></td>
</tr>
</table>
<p>@@Additional examples could be added for any native html elements that are interactive and have visual affordances (including: <a href="https://www.w3.org/TR/html5/forms.html#the-select-element">select</a>, <a href="https://www.w3.org/TR/html5/forms.html#radio-button-state-(type=radio)">radio button</a>, <a href="https://www.w3.org/TR/html5/forms.html#checkbox-state-(type=checkbox)">checkbox</a>, <a href="https://www.w3.org/TR/html51/interactive-elements.html#the-details-element">details</a> / <a href="https://www.w3.org/TR/html51/interactive-elements.html#elementdef-summary">summary</a>, <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">video</a> and/or <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element">audio</a> controls ). @@</p>

<h4>Disabled User Interface Components</h4>
<h4>Inactive User Interface Components</h4>

<p>User Interface Components that are disabled are not required to meet the color contrast requirements in WCAG 2.1. Due to the different needs and preferences of people with low vision and people with cognitive disabilities, a contrast requirement for disabled user interface components is recommended for Preferences in Silver.</p>
<p>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. Due to the different needs and preferences of people with low vision and people with cognitive disabilities, a contrast requirement for disabled user interface components is recommended for future advancements in user preferences.</p>

<p>A disabled user interface element 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.</p>
<p>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.</p>

</section>
</section><!-- end user-interface-component section -->
Expand Down Expand Up @@ -136,7 +141,7 @@ <h3>Graphical Objects</h3>
<td><!-- Sourced from wikipedia under CC sharealike license https://en.wikipedia.org/wiki/File:Simple_line_graph_of_ACE_2012_results_by_candidate_sj01.png -->
<img src="https://alastairc.ac/wp-content/uploads/2017/03/Simple_line_graph.png" alt="A line chart of votes across a region, with 4 lines of different colors tracking over time." width="200" /></td>

<td><p>In order to understand the graph you need to discern the lines and shapes for each condition. Therefore each line and colored shape is a &lsquo;graphical object&rsquo; in the graph and should be over 3:1 against the white background. Most of them have good contrast except the green triangles.</p>
<td><p>In order to understand the graph you need to discern the lines and shapes for each condition. Therefore each line and colored shape is a &#8216;graphical object&#8217; in the graph and should be over 3:1 against the white background. Most of them have good contrast except the green triangles.</p>
<p>The graphical objects are the lines in the graph, including the background lines for the values, and the colored lines with shapes.</p>
<p>The lines should have 3:1 contrast against their background, but as there is little overlap with other lines they do not need to contrast with each other. (See the testing principles below.)</p>
</td>
Expand All @@ -154,9 +159,9 @@ <h3>Graphical Objects</h3>

<p>Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:</p>
<ul>
<li>Assess what part of each image is needed to understand what it represents.<br>
<li>Assess what part of each image is needed to understand what it represents.<br />
The magnet's U shape can be conveyed by the outline or by the red background (either is acceptable). The white tips are also important (otherwise it would be a horseshoe), which needs to contrast with the red background.</li>
<li>Assume that the user could only see those aspects, do they contrast with the adjacent colors?<br>
<li>Assume that the user could only see those aspects, do they contrast with the adjacent colors?<br />
The outline of the magnet contrasts with the surrounding text (black/white), and the red and white between the tips also has sufficient contrast.</li>
</ul>

Expand Down Expand Up @@ -191,7 +196,17 @@ <h3>Dynamic Examples</h3>
<h3>Infographics</h3>

<p>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.</p>
<!-- End Update -->

<p>Infographics often fail to meet have several WCAG level AA criteria including: (*@@@ link to other understanding docs)</p>

<ul>
<li>1.1.1 Non-text Content</li>
<li>1.4.1 Use of Color</li>
<li>1.4.3 (Text) Contrast</li>
<li>1.4.5 Images of Text</li>
</ul>

<p>Where an infographic passes other success criteria <em>and</em> requires the user to perceive graphical objects in order to understand the content, each graphical object should have sufficient contast.</p>
</section>

<section id="exceptions">
Expand Down Expand Up @@ -247,7 +262,7 @@ <h3>Benefits</h3>
<h2>Examples</h2>
<ul>
<li>Status icons on an application's dashboard (without associated text) have a 3:1 minimum contrast ratio.</li>
<li>An input has a </li>
<li>A text input has a dark border around the white editable area.</li>
<li>A graph uses a light background and ensures that the colors for each line have a 3:1 contrast ratio against the background.</li>
</ul>
<section class="example">
Expand All @@ -272,6 +287,31 @@ <h3>Pie Charts</h3>
</figcaption>
</figure>
</section>
<section class="example">
<h3>Infographics</h3>
<figure>
<img src="img/infographic-fail.png" alt="An infographic showing lightly coloured circles of various sizes to indicate the size of five different social networks" />
<figcaption>
<p><strong>Fail:</strong> Discerning the circles is required to understand the size of network and discerning the icons in each circle is required to identify which network it shows.</p>
</figcaption>
</figure>
<p>The graphical objects are the circles (measured against the background) and the icons in each circle (measured against the circle's background).</p>
<figure>
<img src="img/infographic-pass.png" alt="The same infographic with contrasting text, dark borders around the circles, and contrasting icons." />
<figcaption>
<p><strong>Pass:</strong> The circles have contrasting borders and the icons are a contrasting dark colour against the light circle backgrounds.</p>
</figcaption>
</figure>
<p>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 &amp; values for each item.</p>
</section>
</section>
<section id="resources">
<h2>Resources </h2>
<ul>
<li><a href="http://w3c.github.io/low-vision-a11y-tf/requirements.html">Accessibility Requirements for People with Low Vision</a>.</li>
<li><a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017May/0007.html">Smith Kettlewell Eye Research Institute</a> - &quot;If the text is better understood with the graphics, they should be equally visible as the text&quot;.</li>
<li><a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017Jun/0054.html">Gordon Legge</a> - &quot;Contrast requirements for form controls should be equivalent to contrast requirements for text&quot;.</li>
</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
Expand Down