Page MenuHomePhabricator

Dark mode: --color-subtle is not dim enough
Closed, ResolvedPublic

Description

Steps to reproduce:

  1. Go to https://en.wikipedia.org/wiki/Stephen_Spielberg
  2. Enable dark mode if it is not enabled
  3. Look at the "(Redirected from Stephen Spielberg)" line

This is what I get:

darkwhite
image.png (393×769 px, 55 KB)
image.png (388×763 px, 53 KB)

The way I see it, the color of the subtitle is nearly indistinguishable from the base color for text.

It's #eaecf0 (--color-subtle) compared to #f8f9fa (--color-base). The contrast ratio for them is only 1.12. For comparison, in light mode, said ratio is 2.27. (Which is why I put --color-subtle in the title and not "the subtitle" – the issue is specifically the value of --color-subtle in the dark mode, and it affects all places in the design where --color-subtle is used.)

In my designs, I have to resort to using the value of --color-placeholder (gray300, #c8ccd1) which gives the contrast of 1.53, which still seems not enough. In terms of text-to-text contrast, the closest value to 2.27 is produced by gray400, #a2a9b1, which is 2.25, and it has safe 7.79 to the dark background.

gray300, text-to-text contrast ratio 1.53gray400, text-to-text contrast ratio 2.25
image.png (388×763 px, 55 KB)
image.png (393×767 px, 55 KB)

Context: T26070

Event Timeline

Jack_who_built_the_house renamed this task from Dark mode: --color-subtle is not dimmed enough to Dark mode: --color-subtle is not dim enough.Jun 6 2024, 7:43 PM
JScherer-WMF added a subscriber: DTorsani-WMF.

@Jack_who_built_the_house thanks for flagging this. Have you tried border-color-muted for these? It's #404244 in dark mode and a nice colour for borders against the base background that is visible, but not too stark. I see your point about the subtle color, though, so I'm going to put this in the Design System backlog because they're the ones who are maintaining the design tokens. cc @DTorsani-WMF

In case you were worried about colour contrast ratios making it to 4.5:1 contrast for keylines and borders for elements like infoboxes, those are not interactive elements. They're technically "decoration" according to WCAG, and so they're not subject to the same colour contrast rules as text, buttons, etc.

@JScherer-WMF I think you're reading me wrong, because I never mentioned borders here :) The task is about text color. Also to be clear, I compare contrast ratios between text colors, whereas the calculator treats them as background and text colors, but this is still a correct usage AFAIU.

Actually, I just researched it, and https://www.w3.org/TR/WCAG20-TECHS/G183.html says that a contrast ratio of 3:1 should be used for surrounding text, e.g. hyperlinks against regular text, which seems to be close the case discussed here. But I assume that distinguishing subtitle text from regular text is not a necessity, so it's not an accessibility issue.

Thanks @Jack_who_built_the_house for bringing this to our attention. I think the point you are making is very valid. We are in the process of refining some of our dark mode values as we learn of instances like this, so thank you for adding this to our radar. I would suggest we make a change to some of the dark mode tokens to add a bit more contrast in the examples of color-subtle and color-placeholder. This would be a change on the system side, so something we should track for improvements to dark mode tokens.

I have created T366861 to for this work on the Codex side. @JScherer-WMF Do you know of any other improvements or requests similar to this one which have been add that we can add as considerations to that task?

@Jack_who_built_the_house Thanks again for filing this task. This task will be resolved with T366861 which has an associated patch that has been merged. It will be published with the next Codex release. This task can be resolved.