Theme Color Contrast Demo

The example pages below demonstrate different implementations of light themes and dark themes. Some pages do not respond to the user's preferred color scheme, some do, and others allow the user to toggle between themes. Note that these color themes are supplied by the content author via stylesheets - they do not rely on third party extensions or accessible modes of operation such as high contrast modes. The demos are best experienced by disabling any custom stylesheets or color altering extensions.

For each page, try switching your browser or operating system color scheme setting. Firefox users can adjust this setting manually in about:config by adding "ui.systemUsesDarkTheme" and setting it to a value of "1" or "0".

Each page contains text that fails the WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) in one color theme. Questions to consider:

Do the pages conform to WCAG 2.1?
Does the conforming color theme constitute an alternate version for WCAG conformance?
Do the color themes constitute alternate versions if they are presented automatically? If they are available via an in-content control?
Does the color theme chosen as the default by the content author matter when determining conformance?

Examples

Example 1: Light - light theme regardless of a user's preferred color scheme
Example 2: Dark - dark theme regardless of a user's preferred color scheme
Example 3: Default Light - uses a light theme by default, but presents a dark theme automatically based on a user's preferred color scheme
Example 4: Default Dark - This page uses a light theme by default, but presents a dark theme automatically based on a user's preferred color scheme.
Example 5: Toggle - presents a light theme by default and allows the user to toggle between light and dark themes
Example 6: Default Toggle - uses a light theme by default, but presents a dark theme automatically based on a user's preferred color scheme and allows a user to toggle between light and dark themes