Accessibility dark mode makes some images undreadable

Accessibility dark mode seems to be a bit broken in places, mostly with images in dig deeper articles.

For example, on the Python track, the Leap practice exercise’s “Performance deep dive” article has a graph that shows the “light” version instead of the “dark” version when using accessibility dark mode. Looking at the HTML, it seems that both SVGs are retrieved, but the dark version is hidden with CSS:

.theme-accessibility-dark img.c-img-dark-theme {
  display: none;
}

A similar problem can be seen on the C++ track’s Leap “Performance deep dive” article, where the box plot image is marked as “invertible,” and a CSS filter is applied to invert the colors, making it be black-on-black.

For both of these, the graphs were unreadable in accessibility dark mode, but fine in light mode. (Insider dark mode was not tested.)

Screenshots


Huh. I am using the insiders dark theme, and am seeing that SVG for Leap on Python just fine. Not sure why Accessibility Dark is set to do something different:

The issue is actually two-fold:

  1. If you are on “Dark” (insiders), everything works as expected.
  2. If you are on “System” (insiders), the graph disappears in dark mode.
  3. If you are on “Accessibility Dark”, the graph appears in light mode.

2 and 3 are bugs.

cc @dem4ron / @iHiD .

3 Likes