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)

Font size slider

Would you please consider adding a font size slider (see how wikiwand.com did it) with a few more values between small (0.88rem) and what you call "standard" (1rem), and save the values separately for m.wiki. 1rem on all my devices looks way too big. Something around 0.93rem would be perfect - for me. Large is ridiculously large, esp. when it comes to infoboxes and alike, I don't understand what made you go that high. pon_or (talk) 12:25, 10 May 2024 (UTC)

The more customization options are added for you the reader, the harder it becomes for you the editor to make a well-formatted content page. Snowmanonahoe (talk) 20:24, 13 May 2024 (UTC)

SGrabarczuk (WMF) and OVasileva (WMF). The more font sizing options, the happier people will be. A well-formatted content page can be made regardless of the font size. As long as the font slider only effects text, and not images. Images are placed in proximity to text. Either below, or beside, a particular paragraph. So the image moves with the text. Regardless of the text size.

The font slider could operate continuously, or in stops. The more stops the better. 1, 5, or 10 percent increments. My Firefox zoom that I put on the toolbar has jumps that are too big if using the plus and minus buttons. But ctrl-scroll changes the text size in 10% increments. --Timeshifter (talk) 14:28, 14 June 2024 (UTC)

Dark mode parity with Android app

Hello! I want to ask a question about the dark mode that A4R is implementing. Currently, the A4R Minerva dark mode looks different to the Wikipedia Android app's dark mode. For example, A4R dark mode's background color (#101418) looks darker than Wikipedia Android dark mode's background color (#212121). Would the planned dark modes for Minerva and Vector 2022, when they are finished, resemble the dark mode for Wikipedia Android/iOS? If not, why? LightNightLights (talk) 16:30, 14 May 2024 (UTC)

I hope the apps then finally stop doing their own (undocumented) thing and use the same styles as the website. hgzh 10:00, 15 May 2024 (UTC)

From an engineering perspective, the approach taking in apps is actually very consistent with the web implementation, and the web implementation took a lot of inspiration from it and challenges it encountered. Fixes to dark mode in the web version for content will also apply in the app. The apps team actually kicked off the first version of our documentation for how to integrate with dark mode.

I'm not a designer, but for user interface, there are different design considerations which need to be taken into account in relation to the different platform so I imagine this is why some colors may vary in the UI. Jon (WMF) (talk) 02:08, 12 June 2024 (UTC)

Global preferences for dark mode

Tracked in Phabricator
Task T365373

As a steward, I'm operating across a lot of different projects. I need to change the color settings on each project individually, because I want to use the light color while using WMF projects, while my browsers settings trigger the automatic color selection (which seems to the default?) to activate the dark mode. There should be an option to globally select light/dark/automatic instead of having to customise it on every wiki I'm using. Johannnes89 (talk) 16:18, 17 May 2024 (UTC)

@Johannnes89, that's a good idea. We don't know yet how feasible it would be, but I've created a phab ticket. Thanks! SGrabarczuk (WMF) (talk) 16:32, 20 May 2024 (UTC)

I agree with you.

I needed to activate the dark mode inside the Spanish Wikipedia and the English Wikipedia individually.

I thought that my preferences inside Wikipedia were the same across the different languages I read the encyclopedia. Because I just use one account in all the projects I visit. Sebastián Arena... 15:45, 2 June 2024 (UTC)

This should now be fixed. Jon (WMF) (talk) 18:35, 27 June 2024 (UTC)

Wikimedia Commons gets invisible Template:Hidden arrows

This is Template:Hidden, it provides <details> like feature for Commons but on the Main Page of Commons it's arrows are invisible https://i.imgur.com/KIb2hsy.png and I'm puzzled for hours why is that so, the arrow are gray and they are more or less visible right now in Template:Hidden but only in Main Page it get's weird. ebrahim^talk 21:51, 10 June 2024 (UTC)

The main page receives some extra overrides. I'm not entirely sure why... @Jon (WMF) ? —TheDJ (Not WMF) (talk • contribs) 09:56, 26 June 2024 (UTC)

The main page overrides are mostly to disable use of colors andd reduce the amount of work on projects which do not have the capacity to update their main pages.

You should be able to opt out by adding the notheme class to this template or you can copy across and amend the styles for Commons by using the instructions here: https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles Jon (WMF) (talk) 03:36, 28 June 2024 (UTC)

Tooltip for icon

Right now on English Wikipedia, I can see the icon for the Accessibility for Reading menu, but it has no tooltip upon hovering. To help users be aware of the function of the icon without selecting it, could a tooltip be added? Isaacl (talk) 15:48, 11 June 2024 (UTC)

Agreed, tooltip would be useful, specially while the function is new and unfamiliar. 105.225.48.130 06:30, 12 June 2024 (UTC)

SGrabarczuk (WMF) and OVasileva (WMF). Tooltips are essential for icons.

Apple assumes all users of their iphones are fanatics, and so they make the same mistake of not putting labels below the icons in the control center, app library, and elsewhere. I don't use my cheap iphone SE 2020 much since there is a home phone here. And I don't feel as much need to do so, since it is the least expensive iphone. So I don't remember what many of the icons do when I come back to it.

Iphone home screen pages have labels below all the icons. Tooltips wouldn't work there of course since it is a touch screen.

The point I am making is that Wikimedia shouldn't assume people will know what icons do either. At least put a tooltip please. --Timeshifter (talk) 11:41, 15 June 2024 (UTC)

Accessibility text size not available in Special space?

I noticed that the text size options for the new accessibility module are grayed out for any page in Special:. What's the reason behind that? Tenryuu (talk) 17:49, 11 June 2024 (UTC)

phab:T360092 and phab:T366334#9866382 are the appropriate tasks for the discussions that led to this. @SGrabarczuk (WMF) perhaps this could be summarized on the FAQ since it seems like a question that has been asked a few times now? Jon (WMF) (talk) 02:02, 12 June 2024 (UTC)

Thanks for the question @Tenryuu - the idea here was that we would prioritize scannability for pages that did not generally include long-from text. Thus, we leaned towards displaying these pages in the local "small" version so that the page would have higher information density. However, as we receive feedback from the community, we are also open to iterating on this decision. If you have a minute, could you can give more detail on why you would prefer these pages to appear in the larger text size? We can use this to help us in making a decision for the future. Thank you! OVasileva (WMF) (talk) 10:59, 12 June 2024 (UTC)

Hi @OVasileva (WMF), thanks for responding. My reason for asking is because I frequently switch between my watchlist and other namespaces, and the switch between text size becomes jarring and strains my eyes; I've had to increase Wikipedia's text size in the past using my browser so that I could reduce fatigue. Would it be possible to enable the Accessibility toolbar in all the namespaces? It doesn't sound like it'd be taxing on the servers to allow such a thing. Tenryuu (talk) 13:34, 12 June 2024 (UTC)

OVasileva (WMF). I like larger text sizes in general. So I like this initiative by Wikimedia. I have the zoom bar on my toolbar in Firefox. With the plus and minus buttons, and the zoom percentage. Like Tenryuu, I switch often between the watchlist and other pages, and wikitext edit windows. I edit almost exclusively in wikitext windows. I have been editing since 2005. I use the Visual Editor sometimes for some particular types of table editing.

The more text sizing choices the better. I suggest a text-size option just for watchlists, and another just for wikitext editing. I like large text size in general, but slightly less large for watchlists and wikitext editing.

Windows made a huge mistake when it removed its many text sizing options. Its current system is chaos. As I have yet again experienced when I recently moved from Windows 10 Pro to Windows 11 Pro on another PC. I have a 1440x2560 resolution 27-inch monitor. And for some reason this combination is maybe the most exasperated I have ever been with the tiny text in many parts of Windows and apps. I have written much about it here trying to figure it out (much more to do):

https://weedwiki.fandom.com/wiki/User:Timeshifter#Firefox_bookmarks_text_size,_sidebar_width,_menu_text

That section and a few that follow deal with text sizing.

There are text sizing discussions concerning text in maps too. See:

https://en.wikipedia.org/wiki/Wikipedia_talk:Manual_of_Style/Accessibility#Text_in_images

By the way, I wish you had allowed the "expand all" button in the table of contents. See my latest comments here:

https://phabricator.wikimedia.org/T302426

--Timeshifter (talk) 13:45, 14 June 2024 (UTC)

Always enable the dark mode for all namespaces

Is there someway to enable the dark mode just always regardless of namespaces? I'm interested in fixing issues on namespace currently not marked for the dark mode myself and have fixed some in my home wiki so probably it's better to see them first even before other beta users. ebrahim^talk 19:25, 11 June 2024 (UTC)

I've been using this temporary global script to this. Is there any namespace in particular you want to fix? I can look into seeing if we can speed up the roll out of dark mode on that namespace if helpful. Jon (WMF) (talk) 02:00, 12 June 2024 (UTC)

Thank you so much, not any particular namespace for now 😊 Thanks ebrahim^talk 11:40, 12 June 2024 (UTC)

Jon (WMF): The code doesn't work in main page of d:Wikidata:Main Page but in a userpage like d:User:Ebrahim but I totally understand give the complexity of the work and Wikidata not being in a priority and I don't expect otherwise either so just consider that as a bug report for the particular script. Using that script I've done some edits in Wikimedia Commons, Wikidata and Persian Wikipedia where I had interface edit access. I will be careful to not add a new concern for you but just to fix things before other beta users have to deal with them. Thanks 😊 ebrahim^talk 12:48, 12 June 2024 (UTC)

Feel free to send a token or write on either phab:T366368 and phab:T366364 where we are tracking this. I think the main concern is we don't want to overwhelm editors with templates to fix. Jon (WMF) (talk) 19:32, 12 June 2024 (UTC)

Icon is too weird

The icon is too weird. With the lines to the side, it looks like a pair of swimming goggles, not a pair of reading glasses. This makes it stand out, which is a problem for scannability. This button is emphasized but not important, and distracts from the actual article.

It is not important because it duplicates browser features. You can just zoom in normally, or use Firefox/Chrome's Reader Mode for the other settings.

It would be better for the collapsed icon to be moved to the Tools menu, together with the Print/Export display options. When I click hide, I want the menu hidden, not converted into an icon, and I am having to use AdBlock until the button is changed. 184.146.170.127 19:44, 11 June 2024 (UTC)

Translating contents

It seems it works sometimes in Special pages such as translating content, but there are times it doesn't. LEILA FERRAZ (talk) 22:34, 12 June 2024 (UTC)

Every page needs optimizing for night mode. We are aiming to enable all pages, but this takes time because of legacy code.

A list of known issues on these pages can be found by going to https://phabricator.wikimedia.org/project/view/6717/ and scanning the "Excluded experiences" column on the far right. I hope this is helpful! Jon (WMF) (talk) 16:38, 18 June 2024 (UTC)

Is it possible to install this on my own Wiki?

I can't find anywhere whatsoever to enable this on my own wiki. What version do I need to get this on my own wiki? Is it something I need to install? 81.154.143.12 16:10, 13 June 2024 (UTC)

Yes but with the caveat it's still not stable (we are hoping to release as default in a future MediaWiki version). You need the following LocalSettings configuration:

:$wgVectorAppearance = true;
:$wgVectorNightMode = true;
:$wgMinervaNightMode = true;
:

Jon (WMF) (talk) 15:57, 18 June 2024 (UTC)

TOC is really distracting

Moved to Talk:Reading/Web/Desktop Improvements#TOC is really distracting

SGrabarczuk (WMF) (talk) 19:11, 17 June 2024 (UTC)

"Powered by MediaWiki" image at the bottom right in desktop view is incompatible with dark mode

Tracked in Phabricator
Task T256190

The "Powered by MediaWiki" image at the bottom right in desktop view is incompatible with dark mode. It appears to be a transparent image containing black text, so when the background is black, the text is not visible. The "a Wikimedia project" image next to it contains dark gray text, so the contrast with the black background probably fails accessibility guidelines.

I'm guessing that this will be a significant problem for any transparent images that assume a white background. It may need a systemic fix. Jonesey95 (talk) 03:09, 18 June 2024 (UTC)

task T256190 Jon (WMF) (talk) 15:53, 18 June 2024 (UTC)

Many icons that are black in light mode wikipedia don't invert to white

For example the subcategories in the contents tab are black and therefore hard to see, especially if you're visually impaired.

Next, the powered by mediawiki is also based on dark text and it is also hard to see

And some facts widgets are white instead of black.

Billv22 (talk) 00:03, 19 June 2024 (UTC)

These issues are all being tracked and in the process of being fixed. Jon (WMF) (talk) 22:23, 20 June 2024 (UTC)

"This page is always in light mode"

Edit: I now see that dark mode for all pages has been discussed under other topics, and it's being worked on.

With dark mode turned on, pages such as the Preferences page, and my user homepage, still show up in light mode, with the message "This page is always in light mode" next to the toggle.

The other dark mode gadget (which has to be disabled to use this project's dark mode) keeps these pages dark, however, so it seems technically possible, and I would appreciate the ability to keep as many pages as possible in dark mode.

FWIW, this project's dark mode is easier on my eyes than the dark mode gadget, I think because the gadget is closer to a pitch black whereas this project uses a dark grey. Spdou (talk) 15:48, 19 June 2024 (UTC)

Please see answer to #Translating_contents Jon (WMF) (talk) 22:24, 20 June 2024 (UTC)

The blue diff color is too dark

It is hard to see the text as the contrast is so low between the dark blue and the black. Also, the zero left-right padding makes it more difficult to distinguish the first and last character. 0.5 em would be much nicer. Ainali (talk) 21:38, 20 June 2024 (UTC)

If this refers to the change made in Wikidata then I agree. I don't mind the yellow that much, but the purple/black combo don't work as it makes the text difficult to read. Sabelöga (talk) 21:59, 20 June 2024 (UTC)

We plan to share more information to provide background and reasoning behind the reasoning later in the week on phab:T361717. Please subscribe for updates. Jon (WMF) (talk) 22:37, 25 June 2024 (UTC)

Diff color change on mobile web editor

The mobile web editor used to show added and removed text in red and green respectively, making it clear to 97% of editors what is happening in that diff. These colors have now been changed to blue and yellow, so that no one can tell which text was added vs removed. This change will lead to good edits getting mistakenly reverted and contributors driven away from editing. Surely there is a win win possibility that keeps the red green distinction helpful to most while using the different shading so it can be distinguished by colorblind editors. Alternatively, another way of viewing mobile diffs that does not depend on color shading. Buidhe (talk) 23:46, 21 June 2024 (UTC)

The diff colors were changed on February 20th to be consistent with desktop. This was unrelated to this project.

We plan to share more information to provide background and reasoning behind the use of blue/yellow in diffs later in the week on phab:T361717. Please subscribe for updates. Jon (WMF) (talk) 22:37, 25 June 2024 (UTC)

We need a better way to mark images as invertible

class=skin-invert works just fine for thumbnails directly placed into the article, but when you're working on projects with tons of template complexity, it gets real difficult. Here on enwiki we have a couple templates that go 2-3 metatemplates deep, and to invert an image that appears in them, you need to edit all of the templates themselves and add parameters for image classes, and for the metatemplates that usually involves reading hundreds of lines of incomprehensible Lua. Just adding the parameter to w:en:Template:Chembox took me about half an hour.

I have no idea whether this is technically feasible, but might it be possible to set an image as invertible at the image level? Like, add an image to a category or SDC property, and it's always inverted wherever it's used. Snowmanonahoe (talk) 21:58, 24 June 2024 (UTC)

Have you tried the new skin-invert-image class? Jon (WMF) (talk) 18:47, 25 June 2024 (UTC)

How is it supposed to help me? Snowmanonahoe (talk) 21:47, 25 June 2024 (UTC)

> but might it be possible to set an image as invertible at the image level?

Could you elaborate on what you mean by this? Adding skin-invert-image to any element will only invert image tag inside that element, so you should be able to apply it once to the parent element if all you need to do is invert all images in the template.

You can also add a CSS rule to your template to invert all images inside the template if that makes sense and your template has a parent class `html.skin-theme-clientpref-night .template-class img { filter: invert( 1 ); }`

If this doesn't apply to your particular problem, could you perhaps create an example in your sandbox, describing what you are hoping to achieve?

Thanks in advance! Jon (WMF) (talk) 18:35, 27 June 2024 (UTC)

[Bug] Cadre bleu autour des liens

Depuis quelques jours, quand on clique sur un lien, un cadre bleu disgracieux s'affiche autour du lien. Pouvez-vous le corriger svp. Merci. Ayack (talk) 14:21, 25 June 2024 (UTC)

thanks for the report!

Tracked in Phabricator
Task T368137

Jdlrobson (talk) 17:08, 25 June 2024 (UTC)

Night mode error report appears to be false positives or not fixable by editors

The recommendation says "Go to https://night-mode-checker.wmcloud.org/" and look at the errors, but when I go to the error list for en.WP, nearly every entry in the list is a link to "Tools" or "show"/"hide". Can these listings either be filtered out or fixed at the MediaWiki level by WMF developers? The error listing is pretty much useless in its current state because it is flooded with these unfixable listings. Thanks. Jonesey95 (talk) 16:27, 26 June 2024 (UTC)

The reports are intended to flag all issues with the page - as some may relate to gadgets/templates/extensions.

It's impossible to filter out these kind of issues, since templates can apply their own CSS but there is a bug fix in the works for this particular issue: phab:T368498. Jon (WMF) (talk) 18:37, 27 June 2024 (UTC)

Night mode checker marks standard links for dewiki as noncompliant

[1] currently contains 113 errors for the dewiki main page that uses nothing but just standard links on standard background. It seems like the contrast checker now requires WCAG AAA? hgzh 12:10, 1 July 2024 (UTC)

Thanks for raising this. Did you check to see if the links specifically are being flagged by the contrast checker? We haven't changed the criteria from WCAG AA (4.5:1 contrast ratio), and DE homepage is using the correct CSS variable for links, so links shouldn't be coming up in the contrast checks at all. I suspect most of those contrast errors on the page come from borders and section background colours. The automated checker still flags them even though they don't need to pass contrast checks because you don't need to interact with them to use the site. If that's the case, you can consider those false positives. JScherer-WMF (talk) 21:38, 3 July 2024 (UTC)

Hey the tool wasnt working properly. I just regenerated them and the main page is no longer showing up.

I can confirm we are still testing for WCAG AA.

Let me know! Jdlrobson (talk) 22:12, 3 July 2024 (UTC)

The results look good now, however, the expanding of the sections seems to be broken. hgzh 06:17, 4 July 2024 (UTC)

Thanks for flagging. Should be fixed now (on some pages it may take a little longer for that fix to propagate). Jon (WMF) (talk) 19:51, 5 July 2024 (UTC)

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)

Linter status

Here it says ''As of now, the "night-mode-unaware-background-color" lint is assigned a priority level of none. This means it is not listed in "Page information" and is not visible on the main lint error page, and there are no expectations for editors to address identified issues until further notice.'' Still the error does show up on the Lint error page of Dutch Wiktionary. And instructions to solve this requiring Javascript aren't very useful to me. MarcoSwart (talk) 10:27, 4 July 2024 (UTC)

Hi there! This change went live yesterday. Due to the US holiday, I was only able to update the documentation today. I was worried that it would cause further confusion if it had been updated a day earlier.

I hope the newly updated documentation is clearer now! Jon (WMF) (talk) 19:51, 5 July 2024 (UTC)

Custom namespaces

After the last update dark mode is available in the default namespaces, but not in the custom ones. Many wiki projects have namespaces like "List", "Project", "Portal", etc, and for them, dark mode is also needed for consistency. — putnik 14:53, 5 July 2024 (UTC)

Hi @Putnik we are slowly turning on these namespaces one by one, but the goal is to have all of them enabled. For portal for example,

• Project pages will be enabled on Monday: https://phabricator.wikimedia.org/T366366
• We've had some feedback that editors do not want to fix portal pages so we've been holding of on that (https://phabricator.wikimedia.org/T366380#9943402) - please let us know on the ticket your own thoughts on this matter.
• For list namespace, we don't have a Phabricator ticket so it hasn't been a priority. Please request it and we'll be sure to add that to our radar. It helps us prioritize when we know somebody is asking for it.

Jon (WMF) (talk) 19:55, 5 July 2024 (UTC)

List of municipalities in United States

Hello there, I am a Chinese Wikipedia user who create lists of municipalities in some US States and make them to Featured List. However, it is turned out by some users that the displaying of some colors are problematic when using Dark Mode.

Take en:List of cities in Kansas (Chinese zh:堪萨斯州城市列表, some users told me the green (representing county seats) and purple (representing atate capital) color are still as bright as light mode, which happened in both languages and affect the reading of articles. (The actual display shown in here)

So I would like to ask if it is possible to let the green and purple look like this in Dark Mode, or is it possible to adjust the color in Dark Mode manually by wiki code. If yes, would the problem being fixed?

As I would like to create more similar articles in these two months, I hope that my questions could be answered sooner. SickManWP (talk) 15:12, 5 July 2024 (UTC)

if it is possible to let the green and purple look like this in Dark Mode You are using the dark mode gadget rather than the "Accessibility for reading" dark mode. Thanks. SCP-2000 (talk) 15:51, 5 July 2024 (UTC)

Yes, my meaning is the colors in dark mode gadget is better. If "Accessibility for reading" dark mode is used, that is where the color problem is. --SickManWP (talk) 16:09, 5 July 2024 (UTC)

Hi there, I think the recommendation about using CSS variables applies here.

You have two options here:

1) You can swap out

background-color:#b4ddb4;

with

background-color: var(--background-color-success-subtle,#b4ddb4)

,

color:red;

with

color: var(--color-error, red);

and

color:green

with

color: var(--color-success, green)

for better dark mode support. [recommended as this improves accessibility]

2) You can add skin-invert class to the table itself [short term fix only but is quick - does not improve accessibility of this page].

Please circulate this recommendation with your community and consider making templates to help with its widespread use! Jon (WMF) (talk) 20:00, 5 July 2024 (UTC)

Thanks for your advice! However, there are three problems found during the test of the first option. I've tested the codes in zh:User:SickManWP/沙盒/16 (always welcome to edit!) and take Delaware as example, which is much shorter and contains very few counties.

1) If the b4ddb4 color is changed, despite the color in Dark Mode can be altered, The color of words cannot be change to white. (actual display)

2) The colors cannot be shown when using the template zh:Template:Legend2, which is not sure if it is my mistake of coding.

