We need accessible colours for links in the following states:
- Default
- Hover
- Active
- Visited
- Destructive
- Visited destructive
We have a first pass going through development right now to unblock development. This is a refinement of that.
Description
Description
Details
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Test out new palette | mediawiki/skins/MinervaNeue | master | +23 -1 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| In Progress | DTorsani-WMF | T355147 [EPIC] Dark Mode | |||
| Resolved | Design | JScherer-WMF | T356323 Refine Night mode palette |
Event Timeline
Comment Actions
@DTorsani-WMF and I discussed this today. He's going to work on this during this sprint, to follow up in a week or so.
Comment Actions
A quick comment on historic context (duplicating from Figma):
The choice for #36c was also taken to work on both, light and dark backgrounds. To have one color that is always there, the center point of our palette so to say. @JScherer-WMF @DTorsani-WMF
Comment Actions
@Volker_E responding here instead of Figma for better trace. Thanks for this context. Unfortunately, this blue color only works on most backgrounds that are being used across web, Android, and iOS, and only for graphical elements on black, but not even on the lightest background being used.
White and the darkest background color being used in day mode:
#ffffff + #3366cc = 5.36:1
#f8f9fa + #3366cc = 5.09:1
Black and the lightest background color being used in night mode:
#000000 + #3366cc = 3.91:1
#27292d + #3366cc = 2.71:1
Currently, as I am exploring new colors that work, I am using a tool to generate a palette that uses colors which have a 4.5:1 contrast ratio for text on light and dark backgrounds and have a contrast ratio of 3:1 between the link default (resting) colors and the content/text color around it. This palette for the blues use #3366cc as the root blue (generating colors from this color), and this exact value is still present in the palette. The same is true for how we are generating the reds (destructive), purples (visited day), and mauves (visited night). The goal of this overall palette, while we are focused on generating these specific colors for this project, is to create and expand a palette that maintains an even brightness, saturation, and contrast ratios at different levels of each color.
This comment was removed by JScherer-WMF.
Comment Actions
| variable name | current value | new value | notes |
| color-base | #eaecf0 | #F8F9FA | |
| color-subtle | #c8ccd1 | #D4D5D5 | |
| color-link | #69f | #6E85D8 | |
| color-link-red | #ff4242 | #E45D52 | |
| color-progressive | #69f | #6E85D8 | |
| background-color-destructive | #ff4242 | #E45D52 | |
| color-progressive--active | #94b8ff | #AFB6E9 | |
| background-color-base | #202122 | #101418 | |
| color-visited | #9781bd | #977DBD | |
| background-color-interactive | #2e3136 | #202122 | |
| ~~background-color-interactive | #eaecf0 | #F8F9FA~~ | |
| background-color-interactive-subtle | #f8f9fa | #202122 | not inverted yet |
| background-color-progressive-subtle | #eaf3ff | #202122 | not inverted yet |
| border-color-base | #a2a9b1 | #2E3136 | not inverted yet |
| border-color-inverted | #ffffff | #F8F9FA | |
| border-color-progressive--focus | #3366cc | #AFB6E9 | |
| border-color-subtle | #c8ccd1 | #D4D5D5 | |
| border-color-transparent | transparent | transparent | |
| box-shadow-color-progressive--focus | #3366cc | #AFB6E9 | |
| color-inverted | #ffffff | #F8F9FA | |
| color-link-red--visited | #a55858 | #B97876 | |
| color-link-external | #3366cc | #6E85D8 | |
| color-link-external--visited | #6b4ba1 | #B97876 | |
| color-link-external--active | #2a4b8d | #lorem | |
| box-shadow-color-drawer | rgba(0,0,0,0.35) | #AFB6E9 | |
Comment Actions
Change 997956 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Test out new palette
Comment Actions
Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2ac663c1fd/w
Comment Actions
Change 997956 abandoned by Jdlrobson:
[mediawiki/skins/MinervaNeue@master] Test out new palette
Reason:
Comment Actions
Created new ticket for this work: https://phabricator.wikimedia.org/T356825
Thanks for working on this!