tutorial
tutorial copied to clipboard
DjangoGirls
Night mode - some things become invisible
Issue description
For contrast reasons, one attendee using a Mac with Chrome browser likes to put her browser in "Night" mode.
When she did this, some parts of the tutorial were not readable, such as the code samples.
I don't exactly know what happens in Night mode, but since it seems to be a common feature of Chrome, it should work?
I looked into this a bit more, and it appears that Night Mode is accomplished via a plugin in either Chrome or Firefox (see https://www.stugon.com/enable-night-mode-chrome-firefox/ or many other articles).
So... probably this plugin is not behaving well.
Something else to consider is whether the tutorial has accessible colors (sufficient contrast) in all areas -- if it doesn't, that could be related to this problem. But unless we are using custom HTML, the colors are probably coming from GitHub and there may not be anything we can easily do.
Yes, there are some contrast problems. To see them, try http://wave.webaim.org/report#/https://tutorial.djangogirls.org/en/django_orm/ and then click the Contrast tab.
The one that is all over this page is the title blocks on Code sections. These have background color rgba(0, 0, 0, 0.07), and foreground color rgb(51, 51, 51). Hm. Probably the transparency thing is confusing night mode into thinking it's a black background, when it's really effectively a light gray because of the 7% transparency.
But anyway... it doesn't look like we are doing anything to the styles (very little anyway, and nothing here), so this is default GitBook styles. Not sure we should try to do anything about it, but it is an issue if GitBook validates as non-accessible I guess?
For what it's worth, GitBook (and by extension https://tutorial.djangogirls.org) has its own night mode:
Click the "A" icon next to the menu icon and choose "night".
About GitBook's accessibility/contrast problems, consider filing an issue or PR at https://github.com/GitbookIO/gitbook.
That's interesting that it has font/color modes... Should we tell people about this in the intro? I had no idea. Also, do people who need such things normally use browser settings, or would they look to something on the page?
I don't actually think that GitBook has a contrast problem... it's just that the accessibility checker thinks it does. :)
Should we tell people about this in the intro?
I dunno. That's a GitBook feature and thus subject to change without Django Girls even being notified, I guess.
I created an issue in the GitBook project: https://github.com/GitbookIO/gitbook/issues/2150
GitBook is no longer under active development (see https://github.com/GitbookIO/gitbook/), so it looks like this issue won't be solved. There's a new version : https://docs.gitbook.com/v2-changes/important-differences
To illustrate the issue, here is a comparison of the 3 themes, showing how "Night" renders titles unreadable:
