Page MenuHomePhabricator

Echo's "You have new messages" fails WCAG AAA contrast guidelines and the colors are nasty
Closed, ResolvedPublic

Description

Echo's "You have new messages" fails WCAG AAA contrast guidelines. #54595d on #ffcc33 is contrast ratio 4.7. (It passes WCAG AA, just barely.)

pasted_file (38×713 px, 6 KB)

Subjectively, the background color is unpleasantly bright. It used to be more subdued before 550dc4ee8839a574d170ba2c9abdebff9e562244.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 327867 had a related patch set uploaded (by Ladsgroup):
Make mw.echo.alert text darker to pass WCAG test

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

^ This is just a suggestion (make the contrast ratio 10.56 which seems fine)

Change 327867 merged by jenkins-bot:
Make mw.echo.alert text darker to pass WCAG test

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

The screenshot is from betalbs (after the patch was merged).
mw-echo-alert with color: #222;

Screen Shot 2016-12-19 at 2.29.26 PM.png (494×692 px, 86 KB)

Huh, that's actually interesting, your screenshot shows the link as blue, because it's :visited. I'm not sure if that's intentional.

Huh, that's actually interesting, your screenshot shows the link as blue, because it's :visited. I'm not sure if that's intentional.

Probably not. @Volker_E: thoughts?

@Catrope @matmarex No, definitely not, this message shouldn't change text color.
Coming a lil late to this party, I'd like to add that we're aiming for level AA conformance and not AAA for design limitation reasons as general guideline. In this special case for an important message it makes sense to go that route. Note to myself: Will try to emphasize this in the upcoming guidelines.

In a side-note, I see this as a candidate to align with the solution of T127405 as well (we should revisit this).