How to Check Text and Background Contrast for a Dark Theme

What this guide covers

Dark themes look calm in a screenshot and can be hard to read in real life. The usual culprits are grey text on a dark grey background, accent colours that vibrate and placeholder text that nobody can see. The fix is to measure contrast instead of trusting your eyes on one monitor.

The Contrast Checker takes a text colour and a background colour, calculates the contrast ratio and compares it with the WCAG AA and AAA levels, with a live preview next to the numbers. This guide shows how to use it, and what the results mean for your design.

Step by step

1. 1

   Set the colours

   Enter HEX values or use the colour pickers for the text and the background. Presets load common dark-friendly pairs, and the ratio updates as you type.

2. 2

   Read the ratio

   Check the number and the AA and AAA badges for normal and large text. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1.

3. 3

   Look at the live preview

   Headings, body text, large text, a link and a button are drawn with your pair, so you can judge readability and not only the number.

4. 4

   Apply a suggestion or tune by hand

   When the pair fails, the checker suggests a stronger one that keeps either your text colour or your background. Use Swap to try the inverse roles.

5. 5

   Copy the result

   Copy the pair for your CSS, save pairs on this device or download a JSON report.

Choosing targets that work

The minimum for normal body text is 4.5:1 and for large text 3:1. Those numbers are a floor, not a goal. For long reading on a dark page, a pair somewhere between 10:1 and 15:1 is sharp without glowing, while pure white on pure black is harsher than it needs to be.

Test colours in the role they will play. An amber that reads well as text may be too light behind a white button label, and a muted grey that is fine for a caption may be too faint for a form label. If you want the thinking behind these numbers, our article on contrast in dark themes goes through them with examples.

Tips

• Aim for body text well above the minimum. Around 10:1 to 15:1 is sharp without glowing.
• Test accent colours as text and as button backgrounds separately.
• Our article on contrast in dark themes explains the numbers in more detail.

Good to know

• The fields expect HEX. Convert RGB or HSL values in any design tool first.
• The checker covers solid colours, not the accessibility of a whole page.