Description
Details
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Sgs | T366760 [EPIC] Dark mode for Growth team maintained features | |||
| Open | None | T372056 "You have a new Talk page message" is not accessible in dark mode |
Event Timeline
Some related discussion was in T341305: Talk page notification alert bar: revised styling to meet WCAG color contrast AA requirements
Though this smaller issue can be fixed by an always-set link colour, I guess.
Change #1060860 had a related patch set uploaded (by Rae Squirrel; author: Rae Squirrel):
[mediawiki/skins/Vector@master] Vector: Set echo alert style
Just-submitted patch would prevent the link from changing colors on hover, which limits the accessibility problems in the meantime when T341305 is still being worked on.
Change #1235484 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):
[mediawiki/skins/Vector@master] Vector: Fix Echo talk page alert contrast in dark mode
Note, it looks like it is not accessible in light mode either.
I believe the issue is two fold.
- .mw-echo-alert has a rule color: @color-emphasized; but that applies to the LI element not the A element.
- @color-emphasized probably needs to be `@color-emphasized-fixed ( we could temporarily add a rule hardcoded for dark mode until Codex provides that token).
Change #1235484 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Vector: Fix Echo talk page alert contrast in dark mode
Reason:
Should be fixed via design tokens and/or a change in Echo.
Change #1345255 had a related patch set uploaded (by Mr. Starfleet Command; author: Mr. Starfleet Command):
[mediawiki/extensions/Echo@master] Fix contrast issue with the talk-alert background-color
Having read through the discussion on this and related tasks, I realize that a more comprehensive approach than my patch (which simply changes the background color to use a variable that produces good contrast with link color on both light and dark mode) may be needed. I'll leave my patch up for now, but I recognize that this issue is quite complicated and may not be solved by such a simple change. :)
I think making this banner less prominent will be controversial in community. Perhaps changing the text color to black @color-base-fixed would be less controversial?
Before:
After:
If you’re changing the colour to black, you don’t need to change the background colour of the notice itself at that point. But if you are changing the colour (which maybe is fine to do for night mode only?), the link should be underlined as a link in that case. I agree that the proposed patch makes the design not prominent at all.
Ideally it would be nice to design a better banner altogether, the one that’s prominent but also accessible, but unfortunately accessibility issues like this one aren’t actually too important to WMF as an organisation to prioritise it.
(re: Jdlrobson-WMF) The only problem with that idea (I think someone pointed this out above) is that it may not be immediately clear that it's a link, in that case.
The other approach would be to increase the text size to 14pt, bold the text, and use the light-mode link color on dark as well -- then it would be properly accessible (AA I think, under the "large text" definition). But I'm sure plenty people would object to that and think it's *too* prominent.