The contrast levels
The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio between two colors, from 1:1 for identical colors to 21:1 for black on white. The levels most organizations work to:
| Level | Body text | Large text | Icons, borders and controls |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 (WCAG 2.1) |
| AAA | 7:1 | 4.5:1 | Not set separately |
Large text means roughly 18 point regular or 14 point bold. Your own requirement may come from a contract, a public-sector rule or a company policy; tell us which level you need to meet.
Every pair, checked
We check every text and background pair in your palette, plus buttons, links, form borders and chart colors. The panel below works the same way: it computes the ratio for each pair and marks which level it passes.
Contrast checker
#0d5c75
#fbfaf7
#d9c6a5
#ef6f5a
#1f2a30
- Ocean on Shell7.17:1AAA
- Ocean on Dune4.48:1AA large
- Ocean on Coral2.53:1Fails
- Ink on Ocean1.96:1Fails
- Dune on Shell1.60:1Fails
- Coral on Shell2.84:1Fails
- Ink on Shell14.05:1AAA
- Coral on Dune1.77:1Fails
- Ink on Dune8.78:1AAA
- Ink on Coral4.95:1AA
#2f5d3a
#f4efe3
#e3b448
#7a2e4a
#1c1c1c
- Leaf on Cream6.66:1AA
- Leaf on Honey3.96:1AA large
- Plum on Leaf1.19:1Fails
- Charcoal on Leaf2.23:1Fails
- Honey on Cream1.68:1Fails
- Plum on Cream7.90:1AAA
- Charcoal on Cream14.85:1AAA
- Plum on Honey4.70:1AA
- Charcoal on Honey8.84:1AAA
- Charcoal on Plum1.88:1Fails
#2b2d42
#edf2f4
#8d99ae
#d62839
#ffffff
- Navy on Mist11.95:1AAA
- Navy on Steel4.69:1AA
- Navy on Signal2.71:1Fails
- Navy on White13.49:1AAA
- Steel on Mist2.55:1Fails
- Signal on Mist4.41:1AA large
- Mist on White1.13:1Fails
- Signal on Steel1.73:1Fails
- Steel on White2.88:1Fails
- Signal on White4.97:1AA
Ratios use the WCAG 2 formula. AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1.
Fixes that keep the brand
A failing pair rarely means the color has to go. Most fixes are small: a darker shade of the same hue for text, a lighter tint for backgrounds, or a rule that a light brand color is used for shapes and never for text. We show each change next to the original so you can see the brand still reads as itself.
Beyond contrast
Contrast is one part of accessible color. Information shouldn't depend on color alone, so we check that charts, status colors and links also use labels, patterns or underlines. We also check palettes for common forms of color blindness.
Questions
Does a passing palette make my site accessible?
It covers color contrast, which is one part. Full accessibility also covers structure, keyboard use, alt text and more, which a web developer or accessibility auditor checks.
Can you check our existing website colors?
Yes. Send the URL or your style sheet colors, and we report each pair with fixes for the ones that fail.
Colors not working together? Send what you use now and where it has to work: screens, print, signs or packaging.
Request a quote