Skip to content

Is dark mode more accessible than light mode?

Dark mode has evolved from a trend in the 2010s to a standard in the 2020s. Is it more or less accessible than the standard "light mode"?

What does WCAG say about text contrast?

There are two WCAG success criteria that correspond with text contrast.

SC 1.4.3 Contrast (Minimum) is a Level AA success criteria that recommends a contrast level of 3:1 for normal text, and 4.5:1 for large text. This roughly covers individuals with vision loss equivalent to approximately 20/40 vision.

SC 1.4.6 Contrast (Enhanced) is a Level AAA success criteria that recommends a contrast level of 4.5:1 for normal text, and 7:1 for large text. This roughly covers individuals with vision loss equivalent to approximately 20/80 vision.

People with more than these degrees of vision loss generally use assistive technologies to access their content, and these technologies generally have built in contrast enhancing and magnification.

Windows High Contrast Mode (WHCM)

Windows offers some high contrast themes at the operating system level. Some of these themes use black backgrounds like dark mode, but they allow for some level of customization by the user to change colors to fit their preferences. These high contrast themes generally just work out-of-the-box, without us having to do any special coding -- but there is a way for us to make adjustments to anything that looks off.

WHCM is notably not covered by WCAG.

How about dark mode?

Dark mode is a bit different than WHCM in that it does require some custom coding to work. It is not something that just works out of the box -- it needs to be coded for.

In the Nielsen Norman Group's "Dark Mode", the authors report that some people with low vision prefer dark mode.

Dark mode is also used by some phones in "battery saving" modes, and users without disabilities also generally prefer it some times.

Coding for dark mode follows the Inclusive Design Principle "Offer Choice".

If a website has a dark mode, how would users switch to it?

There is usually an operating system level setting for switching applications to dark mode. It's a best practice to respect that preference as a default.

It can be dangerous to make the presumption that the user wants a website to be in dark mode too just because their operating system preference is dark mode, so it's also generally a best practice to add a dark/light switch to give the users a choice.

Is dark mode covered by WCAG?

No, it is not.

WCAG only cares about text contrast. Whether it is achieved by showing dark colors on light backgrounds (like a light mode), or the opposite (like a dark mode) does not matter.