Test Dark Mode Color Palettes

Light text on dark backgrounds can still fail contrast — check your dark mode palette pairings here.

Nid oes angen mewngofnodi

Text color

Background color

Large heading text

Medium body text (18px) for reading and content.

Normal body text (16px) for paragraphs.

Small body text (14px) for captions and metadata.

14.63:1

Contrast ratio

✓WCAG AA — Normal text

Requires 4.5:1 · You have 14.63:1

✓WCAG AA — Large text

Requires 3.0:1 · You have 14.63:1

✓WCAG AAA — Normal text

Requires 7.0:1 · You have 14.63:1

✓WCAG AAA — Large text

Requires 4.5:1 · You have 14.63:1

✓UI components / graphical objects

Requires 3.0:1 · You have 14.63:1

Quick presets

Based on WCAG 2.1 contrast guidelines. Large text = 18pt (24px) normal or 14pt (18.66px) bold. Hex codes update in both directions: type a hex or pick a color, both inputs stay in sync.

Dark Mode tips

🌙

Pure white (#ffffff) on pure black (#000000) gives 21:1 — too harsh. Slate-200 (#e2e8f0) on slate-900 (#0f172a) gives 13.1:1, easier on the eyes and still AAA compliant.

💡

Common dark mode mistake: gray-on-gray. Light gray text on dark gray background looks "stylish" but often fails AA (try #94a3b8 on #1e293b — only 4.1:1).

🎯

Accent colors that work on light backgrounds often fail on dark. Test brand accents against your dark surface color before shipping.