From d43a7a9f067109f96b54282de9a8d5d23b626bc8 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 26 Jan 2016 00:03:34 +0000 Subject: [PATCH] Accessibility: Improve the color contrast ratio replacing the residual occurrences of the `#777` gray. Uses the existing `#72777c` on white backgrounds and the new `#555d66` "dark medium gray" on darker backgrounds. Fixes #35605. git-svn-id: https://develop.svn.wordpress.org/trunk@36396 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/about.css | 2 +- src/wp-admin/css/common.css | 14 ++++++------- src/wp-admin/css/customize-nav-menus.css | 4 ++-- src/wp-admin/css/customize-widgets.css | 2 +- src/wp-admin/css/dashboard.css | 20 +++++++++---------- src/wp-admin/css/edit.css | 2 +- src/wp-admin/css/forms.css | 13 ++---------- src/wp-admin/css/list-tables.css | 2 +- src/wp-admin/css/nav-menus.css | 2 +- src/wp-admin/css/revisions.css | 2 +- src/wp-admin/css/themes.css | 6 +++--- src/wp-admin/css/widgets.css | 9 +++++++-- src/wp-includes/css/media-views.css | 2 +- .../js/tinymce/skins/wordpress/wp-content.css | 10 +++++----- 14 files changed, 43 insertions(+), 47 deletions(-) diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index af8235fc9a..8a73928f90 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -128,7 +128,7 @@ .about-wrap .about-text { margin: 1em 200px 1em 0; min-height: 60px; - color: #777; + color: #555d66; } /* 1.2 - Structure */ diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e340632b52..90436596a8 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -585,7 +585,7 @@ code { .subtitle { margin: 0; padding-left: 25px; - color: #777; + color: #555d66; font-size: 14px; font-weight: normal; } @@ -991,7 +991,7 @@ th.action-links { padding: 4px 10px; -webkit-border-radius: 30px; border-radius: 30px; - background: #777; + background: #72777c; color: #fff; font-size: 14px; font-weight: 600; @@ -1082,7 +1082,7 @@ th.action-links { margin: 0 5px 0 0; width: 16px; height: 16px; - color: #777; + color: #72777c; -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; font-family: dashicons; @@ -1145,7 +1145,7 @@ th.action-links { -webkit-border-radius: 2px; border-radius: 2px; border: none; - background: #777; + background: #72777c; color: #fff; } @@ -1556,7 +1556,7 @@ form.upgrade .hint { background: none; -webkit-border-radius: 0; border-radius: 0; - color: #777; + color: #72777c; line-height: 1.7; padding: 3px 6px 3px 16px; } @@ -2006,7 +2006,7 @@ html.wp-toolbar { left: 0; right: 0; padding: 10px 20px; - color: #777; + color: #555d66; } #wpfooter p { @@ -3102,7 +3102,7 @@ img { .item-edit:hover, .sidebar-name:hover .sidebar-name-arrow, .accordion-section-title:hover:after { - color: #777; + color: #555d66; } .widget-top a.widget-action:after { diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index d3a7e9857b..16480e9788 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -469,7 +469,7 @@ } #available-menu-items .accordion-section-title:hover .toggle-indicator:after { - color: #777; + color: #555d66; } #available-menu-items .open .accordion-section-title .toggle-indicator:after { @@ -507,7 +507,7 @@ #available-menu-items .cannot-expand .accordion-section-title .no-items { float: right; - color: #777; + color: #555d66; font-weight: normal; margin-left: 5px; } diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index 9b5c27b08a..34141b137d 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -234,7 +234,7 @@ #available-widgets .widget .widget-description { padding: 0; - color: #777; + color: #72777c; } #customize-preview { diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index bca7f66653..67e2ca5cca 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -128,7 +128,7 @@ } .welcome-panel p { - color: #777; + color: #72777c; } .welcome-panel a { @@ -326,7 +326,7 @@ body #dashboard-widgets .postbox form .submit { } .rssSummary { - color: #777; + color: #72777c; margin-top: 4px; } @@ -347,7 +347,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_primary .rss-widget span, #dashboard_primary .rss-widget span.rss-date { - color: #777; + color: #72777c; } #dashboard_primary .rss-widget span.rss-date { @@ -406,7 +406,7 @@ body #dashboard-widgets .postbox form .submit { /* Dashboard right now - Colors */ #dashboard_right_now .sub { - color: #777; + color: #555d66; background: #f5f5f5; border-top: 1px solid #eee; padding: 10px 12px 6px 12px; @@ -484,7 +484,7 @@ form.initial-form.quickpress-open input#title { #title-wrap #title-prompt-text, .textarea-wrap #content-prompt-text { - color: #777; + color: #72777c; } #title-wrap #title-prompt-text { @@ -545,7 +545,7 @@ form.initial-form.quickpress-open input#title { margin-bottom: 1em; } #dashboard_quick_press .drafts li time { - color: #777; + color: #72777c; } #dashboard_quick_press .drafts p { @@ -653,7 +653,7 @@ form.initial-form.quickpress-open input#title { display: inline-block; margin-right: 5px; min-width: 150px; - color: #777; + color: #72777c; } .activity-block { @@ -991,9 +991,9 @@ a.rsswidget { min-height: 0; } - #dashboard-widgets #postbox-container-3 .empty-container:after, - #dashboard-widgets #postbox-container-4 .empty-container:after { - display: none; + #dashboard-widgets #postbox-container-3 .empty-container:after, + #dashboard-widgets #postbox-container-4 .empty-container:after { + display: none; } #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 230a8b151f..524ad088d4 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -68,7 +68,7 @@ } #titlediv #title-prompt-text { - color: #777; + color: #72777c; position: absolute; font-size: 1.7em; padding: 11px 10px; diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 5874f4eb48..88e8688df2 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -430,10 +430,6 @@ input[type="number"].tiny-text { margin-left: 1em; } -#upload-form label { - color: #777; -} - button.wp-hide-pw > .dashicons { position: relative; top: 3px; @@ -863,7 +859,7 @@ table.form-table td .updated p { } .pressthis-bookmarklet span:before { - color: #777; + color: #72777c; font: normal 20px/1 dashicons; content: "\f157"; position: relative; @@ -879,11 +875,6 @@ table.form-table td .updated p { vertical-align: top; } -.pressthis-js-toggle .dashicons { - margin: 5px 8px 6px 7px; - color: #777; -} - /* to override the button class being applied */ .pressthis-js-toggle.button.button { margin-left: 10px; @@ -894,7 +885,7 @@ table.form-table td .updated p { .pressthis-js-toggle .dashicons { margin: 5px 8px 6px 7px; - color: #777; + color: #555d66; } /*------------------------------------------------------------------------------ diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index ac11f0cf53..ab6581fd30 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -142,7 +142,7 @@ #submitted-on, .submitted-on { - color: #777; + color: #555d66; } /* reply to comments */ diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index d58d566ee7..8dd0a15884 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -674,7 +674,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } margin: 0 0 10px; padding: 3px 5px 5px; border: 1px solid #dfdfdf; - color: #777; + color: #72777c; font-size: 12px; font-style: italic; } diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index d3ebecc3ff..b7183303ad 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -141,7 +141,7 @@ body.folded .revisions .loading-indicator { } .revisions-controls .author-card .date { - color: #777; + color: #72777c; } .revisions-controls .author-card.autosave { diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 8256b86684..183fd8f406 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -437,7 +437,7 @@ .theme-overlay .theme-header .close:before { font: normal 22px/50px dashicons !important; - color: #777; + color: #72777c; display: inline-block; content: "\f335"; font-weight: 300; @@ -447,7 +447,7 @@ .theme-overlay .theme-header .right, .theme-overlay .theme-header .left { cursor: pointer; - color: #777; + color: #72777c; background-color: transparent; height: 48px; width: 54px; @@ -1607,7 +1607,7 @@ body.full-overlay-active { .theme-details .theme-description { float: left; - color: #777; + color: #72777c; line-height: 20px; max-width: 100%; } diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index dd3ebe80f5..d358018686 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -114,7 +114,12 @@ padding: 0 0 15px; margin: 0; font-style: normal; - color: #777; + color: #72777c; +} + +.widget-holder .description, +.inactive-sidebar .description { + color: #555d66; } #widgets-right .widgets-holder-wrap .description { @@ -282,7 +287,7 @@ div#widgets-right .closed .widgets-sortables { /* Dragging a widget over a closed sidebar */ #widgets-right .widgets-holder-wrap.widget-hover { - border-color: #777; + border-color: #72777c; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3); box-shadow: 0 1px 2px rgba(0,0,0,0.3); } diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 5120a204a5..d131c29d4e 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1132,7 +1132,7 @@ .uploader-inline .close:before { font: normal 30px/50px dashicons !important; - color: #777; + color: #72777c; display: inline-block; content: "\f335"; font-weight: 300; diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index a974bc8c19..b0df86cef6 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -176,12 +176,12 @@ img[data-mce-selected]::selection { .mce-content-body img.wp-media:hover { background-color: #ededed; - border-color: #777; + border-color: #72777c; } .mce-content-body img.wp-media.wp-media-selected { background-color: #d8d8d8; - border-color: #777; + border-color: #72777c; } .mce-content-body img.wp-media.wp-gallery { @@ -190,13 +190,13 @@ img[data-mce-selected]::selection { /* Image resize handles */ .mce-content-body div.mce-resizehandle { - border-color: #777; + border-color: #72777c; width: 7px; height: 7px; } .mce-content-body img[data-mce-selected] { - outline: 1px solid #777; + outline: 1px solid #72777c; } .mce-content-body img[data-mce-resize="false"] { @@ -306,7 +306,7 @@ audio { .ie8 .wpview-wrap[data-mce-selected], .ie7 .wpview-wrap[data-mce-selected] { background-color: #e5e5e5; - border-color: #777; + border-color: #72777c; } .wpview-overlay {