Page MenuHomePhabricator

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

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

Event Timeline

  • 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.

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.

AnneT triaged this task as High priority.Jun 10 2024, 5:19 PM
AnneT set the point value for this task to 2.Jun 10 2024, 5:28 PM

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

Change #1043320 merged by jenkins-bot:

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

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

Change #1049640 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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