Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non-text contrast updates #550

Merged
merged 18 commits into from
Jan 17, 2019
Merged

Non-text contrast updates #550

Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
63f784a
V minor indentation updates.
alastc Dec 6, 2018
1d9a86f
Updates to address various issues.
alastc Dec 6, 2018
dbe3f10
Updates from Jared.
alastc Dec 7, 2018
d6150ae
For Jon's comments about adjecent colors
alastc Dec 7, 2018
97adebe
fixing it's and colours
Dec 8, 2018
a8b016e
Updates for Jared part 2
alastc Dec 9, 2018
aabd363
Added heading for states
alastc Dec 10, 2018
610824f
Incorporatign most of #563
alastc Dec 15, 2018
51aa7d7
Updated based on call on 18th Dec
alastc Jan 4, 2019
0dfc05b
Updates from 8th Jan call.
alastc Jan 10, 2019
2d06213
Further examples for adjacent.
alastc Jan 10, 2019
619523c
Updated techniques available.
alastc Jan 10, 2019
aa53b8e
Call updates.
alastc Jan 15, 2019
3e6645c
moving the change of hue section and adding pics.
alastc Jan 16, 2019
4532d19
Wording changes to make SC references consistent.
alastc Jan 16, 2019
d1da0e4
Merge branch 'master' into non-text-contrast-updates
alastc Jan 16, 2019
dbc40b4
Correcting img tags.
alastc Jan 17, 2019
75f951e
fix width
Jan 17, 2019
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
80 changes: 44 additions & 36 deletions understanding/21/non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>Understanding Non-text Contrast</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
</head>
<body>
<h1>Understanding Non-text Contrast</h1>
Expand All @@ -20,31 +20,38 @@ <h3>Active User Interface Components</h3>

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

<p class="note">In cases where the state of a user interface component is apparent without relying on visual information, this Success Criterion does not require that visual information meet the 3:1 contrast ratio. For example, the Active state on a link does not rely on the visual information because the user is actively clicking on the component at the same time.</p>
<p>This Success Criterion does not require that all states are differentiated within the component. With the exception of focus indicators, links and buttons are not required to differentiate states such as hover. Controls which convey the value of an input, such as checkboxes, sliders, and radio buttons must meet the contrast requirement for those states. For example, the tick in a checkbox must meet the contrast requirement.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps "This Success Criterion does not require that all states are differentiated within the component - only where the visual information is required to identify the component or the state. "


<figure>
<!-- example from https://getbootstrap.com/docs/4.1/components/buttons/ -->
<img alt="Two buttons on a white background. The first has a blue border to indicate its boundary, white internal background and blue text. The second adds a thick blue-grey outer border to show focus." src="img/first-button-example.png" />
<figcaption>An active control showing the visual boundary by default (color of <code>#007bff</code> on white), and the focus indicator</figcaption>
</figure>
<h4>Boundaries</h4>

<p>This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator 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="contrast-minimum">1.4.3 Contrast (Minimum)</a>) or icon contrast covered by the Graphical Objects part 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>
<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>

<h4>Focus indicator and Use of Color</h4>

<p>The <a href="use-of-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 a control's indicator of state (e.g., button background) varies only by color 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 where there is no other visual indication that the text is linked (i.e., 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 the related Success Criteria 1.4.1.</p>

<p>The visual focus indicator for a component <em>must</em> 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. If the focus state relies on color (e.g., changing <em>only</em> the background color of a button), then changing from one color to another that has at least a 3:1 contrast ratio is a method of meeting <a href="../20/focus-visible.html">2.4.7 Focus Visible</a>.</p>

<figure>
<img alt="Two buttons, the first has a blue outline and inner white background with blue text. The second has a blue background with white text, reversing the color scheme." src="img/button-example2.png" />
<figcaption>An active control with a visual boundary, and a focus (or other) state that is highlighted with a contrasting change of color</figcaption>
<img alt="Two buttons, the first has a blue outline and inner white background with blue text. The second has a blue background with white text, reversing the color scheme." src="img/button-example2.png" />
<figcaption>An active control with a visual boundary, and a focus (or other) state that is highlighted with a contrasting change of color</figcaption>
</figure>

<section>
<p>Another method to provide a visual focus indicator that requires contrast is changing the shape of the control. For example, if a button has a dark border the focus states could add a dark outline, effectively changing the shape of the component. This method does not require contrast with both the component and the background, because the shape of the component has changed.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perhaps "shape or size"?


