Talk:Reading/Web/Accessibility for reading

Overview

Repository

FAQ

Discussions: Desktop Improvements • Accessibility for reading.

---

You can comment in any language. We are especially interested in:

• Feedback on the functionalities we have already deployed. (Please see Reading/Web/Accessibility for reading/Known issues before reporting bugs.)

• Expanding the list of existing gadgets and user scripts that are related to providing a better desktop experience.

We are discussing with many volunteers and communities at the same time. It may take some time for us to reply here. We apologize for that.

Thank you!

(Translate this page)

Dark mode link color

Hello,

Congrats on shipping the dark mode on Mediawiki, this is very nice!

I do have a big issue with the colour of the blue links on dark mode. They are very dark and that creates a lot of holes in the text. They are too contrasted from the rest of the text and not contrasted enough from the background and it seriously breaks the reading.

This is a case where looking at the WCAG number has its limits (I can see that they are similar than in light mode), and there is a need for actually reading through content with a lot of links and visually adjust.

Current dark mode link colour is #6d8af2. A really quick test suggests me that something closer to #8da3f2 makes reading much easier.

Hope you can have a look :) Thanks!

Nclm (talk) 09:42, 2 July 2024 (UTC)

Thank you for your suggestion! We'll be sure to consider it next time we iterate on the colour palette. JScherer-WMF (talk) 21:40, 3 July 2024 (UTC)

Just wanted to echo this. I had an immediate negative reaction to the link color as it's too red a hue. The text color is also too bright for dark mode. You don't necessarily want 100% contrast in dark mode because reading glowing white text is tiring

Finally, right now the theme has two background colors that are very pronounced: one for the wiki and another for the base background of the page. In light mode, this is barely perceptible (I had literally never noticed until looking for it right now) whereas in dark mode the two shades of dark are very different in hue and perceived brightness. Specifically, the base background is also "too red" relative to the blueish wiki background. And with that the scrollbar and other elements also stand out as "unfinished".

Just my $0.02! I look forward to browsing wikipedia in dark mode! 167.88.80.39 14:20, 15 August 2024 (UTC)

Use skin-invert in gallery

Apparently I can't use class=skin-invert in gallery for https://en.wikipedia.org/wiki/Kufic#Square_Kufic and guess it will nice to have −Ebrahim^talk 09:25, 6 July 2024 (UTC)

Considering this also happens in https://commons.wikimedia.org/wiki/Category:Square_Kufic also, maybe we need some property to be set in each image instead of tweaking the uses, at least to be used in categories and galleries. −Ebrahim^talk 12:31, 6 July 2024 (UTC)

We provide the 'skin-invert-image' class for this purpose! There's more documentation here: https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Apply_filters_to_dark_images_with_transparent_background

Hopefully this helps, let me know if you have any other questions! BWang (WMF) (talk) 17:57, 8 July 2024 (UTC)

It seems like skin-invert-image does not work for individual images in a gallery. See for example https://en.wikipedia.org/wiki/Kufic#Square_Kufic where only a few of the images should be inverted. Using skin-invert-image on the whole gallery is not a good solution as this messes up the other images. Tholme (talk) 19:38, 14 July 2024 (UTC)

White background instead of inversion for transparent images

Hello! In dark mode, can it be recommended in Recommendations for night mode compatibility on Wikimedia wikis that editors can alternatively add a white background to a transparent image than to invert that image? I think that, at least in some cases, a white background is better than an inversion.

I made a comparison at en:User:LightNightLights/Dark mode white background. In my opinion: you cannot read the text in the first logo, the colors are misleading in the second logo, and none of these problems are present in the third logo. LightNightLights (talk) 15:02, 9 July 2024 (UTC)

Hi there! This is a great suggestion, and I appreciate you taking the time to provide an example. I'm about to edit Recommendations for night mode compatibility on Wikimedia wikis#Apply filters to dark images with transparent background to reflect this suggestion - feel free to take a look and let me know if you have any suggestions for updated wording/if I captured your suggestion well ☺️ SToyofuku-WMF (talk) 20:30, 10 July 2024 (UTC)

Thank you for adding my suggestion! I have some opposition to the phrase "so that it can be seen in both day and night modes", since I think inverting the image does make them visible in both day and night mode. I argue though that inversion is not the best way to make them visible in both modes because they can make the colors of the image misleading.

