sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Improve color contrast for the blue links :hover state.

Browse Source 
For a number of years, WordPress has been using a `#00a0d2` blue shade for the links `:hover` state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.

The new `#006799` blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.

Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.


git-svn-id: https://develop.svn.wordpress.org/trunk@48368 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2020-07-07 10:09:23 +00:00
parent 6bc5b06d20
commit 7348112444
12 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/_enqueues/vendor/thickbox/thickbox.css vendored
View File

@ -143,7 +143,7 @@
#TB_closeWindowButton:hover .tb-close-icon, #TB_closeWindowButton:hover .tb-close-icon,
#TB_closeWindowButton:focus .tb-close-icon { #TB_closeWindowButton:focus .tb-close-icon {
color: #00a0d2; color: #006799;
} }
#TB_closeWindowButton:focus .tb-close-icon { #TB_closeWindowButton:focus .tb-close-icon {

8
src/wp-admin/css/common.css
View File

@ -225,7 +225,7 @@ div {
a:hover, a:hover,
a:active { a:active {
color: #00a0d2; color: #006799;
} }
a:focus, a:focus,
@ -1028,7 +1028,7 @@ th.action-links {
.filter-links li > a:focus, .filter-links li > a:focus,
.show-filters .filter-links a.current:hover, .show-filters .filter-links a.current:hover,
.show-filters .filter-links a.current:focus { .show-filters .filter-links a.current:focus {
color: #00a0d2; color: #006799;
} }
.wp-filter .search-form { .wp-filter .search-form {
@ -1091,7 +1091,7 @@ th.action-links {
.wp-filter .button.drawer-toggle:focus, .wp-filter .button.drawer-toggle:focus,
.wp-filter .drawer-toggle:focus:before { .wp-filter .drawer-toggle:focus:before {
background-color: transparent; background-color: transparent;
color: #00a0d2; color: #006799;
} }
.wp-filter .button.drawer-toggle:hover, .wp-filter .button.drawer-toggle:hover,
@ -2918,7 +2918,7 @@ div.action-links {
.plugin-details-modal #TB_closeWindowButton:hover, .plugin-details-modal #TB_closeWindowButton:hover,
.plugin-details-modal #TB_closeWindowButton:focus { .plugin-details-modal #TB_closeWindowButton:focus {
color: #00a0d2; color: #006799;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }

2
src/wp-admin/css/edit.css
View File

@ -972,7 +972,7 @@ strong.privacy-policy-tutorial {
} }
a.post-format-icon:hover:before { a.post-format-icon:hover:before {
color: #00a0d2; color: #006799;
} }
#post-formats-select { #post-formats-select {

2
src/wp-admin/css/forms.css
View File

@ -142,7 +142,7 @@ input[type="radio"]:checked + label:before {
.wp-core-ui input[type="reset"]:hover, .wp-core-ui input[type="reset"]:hover,
.wp-core-ui input[type="reset"]:active { .wp-core-ui input[type="reset"]:active {
color: #00a0d2; color: #006799;
} }
td > input[type="checkbox"], td > input[type="checkbox"],

2
src/wp-admin/css/install.css
View File

@ -20,7 +20,7 @@ a {
a:hover, a:hover,
a:active { a:active {
color: #00a0d2; color: #006799;
} }
a:focus { a:focus {

4
src/wp-admin/css/login.css
View File

@ -27,7 +27,7 @@ a {
a:hover, a:hover,
a:active { a:active {
color: #00a0d2; color: #006799;
} }
a:focus { a:focus {
@ -296,7 +296,7 @@ p {
.login #nav a:hover, .login #nav a:hover,
.login #backtoblog a:hover, .login #backtoblog a:hover,
.login h1 a:hover { .login h1 a:hover {
color: #00a0d2; color: #006799;
} }
.login #nav a:focus, .login #nav a:focus,

2
src/wp-admin/css/media.css
View File

@ -306,7 +306,7 @@
#find-posts-close:hover, #find-posts-close:hover,
#find-posts-close:focus { #find-posts-close:focus {
color: #00a0d2; color: #006799;
} }
#find-posts-close:focus { #find-posts-close:focus {

2
src/wp-includes/css/buttons.css
View File

@ -205,7 +205,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:hover,
.wp-core-ui .button-link:active { .wp-core-ui .button-link:active {
color: #00a0d2; color: #006799;
} }
.wp-core-ui .button-link:focus { .wp-core-ui .button-link:focus {

4
src/wp-includes/css/editor.css
View File

@ -82,7 +82,7 @@
.mce-window-head .mce-close:hover .mce-i-remove:before, .mce-window-head .mce-close:hover .mce-i-remove:before,
.mce-window-head .mce-close:focus .mce-i-remove:before { .mce-window-head .mce-close:focus .mce-i-remove:before {
color: #00a0d2; color: #006799;
} }
.mce-window-head .mce-close:focus .mce-i-remove, .mce-window-head .mce-close:focus .mce-i-remove,
@ -1446,7 +1446,7 @@ i.mce-i-wp_code:before {
#wp-link-close:hover, #wp-link-close:hover,
#wp-link-close:focus { #wp-link-close:focus {
color: #00a0d2; color: #006799;
} }
#wp-link-close:focus { #wp-link-close:focus {

2
src/wp-includes/css/jquery-ui-dialog.css
View File

@ -307,7 +307,7 @@
.ui-button.ui-dialog-titlebar-close:hover, .ui-button.ui-dialog-titlebar-close:hover,
.ui-button.ui-dialog-titlebar-close:focus { .ui-button.ui-dialog-titlebar-close:focus {
color: #00a0d2; color: #006799;
} }
.ui-button.ui-dialog-titlebar-close:focus { .ui-button.ui-dialog-titlebar-close:focus {

8
src/wp-includes/css/media-views.css
View File

@ -41,7 +41,7 @@
.media-frame a:hover, .media-frame a:hover,
.media-frame a:active { .media-frame a:active {
color: #00a0d2; color: #006799;
} }
.media-frame a:focus { .media-frame a:focus {
@ -236,11 +236,11 @@
.media-modal-close:hover, .media-modal-close:hover,
.media-modal-close:active { .media-modal-close:active {
color: #00a0d2; color: #006799;
} }
.media-modal-close:focus { .media-modal-close:focus {
color: #00a0d2; color: #006799;
border-color: #5b9dd9; border-color: #5b9dd9;
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
/* Only visible in Windows High Contrast mode */ /* Only visible in Windows High Contrast mode */
@ -1597,7 +1597,7 @@
.media-selection .button-link:hover, .media-selection .button-link:hover,
.media-selection .button-link:focus { .media-selection .button-link:focus {
color: #00a0d2; color: #006799;
} }
.media-selection .button-link:last-child { .media-selection .button-link:last-child {

2
src/wp-includes/functions.php
View File

@ -3487,7 +3487,7 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) {
} }
a:hover, a:hover,
a:active { a:active {
color: #00a0d2; color: #006799;
} }
a:focus { a:focus {
color: #124964; color: #124964;