Page MenuHomePhabricator

Improve color palette to comply with WCAG 2.0 min level AA and color-deficiency-friendly.
Closed, ResolvedPublic

Description


Improved color palette as of September 2016, compliant to WCAG 2.0 level AA


Find a palette that complies with the below listed criteria while staying true to our Wikimedia identity (trustworthy, academic, neutral, open, inviting).

WCAG 2.0 color contrast guidelines:
WCAG 2.0 level AA compliance (normal text size and 18pt+) – necessarily
WCAG 2.0 level AAA compliance (normal text size and 18pt+) – where possible

A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1 [to pass all four criteria including WCAG AAA at normal text size].

Tools used for contrast checking: Webaim, Snook.ca, Contrast checker

Tool used for color-deficiency simulation: Sim Daltonism (Mac OS, iOS); alternatively: Accessibility color wheel (Online tool, simulating protanopia, deuteranopia & tritanopia)
We're checking mostly on the most common color-deficiency— the Red–green color blindness (Protanopia, deuteranopia, protanomaly, and deuteranomaly).
This deficiency experience difficulty with discriminating red and green hues.


All chosen colors must be extensible and modular. This is so we can apply as little guideline as possible and let the usage be as endless as possible for all contributors.

Be mindful of the most used text colors—white and black.


Current situation after T110555:

//

Report from Contrast checker:

//

Tested on Sim Daltonism for the most common color deficiency:

  1. Protanopia

  1. Deuteranopia

  1. Protanomaly

  1. Deuteranomaly

Related Objects

StatusAssignedTask
Resolved Spage
OpenNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
InvalidVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
OpenVolker_E
DuplicateVolker_E
ResolvedNone
Resolved Jdlrobson
Resolved Jdlrobson
ResolvedNirzar
ResolvedVolker_E
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

On the other hand Echo seems to (ab?)using constructive green for positive feedback ('thanks' messages etc.)

On the other hand Echo seems to (ab?)using constructive green for positive feedback ('thanks' messages etc.)

On the icon?

violetto updated the task description. (Show Details)Feb 10 2016, 2:45 PM
matmarex added a comment.EditedMar 8 2016, 11:17 PM

So, T110555: Consolidate progressive and constructive buttons happened and constructive buttons are no more! :D Does this change anything about this task (other than obviously removing the need to update one of the colors)?

The current patches are:

Change 264198 merged by Jforrester:
MediaWiki theme: Make colors' contrast compliant to WCAG 2.0 level AA

https://gerrit.wikimedia.org/r/264198

Jdforrester-WMF triaged this task as Normal priority.Mar 16 2016, 3:02 PM
Esanders added a comment.EditedMar 16 2016, 6:43 PM

Why wasn't black included in the contrast tests? I'm not visually impaired and I can barely tell the difference between the dark blue and the black on a non-primary button.

And compare with:

To answer my own question, it seems like contrast between the colours was not considered at all - which is why we had the issue with almost no contrast between blue and green (before we solved that by getting rid of green).

I've reverted the patch from this week's OOUI release to let this discussion continue.

@Esanders The plan of getting rid of the "green" as button color dates back as long as the current task. I've asked for further information at T110565#2123979 on what the current way of selecting when to use which button in OOjs UI are currently? Would you provide more information over there?

Sure, have done. As recently as the patch @matmarex commented on on Jan 15 there was a design for a green colour.

Jdforrester-WMF edited projects, added OOUI; removed OOUI (OOjs-UI-0.16.3).
Volker_E added a comment.EditedMar 16 2016, 9:17 PM

The WCAG level AA compliant green wasn't meant to be used in buttons any more. That was not a "design", more application of the changes on the current technical implementation. It's a secondary color for highlighting of links as raised in T116549: Provide a color palette and design for buttons that are purely highlighted links, to distinguish them from actual UI buttons

The portal page seems to use the new blue (next to black text). In case it is useful as a reference:

Thanks Pau, I just noticed that. I think we should be coordinating any changes to the colour scheme so they are rolled out at the same time.

Volker_E updated the task description. (Show Details)Apr 1 2016, 1:36 AM

I've been looking to this with some more detail. Some thoughts:

The goal

I tried to capture what we need form the blue color. We need a blue color that:

  • Respects accessibility guidelines (color contrast in particular).
  • Can be used for different kinds of actions such as buttons and links.
  • Can be used as background for text (text in light color to keep contrast).
  • Communicates the Wikimedia brand and values (“academic”, reliable, aligned with the colors of logos, etc.)
  • Aligns with other colors of the palette (red and secondary link green)

Challenges

There are several (generic and specific) challenges:

  • Color is subjective and context affects its perception. In this context, how do we evaluate that “it works”?
  • The different uses of blue requires it to provide enough contrast with respect to several colors: a blue button with white text should be readable, but also a blue link should be distinguishable from a non-interactive black label.
  • Is not clear how much contrast we need between blue and black: too much and links can become jarring, to little and links cannot be recognised.
  • We aim for the maximum level of compliance with accessibility guidelines.

Comparing colors

The first step would be to confirm if there is a problem with the blue proposed in the ticket when it is presented alongside black. For that purpose I compiled two sets of examples. It would be great to hear about how well blue works in these context from the people involved in the selection of the proposed blue since they may have take other considerations into account that I'm not aware of. Can we distinguish active elements (blue) from passive elements (black) without effort?
Is it too jarring/distracting?

Example 1: text and links
I took a random Wikipedia article and changed the color of links to check how it fits with text.

Current blue used for links (#0645ad):

Current blue used for buttons (#347BFF):

Blue proposed in this ticket (#165C91):

Alternative accessible blue (#0051B8):

Example 2: Buttons and text
I created a combination of widgets simulating a UI with different kinds of buttons.

Current blue used for links (#0645ad):

Current blue used for buttons (#347BFF):

Blue proposed in this ticket (#165C91):

Alternative accessible blue (#0051B8):

Thoughts?

I like the idea of using a colour that matches the blue used in our text links.

How did you choose the "Alternative accessible blue (#0051B8)" ?

Also, what tool/website did @violetto use to evaluate/screenshot the color-blindness simulations in T109915#1880133 ?

I believe an additional criteria (or decision point), is which of these we choose:

  • a single all-purpose color scheme that prioritizes maximizing accessibility for everyone, without needing any additional options. (The current proposal from Violetto et al)
  • a scheme that gives more weight to aesthetics, but we also offer optional accessibility overrides, such as discussed/wireframed in M17 etc. (See specifically the example of Battlefield's 3 color-blind options - (4 screenshots))

How did you choose the "Alternative accessible blue (#0051B8)" ?

It was an example using a color contrast tool in the somewhat limited range that AAA colors provide. It's just an attempt of making the blue more distinguishable from black while still working as a background for white text. It may not be the best option or break some other criteria but I thought it could be a good point of reference.

Also, what tool/website did @violetto use to evaluate/screenshot the color-blindness simulations in T109915#1880133 ?

Sim Daltonism was mentioned in the ticket description (and the one I used), but there may be others.

I believe an additional criteria (or decision point), is which of these we choose:

I think we should aim for reaching as many people as possible without further adjustments. Users may land in any page from their search engine, they may be logged-in or not (and switching preferences means they have to reach them navigating through the environment before it is adapted to suit them). Providing alternative experiences or compromising may be needed if serving a group of users means to break the experience for others, but I think that should be the last resort.

Sim Daltonism was mentioned in the ticket description (and the one I used), but there may be others.

As this is a Mac/iOS only tool, I've added the accessibility color wheel (online tool, simulating protanopia, deuteranopia & tritanopia) to the task description yesterday.

I believe an additional criteria (or decision point), is which of these we choose:

I think we should aim for reaching as many people as possible without further adjustments. Users may land in any page from their search engine, they may be logged-in or not (and switching preferences means they have to reach them navigating through the environment before it is adapted to suit them). Providing alternative experiences or compromising may be needed if serving a group of users means to break the experience for others, but I think that should be the last resort.

Second that, we should be inclusive by default where within sensible (time/budget/user satisfaction) reach.

Volker_E updated the task description. (Show Details)Apr 2 2016, 8:06 PM

Change 277889 had a related patch set uploaded (by Bartosz Dziewoński):
[Reapply] MediaWiki theme: Make colors' contrast compliant to WCAG 2.0 level AA

https://gerrit.wikimedia.org/r/277889

Volker_E moved this task from Done to Review on the UI-Standardization board.Apr 12 2016, 10:22 PM

Another issue is that the hover and active states make the button darker, then even darker. Starting with a darker blue will lower the contrast between these states too.

Another place for reds, greens and grays and accessibility – .mw-plusminus* and .autocomment in shared.css of core: https://gerrit.wikimedia.org/r/#/c/283571/

Volker_E updated the task description. (Show Details)Apr 16 2016, 2:30 AM
Volker_E moved this task from Review to Unsorted on the UI-Standardization board.May 18 2016, 10:09 PM
Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 20 2016, 8:55 PM
Volker_E claimed this task.Jun 13 2016, 3:33 PM
Volker_E updated the task description. (Show Details)Jul 17 2016, 11:17 PM
Tnegrin removed a subscriber: Tnegrin.Jul 25 2016, 3:45 PM
Volker_E updated the task description. (Show Details)Aug 26 2016, 11:19 PM
Volker_E added a subscriber: Jan_Dittrich.
Jdforrester-WMF moved this task from Reviewing to OOjs-UI-0.17.9 on the OOUI board.Sep 7 2016, 5:39 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.9); removed OOUI.

Change 309483 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Enhance button styles and align them to new color palette

https://gerrit.wikimedia.org/r/309483

Change 277889 merged by jenkins-bot:
MediaWiki theme: Make colors' contrast compliant to WCAG 2.0 level AA

https://gerrit.wikimedia.org/r/277889

Jdforrester-WMF closed this task as Resolved.Sep 9 2016, 11:49 PM
Jdforrester-WMF edited projects, added User-notice; removed Patch-For-Review.

This'll go out in OOjs UI 0.17.9, and thus MediaWiki 1.28.0-wmf.20.

Change 309483 merged by jenkins-bot:
MediaWiki theme: Enhance button styles and align them to new color palette

https://gerrit.wikimedia.org/r/309483

Volker_E reopened this task as Open.Sep 19 2016, 8:43 PM
Volker_E updated the task description. (Show Details)

Reopened as mediawiki.ui in core has to feature the agreed-on and WCAG compliant colors as well (currently preparing a patch set).

Change 264248 merged by jenkins-bot:
mediawiki.UI: Make colors' contrast compliant to WCAG 2.0 level AA

https://gerrit.wikimedia.org/r/264248

matmarex closed this task as Resolved.Sep 20 2016, 1:08 AM
Liuxinyu970226 awarded a token.
Johan added a subscriber: Johan.Sep 29 2016, 6:43 PM

As it wasn't included in wmf.20, when will this be in production now?

As it wasn't included in wmf.20, when will this be in production now?

It was in wmf.20. https://gerrit.wikimedia.org/r/#/c/310374/

Johan added a comment.Oct 7 2016, 6:33 PM
This comment was removed by Johan.
Johan added a comment.Oct 7 2016, 6:40 PM
This comment was removed by Johan.