What colour text goes on a background?
Last reviewed on 3 October 2026.
The question "what colour writing goes with this background?" has a measurable answer. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between text and background colours, from 1:1 (identical) to 21:1 (black on white). Readable text depends far more on that ratio — which is driven by the difference in lightness — than on which hues you pick.
The rule of thumb
- Dark background → light text. White or a light grey on black, charcoal, navy, dark red or any deep colour.
- Light background → dark text. Black or a near-black on white, pastels, yellow, light grey or cream.
- Mid-tone background → test it. Mid greys, pure reds, bright blues and greens sit near the middle of the lightness scale, where neither black nor white is guaranteed to pass. These are the backgrounds that cause most readability problems.
The thresholds that matter
| Level | Normal text | Large text* |
|---|---|---|
| WCAG AA (the usual target) | 4.5:1 | 3:1 |
| WCAG AAA (enhanced) | 7:1 | 4.5:1 |
*Large text means at least 18 pt (24 CSS px) regular, or 14 pt (about 18.7 CSS px) bold. Interface components and meaningful graphics need at least 3:1 against what surrounds them.
Contrast ratios for common background and text pairs
Each ratio below is calculated with the WCAG 2 relative-luminance formula for the exact hex values shown.
| Background | Text | Ratio | Passes |
|---|---|---|---|
ABlack #000000 | White #FFFFFF | 21.0:1 | AAA (all text) |
AMaterial dark surface #121212 | Light grey #E0E0E0 | 14.19:1 | AAA (all text) |
AMaterial dark surface #121212 | Mid grey #A0A0A0 | 7.16:1 | AAA (all text) |
ABlack #000000 | Dark grey #666666 | 3.66:1 | Large text only |
AWhite #FFFFFF | Near-black #111111 | 18.88:1 | AAA (all text) |
AWhite #FFFFFF | Grey #767676 | 4.54:1 | AA (all text) |
AWhite #FFFFFF | Light grey #999999 | 2.85:1 | Fails |
APure red #FF0000 | White #FFFFFF | 4.00:1 | Large text only |
APure red #FF0000 | Black #000000 | 5.25:1 | AA (all text) |
ACrimson #DC143C | White #FFFFFF | 4.99:1 | AA (all text) |
ADark red #8B0000 | White #FFFFFF | 10.01:1 | AAA (all text) |
AYellow #FACC15 | Black #000000 | 13.71:1 | AAA (all text) |
AYellow #FACC15 | White #FFFFFF | 1.53:1 | Fails |
AOrange #FF9800 | Black #000000 | 9.74:1 | AAA (all text) |
AOrange #FF9800 | White #FFFFFF | 2.16:1 | Fails |
AGreen #4CAF50 | Black #000000 | 7.56:1 | AAA (all text) |
AGreen #4CAF50 | White #FFFFFF | 2.78:1 | Fails |
ACyan #00BCD4 | Black #000000 | 9.14:1 | AAA (all text) |
ACyan #00BCD4 | White #FFFFFF | 2.30:1 | Fails |
ABlue #2563EB | White #FFFFFF | 5.17:1 | AA (all text) |
ANavy #1E3A8A | White #FFFFFF | 10.36:1 | AAA (all text) |
AMid grey #808080 | White #FFFFFF | 3.95:1 | Large text only |
AMid grey #808080 | Black #000000 | 5.32:1 | AA (all text) |
APastel pink #FFD1DC | Black #000000 | 15.41:1 | AAA (all text) |
APastel pink #FFD1DC | White #FFFFFF | 1.36:1 | Fails |
Two results surprise people. First, white on pure red (#FF0000) is only 4.0:1, so it fails AA for body text even though it looks bold; black on the same red actually scores higher. Darkening the red to crimson or below fixes it. Second, white on bright orange, yellow, cyan or light green fails badly — those hues are naturally light, so they need dark text.
Text on black and dark backgrounds
Pure white on pure black gives the maximum 21:1, but for long passages many readers find it harsh, and on some screens bright text on black appears to bleed or "halo". Common fixes are to soften one side: light grey text such as #E0E0E0 on near-black such as #121212 still scores above 14:1. Avoid going too far — dark grey text like #666666 on black drops to 3.66:1 and fails for body copy. The dark-mode guide covers surface colours in more detail.
Text on gradients, images and patterns
A contrast ratio assumes one flat background colour. On a gradient, photo or pattern, check the text against the lightest area behind it if the text is dark, or the darkest area if the text is light. Practical ways to keep text readable:
- Place a semi-transparent overlay between image and text, for example
linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55))layered above the image. - Put the text on a solid or frosted panel instead of directly on the image.
- Keep gradients behind text within a narrow lightness range so one text colour works across the whole span.
- Use low-contrast, low-density patterns — a minimal pattern rather than a busy one.
.hero {
background:
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
url("hero.webp") center / cover;
color: #ffffff;
}How to check any pair yourself
Browser developer tools show the contrast ratio when you inspect a text element (Chrome and Edge in the colour picker, Firefox in the Accessibility panel). For a design file, any WCAG contrast checker will do the same calculation from two hex values. Check the real colours you ship, including hover states and text over the lightest part of any image.
Frequently asked questions
What colour text is best on a black background?
White or light grey. White on black is 21:1, the maximum possible contrast; a light grey such as #E0E0E0 on a near-black such as #121212 is about 14:1 and is often more comfortable for long reading.
Should I use white or black text on red?
It depends on the red. On pure red (#FF0000) black text scores 5.25:1 and white only 4.0:1. On darker reds such as crimson (#DC143C) or dark red (#8B0000), white text passes comfortably.
What contrast ratio do I need for readable text?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level asks for 7:1 and 4.5:1.