From 764cd6a14b46be2a9f8da8205f051fc1a1792cf5 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 14 Jan 2016 19:07:10 -0800 Subject: [PATCH] mediawiki.UI: Make colors' contrast compliant to WCAG 2.0 level AA Establishing Web Accessibility Guidelines level AA color contrast compliance by aligning to improved color palette, similar to I6fdb90af8b9dc5e5e026eb0c1bd13138c73da4cd Bug: T109915 Change-Id: I191f8ec731eeef0827124741200c51cb42ba99f8 --- .../mediawiki.less/mediawiki.ui/mixins.less | 16 +++--- .../mediawiki.ui/variables.less | 53 ++++++++++--------- .../mediawiki.special.userlogin.login.css | 20 +++---- ...ediawiki.widgets.datetime.definitions.less | 2 +- .../mw.widgets.CalendarWidget.less | 2 +- .../mw.widgets.DateInputWidget.less | 2 +- .../mediawiki.Upload.BookletLayout.css | 2 +- 7 files changed, 49 insertions(+), 48 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index f29897c598..3cc94b8882 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -23,7 +23,7 @@ height: auto; margin: 0 0.1em 0 0; padding: 0; - border: 1px solid @colorFieldBorder; + border: 1px solid @colorGray7; cursor: pointer; } } @@ -61,7 +61,7 @@ .button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) { color: @colorButtonText; - border: 1px solid @colorGray12; + border: 1px solid @colorFieldBorder; &:hover, &:active, @@ -109,12 +109,11 @@ .button-colors-quiet( @textColor, @highlightColor, @activeColor ) { // Quiet buttons all start gray, and reveal // constructive/progressive/destructive color on hover and active. - color: @colorButtonText; + color: @textColor; - &:hover, - &:focus { + &:hover { background-color: transparent; - color: @textColor; + color: @highlightColor; } &:active, @@ -122,6 +121,11 @@ color: @activeColor; } + &:focus { + background-color: transparent; + color: @textColor; + } + &:disabled { color: @colorDisabledText; } diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less index b6f656878c..77e80b0d09 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/variables.less +++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less @@ -2,13 +2,13 @@ // Although this defines many shades, be parsimonious in your own use of grays. Prefer // colors already in use in MediaWiki. Prefer semantic color names such as "@colorText". -@colorGray1: #111; // darkest +@colorGray1: #000; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; -@colorGray7: #777; +@colorGray7: #72777d; @colorGray8: #888; @colorGray9: #999; @colorGray10: #aaa; @@ -16,27 +16,23 @@ @colorGray12: #ccc; @colorGray13: #ddd; @colorGray14: #eee; -@colorGray15: #f9f9f9; // lightest +@colorGray15: #f8f9fa; // lightest // Semantic background colors // Blue; for contextual use of a continuing action -@colorProgressive: #347bff; -@colorProgressiveHighlight: #2962cc; -@colorProgressiveActive: #2962cc; -// Green; for contextual use of a positive finalizing action -@colorConstructive: #00af89; -@colorConstructiveHighlight: #008c6d; -@colorConstructiveActive: #008c6d; +@colorProgressive: #36c; +@colorProgressiveHighlight: #447ff5; +@colorProgressiveActive: #2a4b8d; // Orange; for contextual use of returning to a past action @colorRegressive: #ff5d00; // Red; for contextual use of a negative action of high severity -@colorDestructive: #d11d13; -@colorDestructiveHighlight: #a7170f; -@colorDestructiveActive: #a7170f; +@colorDestructive: #c33; +@colorDestructiveHighlight: #e53939; +@colorDestructiveActive: #873636; // Orange; for contextual use of a potentially negative action of medium severity @colorMediumSevere: #ff5d00; // Yellow; for contextual use of a potentially negative action of low severity -@colorLowSevere: #ffb50d; +@colorLowSevere: #fc3; // Used in mixins to darken contextual colors by the same amount (eg. focus) @colorDarkenPercentage: 13.5%; @@ -46,27 +42,19 @@ // Text colors @colorText: @colorGray2; @colorTextLight: @colorGray6; -@colorButtonText: @colorGray5; -@colorButtonTextHighlight: @colorGray7; -@colorButtonTextActive: @colorGray7; +@colorButtonText: @colorGray2; +@colorButtonTextHighlight: @colorGray4; +@colorButtonTextActive: @colorGray1; @colorDisabledText: @colorGray12; @colorErrorText: #c00; @colorWarningText: #705000; // UI colors -@colorFieldBorder: @colorGray12; +@colorFieldBorder: #9aa0a7; @colorShadow: @colorGray14; @colorPlaceholder: @colorGray10; @colorNeutral: @colorGray7; -// The following rules are deprecated -@colorWhite: #fff; -@colorOffWhite: #fafafa; -@colorGrayDark: #898989; -@colorGrayLight: #ccc; -@colorGrayLighter: #ddd; -@colorGrayLightest: #eee; - // Global border radius to be used to buttons and inputs @borderRadius: 2px; @@ -77,3 +65,16 @@ // Form input sizes @checkboxSize: 2em; @radioSize: 2em; + +// The following rules are deprecated +@colorWhite: #fff; +@colorOffWhite: #fafafa; +@colorGrayDark: #898989; +@colorGrayLight: #ccc; +@colorGrayLighter: #ddd; +@colorGrayLightest: #eee; +// Green; for contextual use of a positive finalizing action +@colorConstructive: #00af89; +@colorConstructiveHighlight: #1c6665; +@colorConstructiveActive: #134645; + diff --git a/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css b/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css index 753f774b19..cf77a96970 100644 --- a/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css +++ b/resources/src/mediawiki.special/mediawiki.special.userlogin.login.css @@ -10,24 +10,20 @@ /* Login Button, following `ButtonWidget (progressive)‎` from OOjs UI */ #mw-createaccount-join { - color: #347bff; + background-color: #f8f9fa; + color: #36c; } #mw-createaccount-join:hover { - background-color: #ebf2ff; /* rgba( 52, 123, 255, 0.1 ); */ + background-color: #fff; border-color: #859ecc; box-shadow: none; } #mw-createaccount-join:active { - background-color: #ebf2ff; - color: #1f4999; - border-color: #1f4999; + background-color: #eff3fa; + color: #2a4b8d; + border-color: #2a4b8d; } #mw-createaccount-join:focus { - background-color: #fff; - color: #1f4999; - border-color: #1f4999; - box-shadow: inset 0 0 0 1px #1f4999; -} -#mw-createaccount-join:active:focus { - background-color: #ebf2ff; + border-color: #36c; + box-shadow: inset 0 0 0 1px #36c; } diff --git a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less index 84c086fff5..bdade364e7 100644 --- a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less +++ b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less @@ -34,4 +34,4 @@ @indicator-size: unit( 12 / 16 / 0.8, em ); @icon-size: unit( 24 / 16 / 0.8, em ); @quick-ease: 100ms ease; -@progressive: #347bff; +@progressive: #36c; diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less index 9d30eb8a1f..4d904964ec 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less @@ -212,7 +212,7 @@ .mw-widget-calendarWidget:focus { outline: none; - box-shadow: inset 0 0 0 2px #347bff; + box-shadow: inset 0 0 0 2px #36c; } .mw-widget-calendarWidget-day { diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less index 86018a4498..46e6b62ac7 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less @@ -105,7 +105,7 @@ &.oo-ui-widget-enabled { .mw-widget-dateInputWidget-handle:hover { - border-color: #347bff; + border-color: #36c; } } diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css index 68062d02f0..03df0864d6 100644 --- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css +++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css @@ -30,6 +30,6 @@ } .mw-upload-bookletLayout-filePreview .oo-ui-progressBarWidget-bar { - background-color: #347bff; + background-color: #36c; height: 0.5em; } \ No newline at end of file -- 2.20.1