Tinta Color contrast checker
Check whether text stays readable on a background, by the WCAG 2.2 contrast formula. Add up to six colors to test every pairing in a palette at once.
Text color · Soft Black
Background color · Off White
Color 3 · Cornflower Blue
Tip: paste a list of hex codes anywhere here to check them all at once.
The quick brown fox
jumps over the lazy dog. Body text at 14px looks like this.
15.79:1 · Soft Black on Off White
- Pass · AA body text (4.5:1)
- Pass · AA large text (3:1)
- Pass · AAA body text (7:1)
- Pass · AAA large text (4.5:1)
Contrast checker
Text color (rows) on background (columns), scored against WCAG 2.1. 4 of 6 palette combinations are readable as body text. White and near-black text are included for comparison.
| Text ↓ / Bg → | #1C1917 | #F6F3ED | #82AAF2 |
|---|---|---|---|
| #1C1917 | Same color | 15.8AAA | 7.5AAA |
| #F6F3ED | 15.8AAA | Same color | 2.1Fail |
| #82AAF2 | 7.5AAA | 2.1Fail | Same color |
| White | 17.5AAA | 1.1Fail | 2.3Fail |
| Near-black | 1.0Fail | 15.8AAA | 7.5AAA |
AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only
Text that works on each color
- White on #1C1917 · 17.5:1
- Near-black on #F6F3ED · 15.8:1
- Near-black on #82AAF2 · 7.5:1
Suggested fixes for 2 failing pairs
The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.
How color contrast is measured
WCAG compares the relative luminance of two colors, the amount of light each one gives off once the screen's gamma is taken into account. The ratio runs from 1:1 (the same color twice) to 21:1 (black on white). Hue plays no part in the formula, which is why a saturated red and a saturated green can look completely different and still score close to 1:1.
What the AA and AAA levels mean
AA is the level most accessibility laws and design systems ask for: 4.5:1 for body text and 3:1 for large text, which WCAG defines as 18pt (24px) regular or 14pt (about 18.7px) bold. Icons, input borders and focus rings also need 3:1 against what surrounds them. AAA raises the bar to 7:1 for body text and 4.5:1 for large text, and is worth aiming for in long-form reading.
Fixing a pair that fails
When a pair fails, the checker suggests the nearest shade of the text color that passes AA. It keeps the hue and chroma in OKLCH and moves only lightness, so the color still reads as yours. Often the simplest fix is plain ink: the White and Near-black rows in the matrix show which one works on each background. Pale and pastel palettes nearly always need a much darker text color than the palette itself provides.
Checking a whole palette
Add every color in a palette and the matrix scores each one as text on each of the others, so the usable combinations stand out. Every palette on Tinta has the same check on its page; browse the palettes or look up a single color, such as #82AAF2, for its contrast against white and black.