Dark Mode and Accessible Colour Palettes, Done Right

Contrast ratio measures the relative brightness difference between text colour and background colour; 1:1 means no difference at all, 21:1 is as sharp as black on white. The WCAG standard treats 4.5:1 as the minimum for normal text, and 3:1 for large text (18pt bold or larger, or 24pt regular) (W3C WCAG 2.1).

There is no need to calculate this by hand; the contrast checker in browser developer tools, or any of the free online tools, gives an instant ratio once the colours are entered. A dark grey background with medium-grey text is a common mistake on a generator manufacturer's dark theme; the ratio usually lands below 3:1, and readability drops with it.

A brand colour that looks vivid on a light background can look dull or, just as often, glaringly bright on a dark one; the same value does not feel the same on both. This is why dark mode needs its own variant of the brand colour, not a straight copy of the same code.

A sports club's red brand colour that reads clearly on white can look like a neon sign on black and tire the eye; a version with slightly reduced saturation keeps the brand recognisable without the strain.

Dark mode does not end at background and text colour; shadows, borders, icons and the backgrounds behind images all need a second look. A card separated by a subtle shadow on a light background can disappear entirely on a dark one; a thin border does the job the shadow was doing.

Images are a separate issue: a product photo on a white background can sit like an awkward white box on a dark page; the fix is either a version with a transparent background, or a soft frame added around it.

Before anything ships, every text-and-background pairing needs its own contrast check, and functional elements such as buttons, form labels and error messages should not get skipped. If a form's error message is a low-contrast red, a visitor can miss it entirely and resubmit the form more than once without knowing why.

• Every text/background pair run through a contrast checker
• A separate dark-mode variant defined for the brand colour
• Images and icons checked separately in both modes
• Automatic switching by system preference (prefers-color-scheme) tested

Not every site needs it; but for an audience using a technical product (software, an app, a dashboard) expectations run high. A brochure site can leave dark mode as a lower priority, in which case the effort is better spent getting the light-mode contrast ratio right, since accessibility is not a dark-mode-only concern.

Marking an invalid field with red alone can mean nothing to a visitor with colour blindness; a meaningful share of the population has some form of red-green colour blindness. Colour should always be backed up by an icon or by text, never carry the message on its own.

If a stock indicator shows 'in stock' in green and 'sold out' in red with no accompanying label, that information never reaches some visitors at all; adding a small icon or a short text tag stops colour from being the only signal doing the work.

Once a visitor switches from dark mode to light mode by hand, that choice should carry over to their next visit; reverting to the system preference on every page load is an easy way to irritate a visitor. The preference sits in the browser's local storage and gets read back each time the page loads.

Skip that on a game studio's site and a visitor has to redo the same setting on every visit; a small technical detail, but a recurring point of friction all the same.

Rather than relying on local storage alone, the setting can also live as an account preference on the server; for a signed-in visitor, that carries the choice across different devices too.