Text color picker
Hand it a background color, get back a set of text colors that work on it. Not a random white and black, but very light and very dark versions of the same hue, each with measured contrast.
Click to load that palette background into the input
Text color candidates
Sorted by contrast, highest first. Click a row to preview it.
No candidate reaches 4.5:1. On this background, only large text works, or put the text on its own solid block.
This paragraph uses the selected text color on the background you entered. Body copy needs 4.5:1; large text relaxes to 3:1.
This is large text
Why not pure white or pure black
On a tinted background, pure white goes gray and pure black goes muddy, because the eye folds the background hue into its contrast judgment. Keeping a trace of that hue makes text and background read as parts of one system.
The method: convert the background to HSL, leave the hue alone, multiply saturation by a factor and cap it (at most 40 on the light side, 55 on the dark side), then push lightness to the ends. Light side takes 100 / 97 / 93 / 88, dark side takes 22 / 15 / 8 / 3.
Pure black and pure white stay in the list as references: if a tinted candidate already matches white on contrast, there is no reason not to use it.
Measured text colors from the library
These are text and background pairs actually in use in the library. The numbers come from the same contrast implementation, so you can check them yourself.
| Palette | Background | Text | Contrast | Verdict |
|---|---|---|---|---|
| Abyss | #f9f9fb | #201f2d | 15.42:1 | AAA |
| Still Lake Blue | #ffffff | #0f172a | 17.85:1 | AAA |
| Fresh Orange | #f7f8fa | #1f1f1f | 15.51:1 | AAA |
| Rain Mist | #f9fafa | #232529 | 14.68:1 | AAA |
| Rouge | #faf9fa | #292327 | 14.66:1 | AAA |
| Ballet Slipper | #faf9fa | #292327 | 14.66:1 | AAA |
| Old Gold Leaf | #FBF5E9 | #33271E | 13.34:1 | AAA |
| Kiln Teal | #F6F1E8 | #2A2622 | 13.34:1 | AAA |
| Tide Glow | #F7FAFB | #13323A | 12.96:1 | AAA |
Body contrast across these nine palettes ranges from 12.96:1 to 17.85:1. All of them clear AAA.
How the verdicts work
Body copy needs 4.5:1 (AA) or 7:1 (AAA). Text at 18px or larger, or 14px and bold, relaxes to 3:1 (AA) and 4.5:1 (AAA). Every verdict in the list is the body-copy one.
The recommended row is the same-hue candidate with the highest contrast that still clears 4.5:1. Pure black and pure white stay as references: their ratios are often higher, but they read harsh on a tinted background. If the background is so light or dark that no candidate clears 4.5:1, the recommendation falls back to the highest ratio available and the page says large text only.
Test in the contrast checker →Dark mode converter →Color tools →