Looking back on the history of dark mode, anyone can see it has come a long way from the old cathode-ray tube (CRT) monitors that displayed green text on a black background. It has evolved over time, driven by both practical considerations and user preferences and has become a standard feature in many modern operating systems and applications.
As the demand for dark mode continues to rise, it's imperative that designers carefully consider the accessibility requirements for each unique element of this design choice.
This article explores color, color contrast, and the Web Content Accessibility Guidelines, WCAG, that you must consider to create an accessible dark mode interface.
Color
Creating dark mode is not just placing white text on a black background—quite the contrary. Carefully crafted accessible dark mode requires your color choices to be thoughtful and deliberate and take into consideration your brand and the relationship between background and surface colors.
Let’s start with your color palette. Ondřej Pešička, the author of How to create the best UI color palette, provides the following parameters:
Good looking color palette
- Matches the taste of our users
- Evokes the feelings and emotions we need
- Fits into the brand
- Passes accessibility standards
Every color palette starts with base colors
- Primary or Brand colors - first colors to decide on, used for actions and getting user attention.
- Semantic or Status colors - used to help convey meaning, i.e., red=stop, green=go. But remember that WCAG will still require more than just color to convey meaning per this standard - A11Y Check: Understanding SC 1.4.1: Use of Color (Level A) - Do not use color alone to convey meaning.
- Neutrals - text, background, buttons, and secondary links.
Now for some best practices for using those colors:
- Avoid saturated colors - saturation is the level of intensity of a color. Saturated colors are usually bright and can be harsh on the eye. Saturated colors are more likely to fail the WCAG color contrast ratio criteria for minimum contrast. Here is the specific criteria: A11Y Check: 1.4.3 Contrast (Minimum) (Level AA) - Text and images of text have a contrast ratio of at least 4.5:1.
high saturation low saturation - Avoid pure black and pure white - Pure black (hex #000000) is very high contrast and can cause eye strain, reduce legibility, and have a "halation effect." Choose softer shades of black or dark grays, and make sure the contrast ratio is 4.5:1 to meet WCAG 1.4.3.
Like pure black, pure white (hex #ffffff) can exhibit very high contrast when used in a dark interface, leading to similar visual challenges for the user.
Contrast
When designing for dark mode, pay particular attention to text contrast. The appropriate level of contrast for text to be accessible is 4.5:1 for normal text, and for large text (18 point and above or 14 point bold and above), the ratio is 3:1.
Interface components such as buttons, input fields, navigation components, progress bars, etc., are another design consideration where proper contrast is critical. WCAG gives you a specific criterion to help you ensure proper contrast - A11Y Check: 1.4.11: Non-text Contrast (Level AA) - User interface components and meaningful graphical objects have a contrast ratio of at least 3:1 against adjacent color(s).
Input, navigational, and informational components must be perceivable by people with low vision or other visual impairments. In addition, “if a graphic is needed to understand the content or functionality,” the contrast should meet the requirements stated in WCAG 1.4.11.
Other WCAG criteria to consider:
- Focus indicators
Keyboard focus refers to the active or highlighted area on a digital interface, such as a computer screen or mobile device, where user input from the keyboard is expected. For example, when a specific element, like a text field, has keyboard focus, keyboard input, such as typing, will be applied to that element. Only one element at a time can have keyboard focus.
This WCAG success criterion details techniques to help ensure focus indicators in black mode are visible. A11Y Check: 2.4.7 Focus Visible (Level AA) - Keyboard focus indicator must be visible. - Target size
Target size refers to the dimensions of interactive elements such as buttons, icons, or touch targets within a user interface. It is a critical consideration in interface design, as it directly impacts the usability and accessibility of the interface.
This WCAG success criterion details techniques that can help ensure target size is appropriate and easy to use. A11Y Check: 2.5.8 Target Size (Minimum) (Level AA) - Targets can be easily activated without accidentally activating an adjacent target.
Conclusion
And finally, remember to prioritize user preferences by offering a choice between light and dark modes and ensure your dark mode design aligns with your brand's identity. Consistency, readability, accessibility, and careful consideration of color choices are key factors to consider throughout the design process.
Designing an app in dark mode is more than just a trend; it's a user-centric approach that can significantly enhance the user experience. By applying these best practices and the techniques discussed in the resources listed below, you can create an app that looks great and delivers an exceptional and accessible user experience, whether in light or dark mode.
Resources
- 13 Principles of Dark Mode Design
- Dark mode UI design – 7 best practices
- How to Design Accessible Dark Mode Interfaces
- Web Content Accessibility Guidelines, WCAG, 2.1
- Dark Mode: How Users Think About It and Issues to Avoid
- Understanding Web Accessibility Color Contrast Guidelines and Ratios
- A Brief History of “Dark Mode”—From the Matrix-like Displays of the Early ’80s to Today