<figure>
<!-- example from https://getbootstrap.com/docs/4.1/components/buttons/ -->
<img alt="Two buttons on a white background. The first has a blue border to indicate its boundary, white internal background and blue text. The second adds a thick blue-grey outer border to show focus." src="img/first-button-example.png" />
<figcaption>An active control showing the visual boundary by default, and the focus indicator which changes the shape of the component</figcaption>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in this case, it changes the apparent size of the component, not the shape.

</figure>


<section>
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't provide any examples of selection, seems like a gap


Expand Down Expand Up @@ -254,20 +261,20 @@ <h4>Infographics</h4>

</section>
<section>
<h4>Essential Exception</h4>
<h4>Essential Exception</h4>

<p>Graphical objects do not have to meet the contrast requirements when &quot;a particular presentation of graphics is essential to the information being conveyed&quot;. 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:</p>
<ul>
<li><strong>Logotypes and flags</strong>: 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.</li>
<li><strong>Sensory</strong>: There is no requirement to change pictures of real life scenes such as photos of people or scenery.</li>
<li><strong>Representing other things</strong>: If you cannot represent the graphic in any other way, it is essential. Examples include:
<ul>
<li>Screenshots to demonstrate how a website appeared.</li>
<li>Diagrams of medical information that use the colors found in biology (<a href="https://commons.wikimedia.org/wiki/File:Schematic_diagram_of_the_human_eye_it.svg">example medical schematic from Wikipedia</a>).</li>
<li>Colour gradients that represent a measurement, such as heat maps (<a href="https://commons.wikimedia.org/wiki/File:Eyetracking_heat_map_Wikipedia.jpg">example heatmap from Wikipedia</a>).</li>
</ul>
</li>
</ul>
<p>Graphical objects do not have to meet the contrast requirements when &quot;a particular presentation of graphics is essential to the information being conveyed&quot;. 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:</p>
<ul>
<li><strong>Logotypes and flags</strong>: 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.</li>
<li><strong>Sensory</strong>: There is no requirement to change pictures of real life scenes such as photos of people or scenery.</li>
<li><strong>Representing other things</strong>: If you cannot represent the graphic in any other way, it is essential. Examples include:
<ul>
<li>Screenshots to demonstrate how a website appeared.</li>
<li>Diagrams of medical information that use the colors found in biology (<a href="https://commons.wikimedia.org/wiki/File:Schematic_diagram_of_the_human_eye_it.svg">example medical schematic from Wikipedia</a>).</li>
<li>Colour gradients that represent a measurement, such as heat maps (<a href="https://commons.wikimedia.org/wiki/File:Eyetracking_heat_map_Wikipedia.jpg">example heatmap from Wikipedia</a>).</li>
</ul>
</li>
</ul>
</section>

<section id="testing-principles">
Expand All @@ -276,8 +283,8 @@ <h3>Testing Principles</h3>
<ul>
<li>Identify each user-interface component (link, button, form control) on the page and:
<ul>
<li>Identify the visual (non-text) indicators of the component in the default (on page load) state and test the contrast ratio against the adjacent colors.</li>
<li>Identify the state indicators and test the contrast ratio against the adjacent colors.</li>
<li>Identify the visual (non-text) indicators of the component that are required to identify that a control exists. In the default (on page load) state, test the contrast ratio against the adjacent colors.</li>
<li>Identify the state indicators that are required for operation (focus-state, and functional states such as checked / selected) and test the contrast ratio against the adjacent colors.</li>
</ul>
</li>
<li>Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
Expand Down Expand Up @@ -364,13 +371,13 @@ <h2>Techniques</h2>
<section id="sufficient">
<h3>Sufficient</h3>
<section class="situation">
<h4>User Interface Component contrast</h4>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
</ul>
<h4>User Interface Component contrast</h4>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
</ul>
</section>
<section class="situation">
<h4>Graphics with sufficient contrast</h4>
<h4>Graphics with sufficient contrast</h4>
<ul>
<li>Contrasting colors between graphical objects (TBD)</li>
<li>Include contrasting lines between adjoining colors (TBD)</li>
Expand All @@ -397,8 +404,9 @@ <h3>Advisory</h3>
<h3>Failures</h3>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="general">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li>
<li>@@ A component that only changes the focus state by changing colour without sufficient contrast (may be better placed under 2.4.7?)</li>
</ul>
</section>
</section>
</section>
</body>
</html>