Contrast checker
Check whether text is readable on its background, against the WCAG 2.2 standards. If it fails, get the nearest colour that passes.
Preview
Readable type is good design
Body text needs a contrast ratio of at least 4.5:1. Large text, 24px and up or 18.5px bold, needs 3:1.
Button labelContrast ratio
–
Building a full set of colours? Try the palette generator.
Good to know
What AA and AAA mean
AA is the level most laws and style guides ask for: 4.5:1 for body text, 3:1 for large text. AAA is stricter, 7:1 and 4.5:1.
Buttons and icons count too
Borders, icons and focus rings need 3:1 against what's next to them, so people can see what they can click.
Grey on grey is the usual culprit
Light grey captions and placeholder text fail most often. Nudge them darker until they pass; it rarely changes the look.
How the fix works
When a pair fails, the checker keeps your text colour's hue and adjusts only its lightness until it passes, so it still feels like your colour.