Design
Accessibility Contrast Checker
Check text and background contrast against WCAG AA and AAA at a glance.
Runs entirely in your browser. Nothing is uploaded.
How to use
- Set the text colour and the background colour, by picker or hex.
- Read the contrast ratio shown large over the live sample text.
- Check the AA and AAA pass or fail for normal and large text.
- Use Swap to flip text and background and compare both ways.
Examples
- White text on near-black lands around 19:1, well past AAA, easy to read at any size.
- Mid-grey text on a slightly lighter grey often fails AA, a common low-contrast trap in captions and credits.
- A tint that passes for large headings can still fail for body text, which is why the tool grades both.
Frequently asked questions
What do AA and AAA mean?
They are WCAG contrast levels. AA needs a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1. Meeting AA is the usual minimum for accessible design.
What counts as large text?
Roughly 18.66px bold or 24px regular and up. Larger text is easier to read, so it is allowed a lower contrast ratio than body copy.
Does contrast matter for video titles?
Yes. Lower thirds and captions sit over moving footage, so strong contrast keeps them legible. Add a subtle shade or stroke behind text when the background is busy.