3) When I tried to change of #CCCCFF (purple) and #F2F2F2 (very pale grey) colors, it still shown dark green color, which are as same as county seat.

--SickManWP (talk) 04:15, 6 July 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)

Sister projects

@SGrabarczuk (WMF) @OVasileva (WMF) Last month it was announced that, by mid-June, logged-out users would be able to choose between different font sizes and that the default font size would be increased for them. This happened on Wikipedia but not on sister projects like Italian Wikisource or French Wikiquote, though the change had been announced there as well. Is there any specific reason for this? Erasmo Barresi (talk) 14:54, 7 July 2024 (UTC)

Hi @Erasmo Barresi - thank you for your question. In short - we're running a bit late but it's coming soon. More specifically, we have not yet had the sufficient time to test the appearance menu and text settings across sister projects. We are planning to do this testing over the course of this month, followed by making the feature available across wikis. OVasileva (WMF) (talk) 18:01, 8 July 2024 (UTC)

@OVasileva (WMF) Thank you! The Tech News newsletter was a bit misleading, as it referred to "wikis" in general, implying that the change was coming for all projects at the same time. This feature is a step forward, incorporating into the default interface something used to be done through CSS or local gadgets, so I look forward to seeing it available everywhere! Erasmo Barresi (talk) 14:49, 9 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)

CharInsert buttons

When I have the CharInsert gadget enabled on the English Wikipedia (which is on by default), the buttons for individual characters are still white when I also have dark mode enabled (which it is for me because of my operating system settings). -- Beland (talk) 17:17, 11 July 2024 (UTC)

Please report this to the gadget author via the gadget talk page. Thanks in advance! Jon (WMF) (talk) 00:04, 12 July 2024 (UTC)

Reported on en:Wikipedia:Village pump (technical)#CharInsert and dark mode. -- Beland (talk) 06:46, 12 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)