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

Jump to bottom

changes to address #517 #530

Merged
merged 1 commit into from Nov 20, 2018
Merged

changes to address #517 #530

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 5 additions & 2 deletions understanding/21/non-text-contrast.html
View file
Open in desktop
Expand Up @@ -18,8 +18,11 @@ <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 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 in 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>
<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>

<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>
Expand Down