Changeset 50687

Timestamp:

04/07/2021 04:36:16 PM (6 years ago)

Author:

ryelle

Message:

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.
Fixes #52760.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-admin/css/customize-widgets.css (modified) (3 diffs)
• wp-admin/css/list-tables.css (modified) (1 diff)
• wp-admin/css/nav-menus.css (modified) (1 diff)
• wp-includes/css/wp-pointer.css (modified) (4 diffs)

trunk/src/wp-admin/css/common.css

@@ -1180 +1180 @@
 .show-filters .wp-filter .drawer-toggle:hover,
 .show-filters .wp-filter .drawer-toggle:focus {
-        background: #72aee6;
+        background: #2271b1;
 }
 

trunk/src/wp-admin/css/customize-widgets.css

@@ -138 +138 @@
         display: none;
         background: #fff;
-        border: 1px solid #dcdcde;
+        border: 1px solid #c3c4c7;
         border-top: none;
         cursor: auto;
@@ -164 +164 @@
         padding: 13px 15px 15px 42px;
         color: #50575e;
-        border-top: 1px solid #f0f0f1;
+        border-top: 1px solid #c3c4c7;
         cursor: pointer;
         -webkit-user-select: none;
@@ -183 +183 @@
 
 #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;
 }
 

trunk/src/wp-admin/css/list-tables.css

@@ -1578 +1578 @@
 /* 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;
 }
 

trunk/src/wp-admin/css/nav-menus.css

@@ -456 +456 @@
 
 #menu-to-edit .menu-item-invalid .menu-item-handle {
-        background: #facfd2;
-        border-color: #ffabaf;
+        background: #fcf0f1;
+        border-color: #d63638;
 }
 

trunk/src/wp-includes/css/wp-pointer.css

@@ -12 +12 @@
         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;
 }
 
@@ -23 +23 @@
         background: #fff;
         border-radius: 50%;
-        color: #72aee6;
+        color: #2271b1;
         content: "\f227";
         font: normal 20px/1.6 dashicons;
@@ -142 +142 @@
         top: 0;
         border-width: 0 13px 13px 13px;
-        border-bottom-color: #72aee6;
+        border-bottom-color: #2271b1;
 }
 
@@ -151 +151 @@
         margin-top: -13px;
         border: 13px solid transparent;
-        border-bottom-color: #72aee6;
+        border-bottom-color: #2271b1;
         display: block;
         content: " ";