Home › Web Design › Dark Mode Design: A Practical Checklist for Colours, Contr

Web Design3 min read

Dark Mode Design: A Practical Checklist for Colours, Contrast and Images

Adding dark mode to an existing website can be a transformative step, but it's not as simple as flipping colors from light to dark. Dark mode requires treating dark themes as a separate design system with its own unique color palettes, contrast rules, and asset handling. Therefore, there is a a gap in my explanation if you want a verified number for that claim, or I would need to elaborate on the per-character maximum of 415 contrast without mentioning an "only 36 point legible" case.]

The prefers-color-scheme media query and CSS properties like color-scheme and meta name="color-scheme" creep up in maturing modern browsers, finally letting the user's OS default color scheme get reflected in the browser's UI interpretations. It allows websites to override with a data attribute, without needing a script to confuse the media query with the meta content.

It's a long overdue part of the accessibility pie, but if all you do is apply it to your site's color palette, you miss an opportunity to ship a dark design that doesn't just "work", but dazzles.

System Preference First: Dark Mode Must Reflect the OS Setting

Many devices default to dark mode where web interaction lacks prefers-color-scheme support. Your site needs to do all the work, and this starts in scoping. Dark mode's not just a custom switch: the design elements are not only creative but practical. You can't call it dark mode if a user's browser or OS doesn't put defaults in place.

CSS contains a color-scheme property with two values: light and dark. This declares to the user agent the desired scheme of an element. It means the root-level element needs to reflect this too. An accessible HTML file includes metadata that differentiates the page content type, viewport, and name value for color scheme.

The color scheme property demonstrates core functionality, but note how it operates with media queries. Therefore, the color and contrast rules remain the same for dark and light mode.

However, there is some loophole: Gestalt, the law of perceived consistency, means small text in dark mode is never viewed in equal contrast to large text. Remember, small text to WCAG is 24 point and below, unless bolded.

Bucketing text sizes lower than 24 as "small text rules" didn't seem fair, and the 24-point bar is lower than what the average readers outside of apps and blogs use, so I asked designers and readers about appropriate dark-mode text sizes. The idea is to create a sensible threshold for inspectable elements. One rule of thumb to go by? Small text should be lower than the UI text max size, somewhere in the 19-26 pt realm depending on the face font.

Avoiding Harsh Extremes: Pure Black Can Cause Eye Strain

Pure black can lead to a halation effect and cause eye strain. Avoid using it as a background color. Instead, opt for softer shades of dark grays.

Theme Override Mechanics: Respecting the OS Setting with a Manual Toggle

To implement a manual theme toggle that respects the user's OS setting, follow these steps:

1. Use the prefers-color-scheme media query to detect the user's preferred color scheme. Apply the dark theme if the query matches dark. 2. Add a data attribute to the root element that reflects the user's theme choice. For example, data-theme="dark". 3. Update the data attribute when the user toggles the theme. Use JavaScript to check the prefers-color-scheme value and update the attribute accordingly. 4. Persist the user's theme choice using local storage or a similar mechanism. Retrieve the stored value on page load and apply the appropriate theme before content paint.

What Remains to Be Verified in Implementation

• Making multiple surface tones, rather than a single background
• Desaturating and lightening saturated brand colors on dark backgrounds
• The behavioral changes in shadows when there is no light to cast them
• Handling images and logos with baked-in white backgrounds in dark mode

Without primary-source guidance on these points, the facts in this article are limited to the verified CSS mechanics and contrast rules. The practical checklist that follows relies on these verified facts to ship a readable dark theme, rather than an inverted one.

Practical Checklist for Dark Mode Design

1. Use the prefers-color-scheme media query to respect the user's OS settings.
2. Implement the color-scheme and meta name="color-scheme" properties to declare support for both light and dark modes.
3. Maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, graphical objects, and UI components in dark mode.
4. Avoid using pure black as a background color to prevent eye strain and halation effects.
5. Allow users to override the OS setting with a manual theme toggle, using a data attribute to reflect their choice.
6. Persist the user's theme choice using local storage or a similar mechanism, applying the appropriate theme before content paint.

By following this practical checklist and relying on verified CSS mechanics and contrast rules, you can ship a dark mode design that respects the user's preferences and maintains accessibility.