Accessible Colour Combinations for Websites

Use a palette as a system, not five interchangeable swatches. These selections each contain a specific pair suitable for body copy or a clear control, alongside colours for hierarchy. Verify every real component, including hover, disabled and error states, because a passing pair does not make an entire palette accessible.

Build the dark surface first

Dark interfaces need a quiet surface and bright reading colour before they need a lively accent. Midnight SaaS pairs #F8FAFC text with #0F172A at 17.06:1; Ocean Depth pairs #CAF0F8 with #0C1222 at 15.40:1. Use the pale shade for body copy, then reserve #3B82F6 or #00B4D8 for links, icons and focus treatment. Deadline Tomorrow offers #C9D1D9 on #0D1117 at 12.26:1, with #F97316 on the same dark ground at 6.75:1 for a compact action label. Keep the bright colours out of long paragraphs and do not rely on hue alone for status.

Let neutrals carry the reading load

On light surfaces, protect reading order with a dark neutral rather than asking a sunny or pastel brand colour to carry paragraphs. Nordic Frost uses #374151 on #FAFBFC at 9.95:1. Warm Terracotta gives #2C1810 on #FDF6EC at 15.72:1, while its #C2703E paired with #2C1810 reaches 4.56:1 for a label or button. Monochrome Luxe supplies #1A1A1A on #FAFAFA at 16.67:1. Use the colour accent for emphasis, not body text; a dark label on an accent-filled button is often clearer than white type on a mid-tone accent.

Apply blue and orange as purposeful tokens

Blue and orange can direct attention without becoming the only signal. Santorini has #1B2A4A on white at 14.22:1, while Aperol Spritz puts #2C1810 on #FFF4E6 at 15.53:1 and #FF6B35 beside #2C1810 at 5.95:1. Pair status colour with a visible label or icon. These ratios exceed the 4.5:1 normal-text benchmark described by W3C: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html. Use tokens consistently: :root { --surface: #0F172A; --text: #F8FAFC; --link: #3B82F6; } Here, surface and text form the verified reading pair; check the link in every state and context. Aperol Spritz is editorial inspiration, not an official brand palette or endorsement.

Palettes to explore

Midnight SaaS: #0F172A, #1E293B, #3B82F6, #10B981, #F8FAFC
Warm Terracotta: #FDF6EC, #C2703E, #8B5E3C, #2C1810, #D4A574
Nordic Frost: #FAFBFC, #E5E7EB, #374151, #6366F1, #9CA3AF
Ocean Depth: #0C1222, #1E3A5F, #00B4D8, #90E0EF, #CAF0F8
Santorini: #FFFFFF, #0047AB, #5BA3D9, #1B2A4A, #2C2C2C
Deadline Tomorrow: #0D1117, #58A6FF, #F97316, #238636, #C9D1D9
Monochrome Luxe: #FAFAFA, #1A1A1A, #4A4A4A, #C9A96E, #8A8A8A
Aperol Spritz: #FF6B35, #FFF4E6, #FFD700, #F4845F, #2C1810

Practical guides

Try the free colour tools