id summary reporter owner description type status priority milestone component version severity resolution keywords cc focuses 47153 Field boundaries have insufficient color contrast anevins audrasjb "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" task (blessed) reopened normal 5.3 Administration minor has-screenshots wpcampus-report color-contrast form-controls has-patch 5-3-admin-css-changes ui, accessibility