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

Suggested edits for 1.4.11 #943

Merged
merged 7 commits into from Jun 8, 2018
Merged

Suggested edits for 1.4.11 #943

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4330f00
Suggested edits for 1.4.11
awkawk May 25, 2018
588dde4
changing out "relied upon" to avoid confusion
awkawk May 25, 2018
8f70ce8
minor change for state change
awkawk May 26, 2018
0c2ca27
changes following 5/29/18 call
awkawk May 29, 2018
6abed6a
Edits following CFC
awkawk Jun 1, 2018
68f51c5
edits per David comment
awkawk Jun 1, 2018
57f5438
changed example to address link identification
awkawk Jun 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 5 additions & 4 deletions understanding/21/non-text-contrast.html
View file
Open in desktop
Expand Up @@ -66,22 +66,23 @@ <h2>Intent</h2>
<section id="user-interface-components">
<h3>Active User Interface Components</h3>

<p>For active controls on the page, such as buttons and form fields, any visual boundary that indicates the component's hit area (the region where a pointer can activate the control) 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 background adjacent to the component.</p>
<p>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.</p>
<figure>
<!-- example from https://getbootstrap.com/docs/4.1/components/buttons/ -->
<img alt="Three buttons on a white background. The first has a dark grey border to indicate its boundary, white internal background and black text. The second adds a thick grey outer border to show focus. The third has the grey border with black background and white text." src="img/first-button-example.png" />
<figcaption>An active control showing the visual boundary by default, the focus indicator, and the hover state.</figcaption>
</figure>

<p>This success criteria does not require that controls have a visual boundary indicating the hit area, but that if there is an indicator then it has sufficient contrast. If only the text (or icon) is visible and there is no visual indication of the hit area, then there is no contrast requirement beyond the text contrast (<a href="visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a>) 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.</p>
<p>Regardless of the whether or not there is a visible boundary for the button, the focus indicator for the component must have sufficient contrast when the component is focused.</p>
<p>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 (<a href="visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a>) 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.</p>

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

<figure>
<img alt="Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border." src="img/minimal-button.png" />
<figcaption>An active control without a visual boundary, but with a focus indicator when focused.</figcaption>
</figure>

<p>The <a href="visual-audio-contrast-without-color">Use of Color</a> success criteria addresses changing <strong>only the color</strong> of an object (or text) without otherwise altering the object's form. If the states of an object vary by color this is acceptable if the luminosity contrast ratio between the colors of the states differ by at least 3:1, or there is another indicator of state.</p>
<p>The <a href="visual-audio-contrast-without-color">Use of Color</a> success criteria addresses changing <strong>only the color</strong> 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.</p>

<section>
<h4>Active User Interface Component Examples</h4>
Expand Down