The text is visible, but the icons (which are black) aren't.

I think this is probably a problem with the interface components that the visual editor uses, rather than with visual editor itself.

Related: http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html

Similar problem in Internet Explorer 11 and Firefox, but those browsers remove background-image so it affects all high contrast modes.

How to test in Firefox:
In about:preferences, scroll to Fonts & Colors in Language and Appearance, click [Colors...], under "Override the colors specified by the page with your selections above" switch from [Only with High Contrast themes] to [Always].

It would be good if this could be addressed somehow.
In Windows 10, 3 out of 4 high contrast settings use black background. Would it be feasible to replace the background svg-images with font icons so they don't get "lost" when users need the high contrast setting?`

This is probably fixable today, using @media (forced-colors: active) and (prefers-color-scheme: dark) together with filter: invert(1).

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

These features didn't exist or weren't supported in 2017 when this task was filed.

Hmm, what we could try is to add this to OOUI's WikimediaUI theme on .oo-ui-iconElement-icon and maybe also mediawiki.ui icons .mw-ui-icon:before in new accessibility.less skin module.
The invert filter would work on normal icons, and probably also on progressive ones. Unclear are destructive and white ones to me.

I tried the suggestion from @matmarex and added the following to MediaWiki:Common.css as a test scenario:

@media (prefers-color-scheme: dark) {
 	.oo-ui-iconElement {filter: invert(1)}
 }

and it would do the trick from what I can see. The VisualEditor icons are now visible. The hovers would probably cause some work, but overall a promising approach.

I hope the ticket will progress.

I think this is preferred for dark mode colours:

{ filter: invert( 1 ) hue-rotate( 180deg ); }

Change 814860 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] WIP Invert icons in dark/high contrast mode

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

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

Also created an OOUI Demos page:
https://patchdemo.wmflabs.org/wikis/f58002e188/w/build/ooui/demos

Can someone with a Windows device test the above patch?

@Esanders I could test on Windows. However, it doesn't look like VisualEditor is installed on the Patch demo.
https://patchdemo.wmflabs.org/wikis/f58002e188/w/index.php?title=Special:Version

Just test the OOUI demos page:

In T180890#8085389, @PatchDemoBot wrote:

[...]

Also created an OOUI Demos page:
https://patchdemo.wmflabs.org/wikis/f58002e188/w/build/ooui/demos

The styles don't get applied in Windows 10 / latest Chrome.

Manually added in browser inspector

filter: invert(1)

shows the intended effect (.oo-ui-iconElement-icon):

and for the drop-down arrow (.oo-ui-indicator-down):

I just tested on a VM (Window 10 Pro 21H2, Chrome 103) and it appears to mostly work:

It appears that flagged primary buttons still render as white on black, so we should exclude icons which have been inverted by OOUI (oo-ui-image-invert):

Sorry, Chrome is working indeed. I also tested Windows 10 / latest Edge. As expected, same thing.

My original screenshots where not Chrome as I had wrongly stated, but latest Firefox. There, it doesn't work. Not sure if that is of concern.

I am very happy about how everything works and I think it will be a fabulous and important improvement!

Just a note that this might conflict with the en.wp dark mode gadget, which also uses invert filter, which might cause double inverting.

FF appears to be not setting prefers-color-scheme:dark, as described here: https://stackoverflow.com/questions/71883672/firefox-not-respecting-user-mediaprefers-color-scheme-dark

In T180890#8091614, @TheDJ wrote:

Just a note that this might conflict with the en.wp dark mode gadget, which also uses invert filter, which might cause double inverting.

For any gadgets that may conflict, the selectors are below, although any user who has set dark mode in their OS or browser will have no need for the gadget.

@media ( forced-colors: active ) and ( prefers-color-scheme: dark ) {
    oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
    oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
        filter: invert( 1 ) hue-rotate( 180deg );
    }
}

Relevant Firefox bugs:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1768353
• https://bugzilla.mozilla.org/show_bug.cgi?id=1777614

Change 814860 merged by jenkins-bot:

[oojs/ui@master] Invert icons in dark/high contrast mode

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

Change 817802 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.44.2

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

Change 817802 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.44.2

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

🎉

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/f58002e188/w/