Refine and improve dark mode application tokens
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	DTorsani-WMF
	Fri, Jun 7, 1:41 AM

Description

Context

Dark mode was recently released on beta and we have been gathering feedback from the community around certain color applications. We should consider making some improvements to the application tokens based on our learnings so far.

Considered changes

Update color-subtle from gray200 to gray400
Update color-placeholder from gray300 to gray500
Update color-base from gray100 to gray200
Update color-base--hover from white to gray100
Update color-emphasized from white to gray100

Acceptance criteria

Application tokens have been updated in Figma
Application tokens have been updated in dark.json

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from 1.7.0 to 1.8.0	mediawiki/core	master	+596 -247
	tokens: Update dark mode text tokens	design/codex	main	+8 -11

Customize query in gerrit

Related Objects

Mentioned In: T363878: [QA only] Auto-comment on old revisions does not meet color contrast guidelines
T366839: Dark mode: --color-subtle is not dim enough
Mentioned Here: T366839: Dark mode: --color-subtle is not dim enough

Event Timeline

DTorsani-WMF created this task.Fri, Jun 7, 1:41 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFri, Jun 7, 1:42 AM

DTorsani-WMF mentioned this in T366839: Dark mode: --color-subtle is not dim enough.Fri, Jun 7, 1:43 AM

Update color-subtle from gray250 to gray300

Note that color-subtle is gray200 currently.

If that's intended to resolve T366839, that would be only marginally better than the current state. gray300 vs gray200 contrast in dark mode is 1.36, compared to current gray200 vs gray100's 1.12. Compare that to 2.27 produced by light mode's gray750 vs gray600 for color-base and color-subtle respectively. The magnitude of this difference comes from as many as three sides:

First, as a general rule, contrast ratios are smaller for pairs of light colors than for pairs of dark colors with the same absolute distance. E.g. #333 vs #666 is 2.2, whereas #ccc vs #999 is only 1.77.
Second, the color values of shade tokens themselves are more dense on the light side. Again, gray200 and gray100 are #eaecf0 and #f8f9fa respectively, whereas gray700 vs gray800 are #27292d and #101418 (note the difference between the RGB values).
Third, the tokens for dark mode are chosen in such a way that the token difference is smaller. For color-base and color-subtle, you have gray750 and gray600 respectively in light mode, whereas in dark mode, you have gray100 and gray200.

All three act in one direction: to make the contrast ratio smaller in dark mode. So I believe this should be addressed first and foremost, and just shifting tokens won't help.

DTorsani-WMF updated the task description. (Show Details)Fri, Jun 7, 10:30 AM

Thanks for this response and analysis. I think we should try a couple of different options, as listed in the description (updated). One thing to note is that with our first pass as dark mode colors, it was not necessarily a goal to have the same contrast ratios that are in light mode. Instead, we are optimizing for slightly less contrast while still being accessible to optimize for readability, which we know changes from light mode where a higher contrast in colors doesn't affect readability whereas in dark mode it can for certain people. This is not to counter the suggestion to darken these colors to create more contrast, but a note against the need to match the same contrast ratios in light mode. That being said, I think we can get closer without sacrificing readability. Thank you for your involvement in helping us get there.

DTorsani-WMF updated the task description. (Show Details)Fri, Jun 7, 10:39 AM

DTorsani-WMF moved this task from Up Next to DST-Sprint-25 (2024-06-10 to 2024-06-21) on the Design-System-Team board.Mon, Jun 10, 1:46 PM

DTorsani-WMF edited projects, added Design-System-Team (DST-Sprint-25 (2024-06-10 to 2024-06-21)); removed Design-System-Team.

AnneT triaged this task as High priority.Mon, Jun 10, 5:19 PM

AnneT set the point value for this task to 2.Mon, Jun 10, 5:28 PM

DTorsani-WMF updated the task description. (Show Details)Thu, Jun 13, 5:21 PM

Volker_E awarded a token.Thu, Jun 13, 5:43 PM

Volker_E subscribed.

Change #1043320 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] tokens: Update dark mode text tokens

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

gerritbot added a project: Patch-For-Review.Fri, Jun 14, 12:18 AM