[wp-trac] [WordPress Trac] #47153: Field boundaries have insufficient color contrast
WordPress Trac
noreply at wordpress.org
Sat Sep 28 13:09:20 UTC 2019
#47153: Field boundaries have insufficient color contrast
-------------------------------------------------+-------------------------
Reporter: anevins | Owner: audrasjb
Type: task (blessed) | Status: reopened
Priority: normal | Milestone: 5.3
Component: Administration | Version:
Severity: minor | Resolution:
Keywords: has-screenshots wpcampus-report | Focuses: ui,
color-contrast form-controls has-patch 5-3 | accessibility
-admin-css-changes |
-------------------------------------------------+-------------------------
Description changed by afercia:
Old description:
> Moved from the WPCampus accessibility report issues on GitHub, see :
> https://github.com/WordPress/gutenberg/issues/15272
>
> * **Severity**:
> * Low
> * **Affected Populations**:
> * Low-Vision
> * Cognitively Impaired
> * **Platform(s)**:
> * All / Universal
> * **Components affected**:
> * Edit Media
>
> **Issue description**
> On the Edit Media page, several interactive components have insufficient
> color contrast for their borders or backgrounds, below the minimum 3:1
> for interface components:
>
> Text input borders: `#ddd` (light-grey) against `#fff` (white): 1.35.
> Checkbox and radio borders: `#b4b9be` (light grey) against `#fff`
> (white): 1.97.
> Focus shadow for fields and buttons: `#5b9dd9` (light blue) on `#fff`
> (white): 2.88.
> Sufficient color contrast is important for users who have low-vision or
> are color-blind, because content with a low contrast ratio may be
> difficult or impossible for such users to see.
>
> **Issue Code**
> {{{
> input[type=checkbox], input[type=color], input[type=date], input[type
> =datetime-local], input[type=datetime], input[type=email],
> input[type=month], input[type=number], input[type=password],
> input[type=radio], input[type=search], input[type=tel], input[type=text],
> input[type=time], input[type=url], input[type=week], select, textarea {
> border: 1px solid #ddd;
> box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
> background-color: #fff;
> ...
> }
>
> /* radio buttons, checkmarks */
> input[type=checkbox], input[type=radio] {
> border: 1px solid #b4b9be;
> ...
> }
>
> /* focus state */
> input[type=checkbox]:focus, input[type=color]:focus,
> input[type=date]:focus, input[type=datetime-local]:focus,
> input[type=datetime]:focus, input[type=email]:focus,
> input[type=month]:focus, input[type=number]:focus,
> input[type=password]:focus, input[type=radio]:focus,
> input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
> input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
> select:focus, textarea:focus {
> border-color: #5b9dd9;
> box-shadow: 0 0 2px rgba(30,140,190,.8);
> }
>
> /* buttons at top */
> .wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-
> core-ui .button:focus {
> box-shadow: 0 0 3px rgba(0,115,170,.8);
> }
>
> #screen-meta-links .show-settings {
> border: 0;
> ...
> }
> }}}
>
> **Remediation Guidance**
> Darken the gray borders and the focus shadow color to provide a minimum
> contrast ratio of 3:1 relative to the white background.
>
> Since box-shadow is not shown in High Contrast themes, this should
> also be supplemented with a transparent outline (or replaced with a
> visible outline).
>
> **Recommended Code**
> {{{
> input[type=checkbox], input[type=color], input[type=date], input[type
> =datetime-local], input[type=datetime], input[type=email],
> input[type=month], input[type=number], input[type=password],
> input[type=radio], input[type=search], input[type=tel], input[type=text],
> input[type=time], input[type=url], input[type=week], select, textarea {
> border: 1px solid #949494;
> box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
> background-color: #fff;
> ...
> }
>
> /* radio buttons, checkmarks */
> input[type=checkbox], input[type=radio] {
> border: 1px solid #949494;
> ...
> }
>
> /* focus state */
> input[type=checkbox]:focus, input[type=color]:focus,
> input[type=date]:focus, input[type=datetime-local]:focus,
> input[type=datetime]:focus, input[type=email]:focus,
> input[type=month]:focus, input[type=number]:focus,
> input[type=password]:focus, input[type=radio]:focus,
> input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
> input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
> select:focus, textarea:focus {
> border-color: #5999d4;
> box-shadow: 0 0 2px rgba(30,140,190,.8);
> outline: 1px solid transparent;
> }
>
> /* buttons at top */
> #screen-meta-links .show-settings:focus {
> border: 1px solid #0073aa;
> ...
> }
> }}}
>
> **Relevant standards**
> * 1.4.11 Non-text Contrast (Level AA)
>
> **Note**: This issue may be a duplicate with other existing
> accessibility-related bugs in this project. This issue comes from the
> Gutenberg accessibility audit, performed by Tenon and funded by WP
> Campus. This issue is GUT-76 in Tenon's report
>
> ''**Note**: Partly covered also in #15275''.
>
> ''**Note**: The media modals aren't part of Gutenberg. This issue should
> be moved to the core Trac under the Media component.''
>
> ''**Note**: There are also a few related core Trac tickets, see:''
> * https://core.trac.wordpress.org/ticket/44749
> * https://core.trac.wordpress.org/ticket/44606
> * https://core.trac.wordpress.org/ticket/38150
> * https://core.trac.wordpress.org/ticket/35596
New description:
Moved from the WPCampus accessibility report issues on GitHub, see :
https://github.com/WordPress/gutenberg/issues/15272
* **Severity**:
* Low
* **Affected Populations**:
* Low-Vision
* Cognitively Impaired
* **Platform(s)**:
* All / Universal
* **Components affected**:
* Edit Media
**Issue description**
On the Edit Media page, several interactive components have insufficient
color contrast for their borders or backgrounds, below the minimum 3:1
for interface components:
Text input borders: `#ddd` (light-grey) against `#fff` (white): 1.35.
Checkbox and radio borders: `#b4b9be` (light grey) against `#fff` (white):
1.97.
Focus shadow for fields and buttons: `#5b9dd9` (light blue) on `#fff`
(white): 2.88.
Sufficient color contrast is important for users who have low-vision or
are color-blind, because content with a low contrast ratio may be
difficult or impossible for such users to see.
**Issue Code**
{{{
input[type=checkbox], input[type=color], input[type=date], input[type
=datetime-local], input[type=datetime], input[type=email],
input[type=month], input[type=number], input[type=password],
input[type=radio], input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], input[type=week], select, textarea {
border: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
background-color: #fff;
...
}
/* radio buttons, checkmarks */
input[type=checkbox], input[type=radio] {
border: 1px solid #b4b9be;
...
}
/* focus state */
input[type=checkbox]:focus, input[type=color]:focus,
input[type=date]:focus, input[type=datetime-local]:focus,
input[type=datetime]:focus, input[type=email]:focus,
input[type=month]:focus, input[type=number]:focus,
input[type=password]:focus, input[type=radio]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
select:focus, textarea:focus {
border-color: #5b9dd9;
box-shadow: 0 0 2px rgba(30,140,190,.8);
}
/* buttons at top */
.wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-
core-ui .button:focus {
box-shadow: 0 0 3px rgba(0,115,170,.8);
}
#screen-meta-links .show-settings {
border: 0;
...
}
}}}
**Remediation Guidance**
Darken the gray borders and the focus shadow color to provide a minimum
contrast ratio of 3:1 relative to the white background.
Since box-shadow is not shown in High Contrast themes, this should
also be supplemented with a transparent outline (or replaced with a
visible outline).
**Recommended Code**
{{{
input[type=checkbox], input[type=color], input[type=date], input[type
=datetime-local], input[type=datetime], input[type=email],
input[type=month], input[type=number], input[type=password],
input[type=radio], input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], input[type=week], select, textarea {
border: 1px solid #949494;
box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
background-color: #fff;
...
}
/* radio buttons, checkmarks */
input[type=checkbox], input[type=radio] {
border: 1px solid #949494;
...
}
/* focus state */
input[type=checkbox]:focus, input[type=color]:focus,
input[type=date]:focus, input[type=datetime-local]:focus,
input[type=datetime]:focus, input[type=email]:focus,
input[type=month]:focus, input[type=number]:focus,
input[type=password]:focus, input[type=radio]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
select:focus, textarea:focus {
border-color: #5999d4;
box-shadow: 0 0 2px rgba(30,140,190,.8);
outline: 1px solid transparent;
}
/* buttons at top */
#screen-meta-links .show-settings:focus {
border: 1px solid #0073aa;
...
}
}}}
**Relevant standards**
* 1.4.11 Non-text Contrast (Level AA)
**Note**: This issue may be a duplicate with other existing accessibility-
related bugs in this project. This issue comes from the Gutenberg
accessibility audit, performed by Tenon and funded by WP Campus. This
issue is GUT-76 in Tenon's report
''**Note**: Partly covered also in #15275''.
''**Note**: The media modals aren't part of Gutenberg. This issue should
be moved to the core Trac under the Media component.''
''**Note**: There are also a few related core Trac tickets, see:''
* #44749
* #44606
* #38150
* #35596
--
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47153#comment:53>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list