When you are designing a user interface, dark mode is a must-have!
Offering a sleek alternative to the traditional bright, light-colored theme is standard in the industry.
However, the effectiveness of your dark mode will largely depend on maintaining optimal dark mode contrast and color contrast to ensure readability and accessibility. So how can one make sure to create a dark mode that follows the WCAG standards for readability and accessibility?
First of all: What is Dark Mode?
Some of you might say: "What is this silly question? Everyone knows what dark mode is!". Even though you are most likely right about that, I want this article to be aimed at everyone, even those living in a cave who don't know what dark mode is.
Simply put, Dark Mode reverses the usual color scheme of text and background, using light-colored text on a dark background. Dark mode has become a popular choice, especially among developers for several reasons, such as eye strain reduction, reduced blue light Exposure, battery efficiency, or even aesthetics and Focus.
But not all dark modes are created equal: to achieve the best possible experience, it's important to choose the right dark mode color combinations for optimum contrast.
The Importance of Color Contrast
Color contrast refers to the difference in color that makes an object (e.g., text) distinguishable from other objects within the same field of view. In dark mode, optimal contrast will help prevent eye strain and make the content accessible to users with visual impairments.
The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. These guidelines help ensure that text is perceivable by users who have color vision deficiencies. So how do make sure your color combination follows those contrast standards?
By using a Color Contrast Checker!
I personally like Colorlab, which offer many different tool to works with colors. And the one that interest us here is the contrast checker, which lets you immediately visualise how your color combination looks and it gives you a clear understanding of your contrast level and wether you match both AA & AAA standards.
How do you make Dark Mode look good?
To make dark mode look good, use a true black (#000000) - although I'm not personally a huge fan - or a very dark gray background (#121212) to reduce eye strain and save battery life on OLED screens. Ensure text is a light gray (#E0E0E0) or off-white (#FAFAFA) for readability without harsh contrast. Accent colors should be chosen to stand out against the dark background while remaining easy on the eyes, often with slightly desaturated tones. Maintain sufficient contrast for all elements, and use shadows subtly to add depth and separation. Test across different devices to ensure a consistent and visually appealing experience.
With all this being said, what are the Dark Mode combinations I would recommend? See below my curated list of Dark Mode:
Variant 1
Background: #212121
Font: #E8E8E8
Variant 2
Background: #333333
Font: #F5F5F5
Variant 3
(this one is a bit more funky and might not fit all moods)
Background: #80DEEA
Font: #1B2B34
Variant 4
Background: #E5E0EB
Font: #1C1414
Of course, these are only my preferences and you might choose your own. Choosing the right dark mode colors is essential for creating a functional and visually appealing dark theme and in the end, all that matters is that you like the result!
Top comments (0)