From 7aa4ad6245c041a4fb716366bc9bf02233908017 Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Wed, 7 Apr 2021 17:42:36 +0000 Subject: [PATCH] Accessibility: Administration: Update various background colors for increased contrast. This ensures that contrast between text color and background meets the WCAG 2.0 AA recommended value. The following locations were changed: - Network List Tables: Use lighter background colors for site status indicator. - Nav Menus: Use a lighter background color for invalid menu items. - Pointers: Use a darker background for pointer header. - Themes: Use darker background on filter button hover. - Customizer: Use darker background for selected widget. Follow-up to [50025], [50571]. Props kebbet, melchoyce, peterwilsoncc. Merges [50687] to the 5.7 branch. Fixes #52760. git-svn-id: https://develop.svn.wordpress.org/branches/5.7@50688 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 2 +- src/wp-admin/css/customize-widgets.css | 9 ++++----- src/wp-admin/css/list-tables.css | 12 ++++-------- src/wp-admin/css/nav-menus.css | 4 ++-- src/wp-includes/css/wp-pointer.css | 10 +++++----- 5 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 0848c93615..3f1938aeee 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1179,7 +1179,7 @@ th.action-links { .show-filters .wp-filter .drawer-toggle:hover, .show-filters .wp-filter .drawer-toggle:focus { - background: #72aee6; + background: #2271b1; } .show-filters .wp-filter .drawer-toggle:before { diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index 0918cd50e3..3e48c47800 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -137,7 +137,7 @@ #customize-theme-controls .move-widget-area { display: none; background: #fff; - border: 1px solid #dcdcde; + border: 1px solid #c3c4c7; border-top: none; cursor: auto; } @@ -163,7 +163,7 @@ margin: 0; padding: 13px 15px 15px 42px; color: #50575e; - border-top: 1px solid #f0f0f1; + border-top: 1px solid #c3c4c7; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; @@ -182,13 +182,12 @@ } #customize-theme-controls .widget-area-select li:last-child { - border-bottom: 1px solid #f0f0f1; + border-bottom: 1px solid #c3c4c7; } #customize-theme-controls .widget-area-select .selected { color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); - background: #72aee6; + background: #2271b1; } #customize-theme-controls .widget-area-select .selected:before { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index f05aea526a..ddf7891ae2 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1577,20 +1577,16 @@ div.action-links, /* ms */ /* Background Color for Site Status */ .wp-list-table .site-deleted, -.wp-list-table tr.site-deleted { - background: #ff8085; -} -.wp-list-table .site-spammed, -.wp-list-table tr.site-spammed { - background: #ffabaf; -} +.wp-list-table tr.site-deleted, .wp-list-table .site-archived, .wp-list-table tr.site-archived { background: #fcf0f1; } +.wp-list-table .site-spammed, +.wp-list-table tr.site-spammed, .wp-list-table .site-mature, .wp-list-table tr.site-mature { - background: #facfd2; + background: #fcf9e8; } .sites.fixed .column-lastupdated, diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index 971cae4381..0d36b1512d 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -455,8 +455,8 @@ ul.add-menu-item-tabs li { } #menu-to-edit .menu-item-invalid .menu-item-handle { - background: #facfd2; - border-color: #ffabaf; + background: #fcf0f1; + border-color: #d63638; } .no-js .menu-item-edit-active .item-edit { diff --git a/src/wp-includes/css/wp-pointer.css b/src/wp-includes/css/wp-pointer.css index afa62108f8..9263346e06 100644 --- a/src/wp-includes/css/wp-pointer.css +++ b/src/wp-includes/css/wp-pointer.css @@ -11,18 +11,18 @@ position: relative; margin: -1px -1px 5px; padding: 15px 18px 14px 60px; - border: 1px solid #72aee6; + border: 1px solid #2271b1; border-bottom: none; line-height: 1.4; font-size: 14px; color: #fff; - background: #72aee6; + background: #2271b1; } .wp-pointer-content h3:before { background: #fff; border-radius: 50%; - color: #72aee6; + color: #2271b1; content: "\f227"; font: normal 20px/1.6 dashicons; position: absolute; @@ -141,7 +141,7 @@ .wp-pointer-undefined .wp-pointer-arrow { top: 0; border-width: 0 13px 13px 13px; - border-bottom-color: #72aee6; + border-bottom-color: #2271b1; } .wp-pointer-top .wp-pointer-arrow-inner, @@ -150,7 +150,7 @@ margin-left: -13px; margin-top: -13px; border: 13px solid transparent; - border-bottom-color: #72aee6; + border-bottom-color: #2271b1; display: block; content: " "; }