Free tools · Generator
Accessible palette builder
Most brand colors fail contrast somewhere. The question is which shades of yours are safe to use. Enter your color and get a light-to-dark ladder, each step tested against white and dark text at WCAG's 4.5:1, with what each shade is safe for.
| Shade | White text | Dark text | Use as |
|---|---|---|---|
| #dee5f7 | 1.26:1 ✗ | 13.55:1 ✓ | Body text, dark on this |
| #bccbee | 1.62:1 ✗ | 10.51:1 ✓ | Body text, dark on this |
| #90a8e3 | 2.36:1 ✗ | 7.24:1 ✓ | Body text, dark on this |
| #6385d8 | 3.57:1 ✗ | 4.78:1 ✓ | Body text, dark on this |
| #416acf | 5.01:1 ✓ | 3.40:1 ✗ | Body text, white on this or this on white |
| #2050c7← yours | 6.92:1 ✓ | 2.46:1 ✗ | Body text, white on this or this on white |
| #1b44a9 | 8.58:1 ✓ | 1.99:1 ✗ | Body text, white on this or this on white |
| #16388b | 10.64:1 ✓ | 1.60:1 ✗ | Body text, white on this or this on white |
| #102864 | 13.91:1 ✓ | 1.22:1 ✗ | Body text, white on this or this on white |
| #0a183c | 17.37:1 ✓ | 1.01:1 ✗ | Body text, white on this or this on white |
Every ratio here is measured against white (#ffffff) and against our near-black text tone (#131c2b), and the tick beside it marks the 4.5 to 1 bar that 1.4.3 Contrast (Minimum) sets for ordinary body copy. That is one threshold out of two, which is why a cross is not a verdict on the shade. The same rule lets large text through at 3 to 1, and 1.4.11 Non-text Contrast asks for 3 to 1 from borders, icons and focus rings, so a shade this ladder rules out for paragraphs can still be the right one for a heading or a button edge. Once you have picked a shade, take the exact pair to the contrast checker and read it against every threshold at once.
What it checks
Which shades of your color pass
Rather than testing one pair at a time, it shows the range that clears the threshold against your background.
The body-text threshold across every shade
Each step is measured against 4.5 to 1, which is the bar for ordinary text, so you can see where the ladder stops being usable for body copy.
Light and dark grounds
A brand color that works on white often fails on a dark surface, and the two need checking separately.
What it cannot tell you
- The tick and cross measure one threshold, 4.5 to 1, which is the bar for body copy. Where a shade misses it the table says what the shade is still good for, because large text needs 3 to 1 under 1.4.3 and interface parts need 3 to 1 under 1.4.11. Take the exact pair to the contrast checker before you commit to it.
- It works in flat colors. A shade that passes here can still fail over a photograph or a gradient.
- It cannot tell you whether the color is carrying meaning on its own, which is a separate rule and a separate failure.
- Passing contrast is not the same as being legible. Thin weights and small sizes are still hard to read at exactly 4.5 to 1.
Where to go next
- Contrast checkerTest a specific pair once you have chosen the shade.
- 1.4.3 Contrast (Minimum)The rule, with the exceptions that genuinely apply.
- Accessible web designWhere color sits among the other visual decisions.
- The designer's checklistThe checks that run inside your design tool, before anything is built.