code • CSS color scheme for light VS dark theme support - martindubenet/wed-dev-design GitHub Wiki
You have a default scheme, the one that is active on initial page load, and an alternative scheme coded in your stylesheets. The best practice is to associate the active scheme with the user's preferences of 3 possible levels.
Scheme preferences by priority:
- Website (local),
- Browser application,
- Operating System (global).
These options are so common that we confuse these options as what scheme is all about. But the scheme feature can also manage accessibility issues like contrasting colors tones VS harmonious tones of analogous colors.
Common design practice is to combine « Color palette » and « Accessibility contrast » requirements to reduce the options to the common Light VS Dark scheme.
Design hooks Light contrasted scheme Dark analogous scheme Background color High Lightness% Low-to-Medium Lightness% Text color Black, or Low-to-Medium Lightness% High Lightness% UI color palette High Saturation% Medium-to-Low Saturation% HSL (Hue, Saturation%, Lightness%) color model as reference. Example:
Red text={ color: hsl( 0, 100%, 50%) }
Too much contrast is like not enough! It is important to be aware that a choice of color that is too contrasting, creating a visual stress, is not automatically desired by people living with visual impairment.
For example the people living with the « Meares-Irlen Syndrome » experience headaches and discomfort when looking at interfaces with too much color contrast.
| Visual impair illness | Accessibility requirement | Ilness description |
|---|---|---|
| Cataracts | High contrast | Can cause blurred or hazy vision, making text difficult to distinguish from the background. High contrast is especially important for advanced cataracts |
| Diabetic Retinopathy | High contrast | Damages blood vessels in the retina, affecting overall vision clarity and contrast |
| Glaucoma | High contrast | Can lead to peripheral vision loss and reduced contrast sensitivity |
| Irlen Syndrome | Low contrast | Experience headaches and discomfort when looking at interfaces with too much color contrast |
| Macular Degeneration | High contrast | Affects central vision, making it hard to detect fine details and subtle contrasts |
| Retinitis Pigmentosa Stargardt Disease |
High contrast | Inherited retinal disorders that can cause reduced contrast sensitivity |
For your browser's tab icon to keep readability on any scheme user's have set you can integrate media attribute on the <link rel="icon" href="…" />
<head>
…
<link rel="icon" media="(prefers-color-scheme: dark)" href="/img/logo/favicon-dark.icon" />
<link rel="icon" media="(prefers-color-scheme: light)" href="/img/logo/favicon-light.icon" />
</head>