Dark Mode Text Contrast Guidelines

Q: Dark Mode Text Contrast Guidelines

## Dark Mode Accessibility Dark mode has become standard in modern web applications, but it introduces unique contrast challenges. The same color that works well on a white background may fail on a dark background, and vice versa. ### Dark Background Colors and Text Pairs css /* Common dark backgrounds with accessible text */ /* Tailwind zinc-900 background */ background: #18181b; color: #fafafa; /* zinc-50: 18.42:1 - Passes AAA */ color: #e4e4e7; /* zinc-200: 13.48:1 - Passes AAA */ color:

Ensure text in dark mode themes meets WCAG contrast requirements. Learn which text colors work on dark backgrounds and common dark mode accessibility pitfalls.

Dark Mode

Detailed Explanation

Dark Mode Accessibility

Dark mode has become standard in modern web applications, but it introduces unique contrast challenges. The same color that works well on a white background may fail on a dark background, and vice versa.

Dark Background Colors and Text Pairs

/* Common dark backgrounds with accessible text */
/* Tailwind zinc-900 background */
background: #18181b;
color: #fafafa;  /* zinc-50: 18.42:1 - Passes AAA */
color: #e4e4e7;  /* zinc-200: 13.48:1 - Passes AAA */
color: #a1a1aa;  /* zinc-400: 6.48:1 - Passes AA, fails AAA */
color: #71717a;  /* zinc-500: 3.76:1 - Fails AA normal */

/* Tailwind slate-900 background */
background: #0f172a;
color: #f8fafc;  /* slate-50: 18.31:1 - Passes AAA */
color: #94a3b8;  /* slate-400: 6.48:1 - Passes AA */
color: #64748b;  /* slate-500: 3.83:1 - Fails AA normal */

Common Dark Mode Mistakes

Using pure white text on pure black: While the contrast is 21:1 (maximum), this creates eye strain called "halation" where bright white text appears to bleed into the dark background. Use off-white (#e4e4e7) on dark gray (#18181b) instead.
Reusing light-mode grays: A gray that provides good secondary text contrast on white (like #6b7280) may fail completely on a dark background.
Colored text on dark backgrounds: Saturated colors like bright red or green may appear vibrant but fail contrast checks.

Recommended Approach

Purpose	Light Mode	Dark Mode
Primary text	`#18181b` on `#ffffff`	`#fafafa` on `#18181b`
Secondary text	`#71717a` on `#ffffff`	`#a1a1aa` on `#18181b`
Disabled text	`#a1a1aa` on `#ffffff`	`#52525b` on `#18181b`

Testing Both Modes

Always check contrast ratios for both light and dark mode. A design token system helps maintain accessible contrast across themes by mapping semantic color names (e.g., --text-primary) to different values per theme.

Use Case

Reference this guide when implementing dark mode themes. Test every text color against your dark background and update any colors that fall below the 4.5:1 threshold for normal text or 3:1 for large text.

Try It — Accessibility Color Checker

Open full tool →