Go to overview: Test development and standards
Detlev Fischer, (detlev [dot] fischer [ at ] dias [dot] de), last update: 13 Sept 2024
The point of this page is to show that while dark mode is liked by many and offers a good alternative experience for people preferring it, it is not as simple as setting body to a dark color and text color to a light one.
In all sites tested so far, the application of a simple dark mode bookmarklet leads to often significant issues regarding text contrast, often in many areas including critical ones like navigation. This, of course, is only to be expected. Dark mode as a separate color scheme needs careful design for the many different elements in a site to work well throughout.
The context of this quick test was the discussion of the future ask of 11.7 User preferences of the EN 301 549 - see issue 23 of the ETSI GitLab.
Multiple text areas without sufficient color contrast
Navigation with insufficient text contrast
Multiple areas with insufficient text contrast (both content and navigation)
Important control text and entire footer without sufficient color contrast
Navigation and multiple text areas without sufficient color contrast
Many areas where text is completely unreadable
Multiple areas with very poor text contrast (both content and navigation, and search, and cookie dialogue)
Start page: Section "watch", and coolie dialogue without sufficient color contrast
Headings and body text with very poor text contrast
No effect on large areas of content, other texts disappear entirely, still others with very poor contrast. including dialogues with very poor contrast