Page MenuHomePhabricator

Inactive notification badge colors not compliant with WCAG 2.0 accessibility guidelines
Closed, InvalidPublic

Description

Task update: This task is now invalid due to iterated design at T115845


Notification badges (originally deployed in T94634: A1. Quieter Echo notifications for Flow posts) display non-trivial information in white text over a medium-grey background (#c2c2c2). This provides insufficient contrast to be compliant with WCAG guidelines - at minimum level AA. This issue was already happening before the notification badge was divided (T108190) and still applies, both examples below:


Accessibility guidelines limit the range of colors we can use (for a good reason). It is especially challenging when trying to convey an inactive status while keeping text readable for everyone.

Exploring options

Adjust badge contrast

Contrast can be adjusted by using a very light grey as background (#F0F0F0) and a dark grey (#666) for text and icons. Regular text weight (not bold) can be used for the inactive status in order to make it slightly less prominent in order to compensate the contrast increase.

Use icons as the reference element
Keeping the badges as a secondary element makes them les prominent even when enough contrast is used.



Icon only
Removing the labels is another option to consider. It would be worth researching which value it adds to know the exact number of pending notifications.


Related Objects

StatusAssignedTask
ResolvedVolker_E
InvalidVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
DuplicateVolker_E
ResolvedNone
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNirzar
ResolvedVolker_E
OpenNone

Event Timeline

Quiddity created this task.May 7 2015, 9:02 PM
Quiddity raised the priority of this task from to Needs Triage.
Quiddity updated the task description. (Show Details)
Quiddity added a subscriber: Quiddity.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 7 2015, 9:02 PM
DannyH triaged this task as Normal priority.May 8 2015, 12:27 AM
DannyH moved this task from Untriaged to Product/Design Work on the Collaboration-Team-Triage board.
DannyH added a subscriber: DannyH.
TheDJ awarded a token.May 8 2015, 8:00 PM
Legoktm added a subscriber: Legoktm.Jul 6 2015, 7:27 AM

Any suggestions on what we should change it to?

Legoktm moved this task from Backlog to Needs plan on the Notifications board.Jul 6 2015, 7:27 AM

We seem to be looking at a background color of:
#767676 or lower to be WCAG 2 AA Compliant
#595959 or lower to be WCAG 2 AAA Compliant

This is not a long text string, so AA compliant should be fine. Please change to #777.
(This is essentially identical to #767676, but follows the https://trello.com/c/IRqbu8p4/15-color-swatches (assuming we're still following that. I can't see anything else more up-to-date in e.g. http://livingstyleguide.wmflabs.org/wiki/Main_Page#Color ).)

Volker_E renamed this task from Fix accessibility for the new grey quiet Notification numbers to Inactive notification badge colors not compliant with WCAG 2.0 accessibility guidelines.Sep 17 2015, 3:32 AM
Volker_E updated the task description. (Show Details)
Volker_E set Security to None.
Volker_E added subscribers: Pginer-WMF, violetto.
Volker_E added a subscriber: Volker_E.

Any suggestions on what we should change it to?

Just changing the background will make the whole badge too prominent.
As the simpler fix I'd recommend using a light grey background (#F0F0F0) and a dark grey (#666) for text and icons.

When the badges are active, icons and text should remain in white. So the above is only for the inactive state of badges.

T109915 discussion might affect and help this task

After some research sessions, the approach described as "Use icons as the reference element" above, seems to be a promising solution.
I created T115845, to describe the proposal with more detail and discuss it.

We're talking about using #888 for inactive elements in this task.

DannyH removed a subscriber: DannyH.Dec 17 2015, 12:40 AM

T109915 is now resolved and consensus has also been reached at T89271.

I'm passing the task over to @Volker_E or anyone capable of creating a patch set for this!

T109915 is now resolved and consensus has also been reached at T89271.
I'm passing the task over to @Volker_E or anyone capable of creating a patch set for this!

It is not clear if the suggested adjustment is to use #888 for the badge or the text.
For this I think we want to go with T115845 which avoids the contrast problem (without making the badge to draw too much attention or look disabled when it is not highlighted).

@Pginer-WMF If I understand correctly, this task is no longer relevant because it will be handled in another way described at T115845, correct?

mm

@Pginer-WMF If I understand correctly, this task is no longer relevant because it will be handled in another way described at T115845, correct?

Yes. That's right.

I'll go ahead and close this task as no longer relevant and update description with the newer task link. Thanks for the clarification!

mm

violetto closed this task as Invalid.Dec 28 2015, 9:45 PM
violetto updated the task description. (Show Details)
Danny_B moved this task from Done to Unsorted on the UI-Standardization board.May 23 2016, 7:02 AM