ScalePlantScalePlant
All posts
2026-01-20

Dark mode and accessibility

Contrast, focus states and the other details that make premium websites with dark mode still fail WCAG accessibility checks.

Contrast drops first

Most dark themes are made by flipping colours, and the grey text that read fine on white becomes too faint on near-black. WCAG asks for a contrast ratio of at least 4.5 to 1 for body text. Pure white on pure black passes but causes glare, so we use soft off-white on deep grey and check every pair of colours with a contrast tool.

Focus states disappear

Keyboard users need to see where they are on the page. A blue focus ring that works on a light background can vanish on a dark one. Each theme needs its own focus colour, tested by tabbing through every form and menu.

Images and logos cause the same trouble: a dark logo on a dark header simply disappears, so each theme needs its own version or a light backing.

How we test it

We run automated checks with Lighthouse and axe on both themes, then do a manual pass with the keyboard and a screen reader. It takes an hour per page template and catches the problems that cost you customers and search rankings. Our free website checker covers the basics if you want to see where your site stands.

Want to know where your business loses time?

A free audit finds the leaks and puts a number on each one. Or check your website in one minute.

Message us on WhatsApp