ToolSahla, Tools Sahla

I added a dark mode to my site. Which greys and which brand colour can I use for text on the dark background?

Check every pair again, because a colour that passes on white can fail on near-black. Brand colour #0F6B5F gives 6.39:1 on white but only 2.93:1 on #121212. Grey #9E9E9E gives 6.99:1 on the dark background and works for secondary text, and the tool can suggest a lighter version of your brand colour that passes in dark mode.

Published · 3 min read

Why colours do not carry over between modes

The ratio compares the lightness of the text with the lightness of the background. Light mode needs dark text; dark mode needs light text. A deep colour that stands out on white sinks once the background turns dark, because the lightness gap between them disappears. That is why flipping the background and leaving the text colours alone is not enough.

Brand colour: from pass to fail

  • #0F6B5F on #FFFFFF: 6.39:1, a pass for AA normal text.
  • #0F6B5F on #121212: 2.93:1, failing even the UI components check.
  • #0F6B5F on #1E1E1E: 2.61:1, worse on the dark grey often used for cards.

The fix is not to drop the brand colour but to use a lighter version of it in dark mode. In the Color contrast checker, type #0F6B5F in 'Text color' and #121212 in 'Background color', then choose the 4.5:1 target. The usual situation flips: 'Nearest darker color' reports that even pure black does not reach the target, while 'Nearest lighter color' shows #3F897F at 4.55:1.

Note that #3F897F on white gives 4.12:1 and fails for normal text. So you really need two shades: #0F6B5F for light mode and #3F897F for dark mode, each checked against its own background.

Greys for text on a dark background

  • White #FFFFFF on #121212: 18.73:1. Passes every level, though some designers find it harsh for long paragraphs.
  • #B3B3B3 on #121212: 8.93:1, passing AAA for normal text, a good choice for main text.
  • #9E9E9E on #121212: 6.99:1, passing AA for normal text and just missing AAA, suited to secondary text.
  • #757575 on #121212: 4.07:1, a fail for normal text even though it looks readable.
  • #616161 on #121212: 3.02:1, and at the 4.5:1 target the tool suggests #7D7D7D at 4.55:1 instead.

And do not carry dark mode greys back into light mode: the same #9E9E9E on white gives 2.68:1 and fails.

An organised way to do it

  1. List every text colour on your site: main, secondary, links, prices and input borders.
  2. If your colours come from a brand image, extract them first with the Image palette extractor.
  3. Check each colour twice: once on the light mode background and once on the dark one.
  4. For colours that fail in dark mode, use 'Nearest lighter color', then copy the report or download it as a text file to record the values.

The tool checks solid colours only. If you use shadows or gradients behind text in dark mode, check the lightest point of them. And passing the ratio does not mean the dark mode is fully accessible; it means its text colours are readable by the WCAG 2 measure.

Common questions

Why is there no darker suggestion on a dark background?

Darkening text on a dark background lowers the contrast. Lightening is the only way, so the tool reports that even pure black cannot reach the target.

Should I use pure black #000000 as the background?

That is a design decision. Ratios on #000000 are a little higher than on #121212, but check your colours against the background you will actually use.

Does the tool check dark mode automatically?

No. It compares two colours you enter. Check each pair yourself; 'Swap colors' helps for quick comparisons.