Journal · Using color 02
Choosing text colors that stay readable on dark backgrounds
A deep green or navy background sets a mood on its own. But pick the wrong text color and you end up with a page that looks beautiful yet is hard to read. Readability isn't a matter of feeling. You can check it with a number called the contrast ratio.
The readability guideline
The most widely used guideline for readability on the web is WCAG (Web Content Accessibility Guidelines). For the contrast between text and its background, it asks for at least 4.5:1 for normal text and at least 3:1 for large text.
Large text here means 18 points or larger, or 14 points or larger in bold. On a web screen, that is roughly 24 pixels or larger, or about 18.5 pixels or larger in bold.
Checking with Midnight Fern
With the darkest color, #0A1412, as the background, here are the candidates for text.
#DCEBE6 Deep in the night forest, light lingers on the ferns.15.2 : 1
#8FB8AE Deep in the night forest, light lingers on the ferns.8.6 : 1
#4D7B73 For headings3.9 : 1
The lightest color, #DCEBE6, reaches 15.2:1 and is easy to read at any text size. The slightly tinted #8FB8AE still reaches 8.6:1, so it works for body text while keeping a calm mood.
The middle tone #4D7B73 is 3.9:1. That isn't enough for body text, so keep it for large headings, or for lines and details that carry no text.
Checking with Arctic Harbor
This time the background is the navy #16314A.
#E8EFF3 Morning comes quietly to the frozen harbor.11.5 : 1
#A9BDC9 Morning comes quietly to the frozen harbor.6.9 : 1
#5F7F98 For headings3.2 : 1
#E8EFF3 reaches 11.5:1 and #A9BDC9 reaches 6.9:1, so both work for body text. #5F7F98 is 3.2:1, which only just meets the guideline for large text. If you use it for headings, give them some extra size or weight to be safe.
How to choose
- For body text, use the lightest color or the one next to it. The two lightest of the six colors clear the guideline by a wide margin, even on a dark background.
- Give the middle tones roles other than text. Use them for lines, icons and photo borders, places that add mood without needing to be read.
- When in doubt, check the numbers. On every palette page on COLOR JOURNEY, choosing a key color shows its contrast ratio with the text.
Try it
Open the Midnight Fern page and tap the darkest color. A readable text color is chosen automatically for the dark background, and the contrast ratio is shown.
Reference: Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C). Contrast ratios are calculated with the WCAG 2.2 formula.