Contrast checker
Check any two colors against WCAG 2.2. When a pair fails, you get the nearest color that passes with your hue held exactly, not just the number.
Now
With the fix
4.48to 1
| Body textUnder 18.66px, or under 24px if not bold | 4.5:1 | Fails |
| Large text24px and up, or 18.66px and up when bold | 3:1 | Passes |
| Body text, AAAThe stricter level | 7:1 | Fails |
| Large text, AAAThe stricter level | 4.5:1 | Fails |
The nearest color that passes
Moving the foreground only, with your hue held exactly and no saturation given up.
4.52:1
Why this rule exists
- One brand color is not enough, and tinting it does not helpA single brand color cannot be a surface, a link and a tint at once. And the usual way of generating the missing shades is what makes them unusable.
- Your 20px heading is not large textWCAG's large-text relief starts at 24px, or 18.66px at weight 700. Everything below that needs the full 4.5:1, and the gap is where most hand-checked palettes fail.
- White text on your brand color almost certainly failsMost brand colors are too light to carry white text at 4.5:1. The fix is usually dark text on the brand color, not a different brand color.
- Why two contrast checkers give you different answersThe ratio is fixed arithmetic, so disagreements are never about the maths. They are about which two colors the tool thinks it is measuring.
The other tools
Palette matrix
Every pair in your palette, checked at once.
Accessible ramp
One brand color, a full scale, every step measured.
Color blindness check
Two colors that pass contrast can still be the same color.
Focus and UI check
Fifteen interface parts, and which of them the 3:1 rule exempts.