Text color for a background
Enter a background color and see whether black or white text reads better on it, by the WCAG 2 contrast ratio that accessibility checks use.
Black text: 5.70:1 — better
AA ✓ · AAA ✗ · AA large ✓ · AAA large ✓
White text: 3.67:1
AA ✗ · AAA ✗ · AA large ✓ · AAA large ✗
- Relative luminance of the background: 0.2355 (black wins above 0.1791)
- Another text color? Check it in the contrast checker.
How the choice is made
WCAG 2 compares two colors by their relative luminance L, a measure of lightness from 0 for black to 1 for white. The contrast ratio is (L₁ + 0.05) / (L₂ + 0.05), with the lighter color on top. Black text gives (L + 0.05) / 0.05, white text 1.05 / (L + 0.05). The two are equal when L = √(1.05 × 0.05) − 0.05 ≈ 0.1791, where each is 4.58:1. The same calculation runs in the contrast checker.
The switch point is a luminance, not a lightness halfway between black and white: a background that looks medium grey, such as #767676, already has more contrast with black text.
| Background | Black text | White text | Better |
|---|---|---|---|
| #FF0000 | 5.25:1 | 3.99:1 | black |
| #FF7F00 | 8.28:1 | 2.53:1 | black |
| #3B82F6 | 5.70:1 | 3.67:1 | black |
| #009688 | 5.71:1 | 3.67:1 | black |
| #E91E63 | 4.83:1 | 4.34:1 | black |
| #008000 | 4.08:1 | 5.13:1 | white |
| #7F00FF | 3.34:1 | 6.27:1 | white |
| #767676 | 4.62:1 | 4.54:1 | black |
Where WCAG 2 and readers disagree
On saturated mid-tones, oranges, reds and medium blues, WCAG 2 often prefers black text where many designers would put white. The ratio is the test accessibility audits use, so the page reports it as it is. APCA, a separate contrast method, is not part of WCAG 2 or of the current WCAG 3 draft, and its licence restricts reuse, so the page does not compute it. If you pick white on such a color, check that it still passes the level you need.
Text color for a background: questions
- Should I use black or white text on this color?
- Use the one with the higher contrast ratio against the background. The ratio is the WCAG 2 formula: (lighter luminance + 0.05) / (darker luminance + 0.05). Enter the background above and the page computes both.
- Where is the switch point between black and white text?
- At a background relative luminance of √(1.05 × 0.05) − 0.05 ≈ 0.1791. There both ratios are 4.58:1. Above it black text has more contrast, below it white text.
- Does the better of black and white always pass WCAG AA?
- Yes, for the 4.5:1 of normal text. The worst case is a background right at the switch point, where both give 4.58:1. AAA (7:1) is not always reachable with either.
- Why does it suggest black text on bright red or medium blue?
- Because by the WCAG 2 formula black has more contrast on these mid-tones: pure red #FF0000 gives 5.25:1 with black and 3.99:1 with white. Pure blue #0000FF is darker and goes the other way: 8.59:1 with white, 2.44:1 with black. Many designers still prefer white on such mid-tones. This page follows WCAG 2, which is what accessibility audits check today; if you choose white, make sure its ratio still passes the level you need.
- How do I do this in code?
- Compute the relative luminance L of the background as WCAG 2 defines it, then use black text if L > 0.1791 and white otherwise. That is the same as comparing the two contrast ratios.
Sources
- W3C (2018, current edition 6 May 2025). Web Content Accessibility Guidelines (WCAG) 2.1: definitions of relative luminance and contrast ratio, success criteria 1.4.3 and 1.4.6. Link