On that topic, should we mention in the recommendation that image inversion can cause misleading colors? (By "misleading colors", I mean colors that do not match the branding's colors. For example, in the comparison I linked, |class=skin-invert turns red into pink and yellow into brown.)

Other than that, I am wondering what WMF visual designers think of the recommendation. I am not a professional visual designer myself (sorry for not mentioning that in my initial post), and it might turn out that my suggestion contradicts best-design guidelines. If it is possible, notifying them of this would be great! LightNightLights (talk) 23:05, 10 July 2024 (UTC) (edited 23:12, 10 July 2024 (UTC))

Hi @LightNightLights! Good point, I will update the wording a little bit. As for what designers think, I believe this is in line with the recommendation that our team's UX designer proposed - whenever possible we want to preserve semantic colors so that images are not misleading

Thank you again for the suggestion!! SToyofuku-WMF (talk) 20:30, 11 July 2024 (UTC)

There should also be an option to add a white background to thumbs via class like skin-invert. hgzh 07:18, 12 July 2024 (UTC)

I think that would be a good idea. @SToyofuku-WMF, thoughts? LightNightLights (talk) 18:26, 14 July 2024 (UTC)

I think that makes sense! Feel free to make a Phabricator ticket using the form at Reading/Web/Request process, and our product manager can take a look at it for prioritization SToyofuku-WMF (talk) 16:46, 15 July 2024 (UTC)

Do you know what is currently the best way to add a white background to an image? I checked @LightNightLights's example, but it uses a div to wrap around the image. I don't think this will work if the image has a caption. Panangam (talk) 13:36, 18 July 2024 (UTC)

Found a relevant comment here. Panangam (talk) 13:47, 18 July 2024 (UTC)

darkmode parameter?

Is there a url parameter (e.g. ?usedarkmode=1) that works with logged out web users users to preview and troubleshoot pages right now? Xaosflux (talk) 13:16, 15 July 2024 (UTC)

I am not aware of a URL parameter that works, but I visit Special:MobileOptions on desktop when logged out to set my mode to Dark. LightNightLights (talk) 15:08, 15 July 2024 (UTC) (stricken LightNightLights (talk) 16:29, 15 July 2024 (UTC))

Yes. For desktop (for now) you can add ?vectornightmode=1 to the URL. Jon (WMF) (talk) 16:04, 15 July 2024 (UTC)

(This did not work for my phone browser in desktop mode, but did work in my laptop. I will strike my earlier comment.) LightNightLights (talk) 16:27, 15 July 2024 (UTC)

hmm - it works for me in desktop mode on my phone

For what it's worth, on the mobile site we supply a similar ?minervanightmode=1 option SToyofuku-WMF (talk) 16:50, 15 July 2024 (UTC)

Thank you, worked for this VRT ticket I'm trying to help with. Xaosflux (talk) 20:25, 15 July 2024 (UTC)

It's safe to append both to a URL.

For example https://en.wikipedia.org/wiki/Dog?minervanightmode=1&vectornightmode=1 will always force dark mode on whether it's loaded on mobile or desktop. Jon (WMF) (talk) 20:27, 15 July 2024 (UTC)

Suggestion for improvement for dark mode

Hey there, I just noticed that dark mode was recently implemented, and it's great and all. However, I do want to suggest making the color of the links in dark mode a slightly lighter color, so that links would be more visible and contrasting well to the dark background.

If it is also possible, can we see customization options and themes just like in the app, where there is a pure black dark theme and a sepia light theme? Thanks. HepiChestCow (talk) 17:57, 18 July 2024 (UTC)

FYI, you can add custom CSS properties using a user page, as described here: https://en.wikipedia.org/wiki/Help:User_style.

I am in fact using this to add dark mode to CodeMirror syntax highlighter, which doesn't seem to have dark mode. Panangam (talk) 07:33, 19 July 2024 (UTC)

Suggestion for Universal design font for dyslexia

First of all, please keep in mind that I am Japanese and that I am only familiar with the situation in Japan. Also, I am not sure whether this is the appropriate place to ask this question.

I believe Wiki should offer an option to use UD fonts. People with dyslexia, who struggle with reading, may have difficulty reading text, and UD fonts can help them.

In Japanese, we can use some UD font such as BIZ UDPGothic[1] for free. --03:52, 22 August 2024 (UTC) Nalayama089 (talk) 03:52, 22 August 2024 (UTC)

Hello @Nalayama089,

I think this is a great idea! I'm going to forward it along to our product manager for prioritization (: SToyofuku-WMF (talk) 18:35, 23 August 2024 (UTC)

Thank you for your helping!! --Nalayama089 (talk) 23:18, 23 August 2024 (UTC)

Hi @Nalayama089! No worries at all ☺️

I got some advice that we do currently support some degree of font customization - if you click on the language selector and then the settings cog, there is a font tab that will let you download additional fonts and select a preferred font. While English Wikipedia does support OpenDyslexic, I checked and it doesn't appear that Japanese Wikipedia has a UD font. I can follow up with the team about what it would take to get this support added, but it likely isn't something we'd be able to provide in the short term SToyofuku-WMF (talk) 19:34, 26 August 2024 (UTC)