Dark Mode Palettes That Stay Accessible (And the Mistakes Most Sites Make)

Dark mode is everywhere — and most implementations break accessibility. Here's how to design dark palettes that pass WCAG, reduce eye strain, and don't make your brand colors look radioactive.

Dark mode looks easy. Invert the background to black, lighten the text to white, ship it. The result is almost always wrong — pure black backgrounds cause halation, pure white text vibrates, brand accent colors that worked on white become eye-searing on dark, and contrast that read well in light mode collapses in dark. Designing dark mode is a separate discipline. Here's what consistently works.

Never Pure Black, Never Pure White

Pure black (#000000) backgrounds and pure white (#FFFFFF) text in dark mode cause two problems: the contrast is so extreme that text edges shimmer (halation), and pure black makes any colored element look washed out. The fix: use very-dark-but-not-black for backgrounds (#0F172A, #111827, #18181B) and slightly-off-white for primary text (#F8FAFC, #F9FAFB, #FAFAFA). The contrast is still 16:1+ — well into AAA — but the visual experience is dramatically calmer. This single change is what separates "dark mode that looks designed" from "dark mode that gives you a headache."

Desaturate Your Brand Colors for Dark Mode

A bright saturated brand color (a vibrant orange, a hot pink, an electric blue) on a white background reads as energetic. The same color on a near-black background reads as glowing or neon — and is genuinely painful to look at for extended periods. The fix is to maintain a parallel dark-mode version of each brand color, desaturated by 15–30% and slightly lighter in lightness. Your CTA button isn't the same orange in dark mode as in light mode; it's a related-but-softer orange. The Palette Maker lets you generate these adjusted variants from your base brand color so the relationship stays consistent.

Contrast Rules Still Apply (And Often Tighter)

Every text/background pair in dark mode needs to be checked against WCAG independently from your light-mode pairs — they're a separate design system. Run dark-mode pairs through the contrast checker and aim for AAA on body text where possible. A dark-mode text color that passes AA at 5.2:1 may feel "thin" against the dark background, even though it technically complies. Bumping toward 7:1 (AAA) often improves perceived readability disproportionately in dark mode.

Build It as a Real System, Not a Toggle

The mistake most teams make is treating dark mode as a CSS variable swap layered on top of a light-mode design. The result is the issues above — wrong blacks, oversaturated brand colors, broken contrast. Build dark mode as its own design system: parallel background tones, parallel surface tones (for cards, modals, inputs), parallel brand color variants. Run the full dark palette through Palette Health to flag any pair that fails. Document both palettes in your Brand Kit so every designer and developer has the right values for the right mode.

Per-Surface Tuning: Cards, Modals, and Notifications

Production dark-mode systems don't use one background color — they use a small family of "elevated" surfaces that get progressively lighter as elements stack on top of the base background. The pattern that consistently works: base background at the darkest value (e.g. #0F172A), card surfaces one step lighter (#1E293B), modal surfaces another step lighter (#334155), notification toasts another step lighter again. This creates depth without using shadows, which often render poorly on dark backgrounds. Each surface needs its own contrast check against the text colors that will sit on it — body text that passes AAA on the base background may drop to AA on a modal surface, and dropdown menu items can fail entirely if you haven't tuned for them. Use the Palette Maker to generate the surface family from your base background color in consistent lightness steps, then validate every text-on-surface combination in the contrast checker before shipping the dark theme.

Handle Images, Icons, and Brand Assets in Dark Mode

Text and surfaces are the obvious dark-mode work — images and icons are where most teams quietly fail. Three patterns matter. (1) Logo files designed for white backgrounds often look broken on dark backgrounds — your logo needs a dark-mode variant (typically inverted, with adjusted accent colors). (2) Product photography shot on white sweep looks orphaned in dark mode — either crop the white background out, use product photos shot on neutral or dark backgrounds, or apply a subtle dark overlay. (3) Iconography that uses single fills works fine; iconography that uses multiple brand colors needs the dark-mode brand color variants you generated above. Document the dark-mode logo, image-handling rule, and icon variants in your Brand Kit alongside the dark palette — dark mode without these details ships with broken visual elements that undermine the work you put into the palette.

Extract a palette in seconds — no signup

Upload any image and ColorSense pulls 5 vibrant brand-ready colors with HEX, RGB, and HSL codes. Free, unlimited, no account required.

Open ColorSense →