Light blue over light blue does not pass accessibility criteria
Closed, DeclinedPublic

Description

Upstream report: https://secure.phabricator.com/T8101

https://phabricator.wikimedia.org/T98335?workflow=create shows a banner with light blue (electrical blue?) text over light blue (hazel?) background. Forgive the imprecise names but what's clear is that this choice is terrible for accessibility. Please provide a better contrast.

Nemo_bis created this task.May 6 2015, 2:35 PM
Nemo_bis updated the task description. (Show Details)
Nemo_bis raised the priority of this task from to Needs Triage.
Nemo_bis added a subscriber: Nemo_bis.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 6 2015, 2:35 PM
Nemo_bis renamed this task from Light blue over light bllue to Light blue over light blue.May 6 2015, 2:36 PM
Nemo_bis set Security to None.

I'm not specially excited about the new design, but is there really a problem of accessibility there?

Qgil updated the task description. (Show Details)May 6 2015, 6:58 PM
Qgil edited projects, added Phabricator (Upstream); removed Phabricator.
Qgil moved this task from Backlog to Upstreamed on the Phabricator (Upstream) board.
Qgil triaged this task as Lowest priority.

What makes you think there isn't one? If someone thinks the current contrast is sufficient and there is *no* accessibility issue, we may check with one of the tools for the purpose.

Qgil added a comment.May 7 2015, 1:40 PM

The task reported upstream was closed as Invalid, see https://secure.phabricator.com/T8101

If someone can tell objectively that this implementation poses a problem of accessibility, I'm happy to report it. Otherwise, I think we should decline this task accordingly.

TheDJ added a comment.EditedMay 7 2015, 1:54 PM

It's an accessibility issue:
http://webaim.org/resources/contrastchecker/

Foreground color: #2980b9
Background color: #daeaf3
Contrast Ratio: 3.49:1

Normal Text
WCAG AA: Fail
WCAG AAA: Fail

Large Text
WCAG AA: Pass
WCAG AAA: Fail

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Note btw, that this is by far not the only problem in phab. The blue grayish 'via web' on this page is also really problematic.

Foreground color: #8c98b8
Background color: #eee
Contrast Ratio: 2.48:1

Normal Text
WCAG AA: Fail
WCAG AAA: Fail

Large Text
WCAG AA: Fail
WCAG AAA: Fail
TheDJ renamed this task from Light blue over light blue to Light blue over light blue does not pass accessibility criteria.May 7 2015, 1:54 PM

Closed as invalid in upstream; and as explained in https://secure.phabricator.com/T8549, "basically, https://secure.phabricator.com/T8614 is "I need my software to be Accessible" and https://secure.phabricator.com/T4213 is "I don't like how Phabricator looks."."

If you are interested in modifying these locally, the variables are here: https://secure.phabricator.com/diffusion/P/browse/master/src/applications/celerity/CelerityResourceTransformer.php;78438951c804e3ec184a839d8f96741146a21dd4$172
After updating, you'll want to re-run celerity to build the packages: bin/celerity map.

Restricted Application added a subscriber: scfc. · View Herald TranscriptJun 30 2015, 2:15 PM
Danny_B moved this task from Unsorted to Colors on the Accessibility board.Jan 22 2016, 8:54 PM
Restricted Application added a subscriber: Luke081515. · View Herald TranscriptJan 22 2016, 8:54 PM
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMay 19 2016, 12:49 PM
Aklapper closed this task as Declined.Aug 4 2018, 3:35 PM

Workaround provided in previous comment for those who run into accessibility problems with the given default choices.