Avoid use of pure black, or, use Canvas and CanvasText CSS values as the background color in the Dark mode
Open, Stalled, MediumPublicDesign
Actions

Assigned To

Authored By

	Ebrahim
	Mon, Jun 10, 6:02 PM

Description

This is mentioned on https://www.mediawiki.org/wiki/Talk:Reading/Web/Accessibility_for_reading/Archive1#Pure-black_dark_mode but I searched Phabricator so wished open a file before too late so I'll quote

[..] Too many dark modes on websites use pure black as the background colour. This also causes eyestrain and personally causes headaches, especially with pure white text on top. One solution could be to have two different dark modes, one with pure black and one with a shade of dark gray - that then accomodates those who prefer the pure black.

What I like to suggest also using browser provided Canvas and CanvasText colors in dark mode which has great defaults specially for dark mode https://web.dev/articles/light-dark (if not touching background-color isn't an option) which probably for users in need of pure black (OLED screens) will handle the situation automatically probably if it doesn't right now.

Event Timeline

Ebrahim created this task.Mon, Jun 10, 6:02 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMon, Jun 10, 6:02 PM

Hi @Ebrahim, please bring this up on the talk page at https://www.mediawiki.org/wiki/Talk:Reading/Web/Accessibility_for_reading , as Phabricator is mostly for bug reports, feature requests, and planning work - thanks a lot! :)

Hi @Aklapper The discussion on the talk page is exactly why there is a ticket. See https://www.mediawiki.org/wiki/Talk:Reading/Web/Accessibility_for_reading/Archive1#Pure-black_dark_mode

Quote by @JScherer-WMF :

Thanks for the feedback @Suntooooth! We do not intend to use #000000 as the dark background in the new Night colour palette. I agree that it's harsh and results in a poorer reading experience. JScherer-WMF (talk) 20:40, 6 February 2024 (UTC)

But that hasn't changed so it should be tracked somewhere.

Ladsgroup added projects: Web-Team-Backlog, FY2023-24-WE 2.1 Typography and palette customizations.Mon, Jun 10, 6:22 PM

Ladsgroup renamed this task from Avoid use of pure black, or, use Canvas and CanvasText CSS values in the Dark mode to Avoid use of pure black, or, use Canvas and CanvasText CSS values as the background color in the Dark mode.Mon, Jun 10, 6:24 PM

@Ladsgroup what exactly is the issue here though - we are avoiding these colors? We are not using #000 as the background color for text... we're using #f8f9fa color text on #202122 .

Hmm, I see #000 as background of links:

And background of text is indeed not #000, it's not #202122 either. It's #101418 which is so black that it seems people are mistaking it as black? *Maybe my browser is is acting up)

(URL to test: https://fa.wikipedia.org/wiki/%D9%81%D8%B1%D8%A7%D9%86%D8%B3%DB%8C%D8%B3_%D9%81%D9%88%D8%B1%D8%AF_%DA%A9%D9%88%D9%BE%D9%88%D9%84%D8%A7)

what exactly is the issue here though

That was my perception that this is still pure black not @Ladsgroup fault so I'm sorry about it and the reason for perception was I still was thinking this is pure black given the topic also as the contrast is higher than what is elsewhere consulting my designer friend (that's why I thought it's still pure black) and my suggestion is to use Canvas and CanvasText as CSS color values as they don't have this level of contrast.

Jdlrobson assigned this task to JScherer-WMF.Mon, Jun 10, 8:19 PM

Jdlrobson added a project: Design-System-Team.

Sorry for confusion. Yes, there is a rule on .mw-page-container that should be setting background to --background-color-base CSS variable which should be #101418 in dark mode.

Screenshot 2024-06-10 at 1.27.03 PM.png (346×483 px, 79 KB)

This needs design review from Justin.

Jdlrobson moved this task from Holding area (temporary) to Groomed on the Web-Team-Backlog board.Tue, Jun 11, 4:19 PM

SToyofuku-WMF subscribed.Tue, Jun 11, 4:27 PM

Jdlrobson moved this task from Backlog to General on the FY2023-24-WE 2.1 Typography and palette customizations board.Thu, Jun 13, 12:58 AM

Catrope moved this task from Inbox to Following on the Design-System-Team board.Mon, Jun 17, 4:26 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2024-25 Q1 Sprint 1); removed Web-Team-Backlog.Fri, Jun 28, 2:58 AM

	F55190791: Screenshot 2024-06-10 at 1.27.03 PM.png
	Mon, Jun 10, 8:27 PM

	F55189818: image.png
	Mon, Jun 10, 8:10 PM

	F55189773: grafik.png
	Mon, Jun 10, 8:09 PM

	F55189723: grafik.png
	Mon, Jun 10, 8:09 PM

Avoid use of pure black, or, use Canvas and CanvasText CSS values as the background color in the Dark modeOpen, Stalled, MediumPublicDesignActions

Description

Event Timeline

Avoid use of pure black, or, use Canvas and CanvasText CSS values as the background color in the Dark mode
Open, Stalled, MediumPublicDesign
Actions