Keeptab DarkWhat contrast works best in dark mode?
Published
In short: Text needs a contrast ratio of at least 4.5:1 with its background, or 3:1 for large text, under the W3C's accessibility guidelines.[1] That rule doesn't change in dark mode. But more isn't always better: Google's own guidance avoids pure white on dark backgrounds to prevent a glowing, bleeding effect.[2][3]
Switch a page to dark mode the lazy way, white text on black, and you get maximum contrast. It also tends to look like a neon sign at 2 a.m. Good dark themes aim for something more careful: enough contrast to read, not so much that the letters shimmer.
The minimum: 4.5:1, in any theme
The Web Content Accessibility Guidelines set the bar. Text should have a contrast ratio of at least 4.5:1 with its background. Large text, meaning 18 point or 14 point bold, can go down to 3:1.[1]
Contrast ratios run from 1:1 (no difference at all) to 21:1 (black on white).[1] The calculation is based on light and dark, and color (hue) is not a key factor.[1] So the rule is the same whether the page is light or dark: gray text on a dark gray background has to clear the same bar as gray text on white.
The W3C also says these ratios are thresholds, not rounded estimates: 4.499:1 does not pass.[1] Designers do get strict about it.
Why designers avoid pure white on dark
If minimum contrast is the floor, is the ceiling 21:1? In dark mode, usually not. Google's web.dev guide on dark themes says it avoids pure white, choosing a slightly darker white to prevent glowing and bleeding against the surrounding dark content. Something like rgb(250, 250, 250).[2]
Android follows the same idea. Its main text color is described as near-black in light theme and near-white in dark themes.[3] Near, not pure.
Our reading: very bright text on a very dark background can feel harsher than the numbers suggest, especially on a bright screen in a dark room. Softening the white a little keeps contrast high while taking the edge off.
Images need care too
Text isn't the only thing that changes. The author of the web.dev guide reports that, in their own user research, most people surveyed preferred slightly less vibrant and brilliant images when dark mode is on.[2] A full-brightness photo in the middle of a dark page can feel like a flashlight.
What this means for you
- Too little contrast is the bigger risk. A dark gray background with mid-gray text may look stylish and still fail the 4.5:1 minimum.[1]
- Pure black and pure white aren't required. A dark gray with near-white text can read comfortably.[2][3]
- Dark mode isn't automatically easier on your eyes. We look at what the evidence says in is dark mode better for your eyes?
Docs, Sheets and Slides in real dark mode. Keeptab Dark turns the whole Google Docs, Sheets, Slides and Excel page dark. Images keep their colors, and there is no white flash. Alt+Shift+D turns it on or off.
Add to Chrome — it's freeReadable dark documents, not just dark ones
Keeptab Dark is our Chrome extension that darkens the page itself in Google Docs, Sheets, Slides and Excel for the web.[4] Its free theme is Soft gray, not pure black, and Sheets and Excel gridlines stay readable.[4] Images keep their real colors, and Pro adds softer images for late-night reading.[4]
FAQ
What is the minimum contrast ratio for text?
Under WCAG, at least 4.5:1 between text and its background, or 3:1 for large text (18 point, or 14 point bold). The same rule applies in light and dark themes.
Should dark mode use pure white text on pure black?
It doesn't have to. Google's web.dev guidance avoids pure white on dark backgrounds to prevent a glowing, bleeding effect, and Android uses near-white text in dark themes.
Does color affect the contrast ratio?
Not much. The W3C calculates contrast from relative luminance, so hue is not a key factor. What matters is how light the text is compared to the background.
Sources
- W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- web.dev (Google). prefers-color-scheme: Hello darkness, my old friend. https://web.dev/articles/prefers-color-scheme
- Android Developers. Implement dark theme. https://developer.android.com/develop/ui/views/theming/darktheme
- Keeptab Dark. Dark mode for Google Docs, Sheets, Slides and Excel. https://keep-tab.com/dark/
Docs, Sheets and Slides in real dark mode
Keeptab Dark turns the whole Google Docs, Sheets, Slides and Excel page dark. Images keep their colors, and there is no white flash. Alt+Shift+D turns it on or off.
Add to Chrome — it's free