Toolstia / Color contrast checker
Check colour contrast for accessibility
Enter a text colour and a background colour to see their contrast ratio and whether they pass the WCAG accessibility levels for normal text, large text and interface parts. A live sample shows how the pair looks.
4.54:1
- Normal text, level AA (4.5:1): Pass
- Large text, level AA (3:1): Pass
- Normal text, level AAA (7:1): Fail
- Large text, level AAA (4.5:1): Pass
- Buttons and icons (3:1): Pass
How it works
- Enter the text colour and the background colour as hex codes, or pick them.
- Read the ratio and the pass or fail results.
- Adjust a colour until the level you need passes.
What the ratio means
The ratio runs from 1:1 (no difference) to 21:1 (black on white). It compares how bright the two colours are, using the formula in the WCAG guidelines. A higher ratio is easier to read, especially for people with low vision.
The levels
Level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1. Large text means about 24 px, or about 19 px if bold. Buttons, icons and form borders need 3:1.
What it cannot judge
The ratio does not cover colour-blindness, thin fonts or patterned backgrounds. Treat a pass as a minimum, not a guarantee.
Hex codes
Use three or six digit codes such as #fff or #1b2733. The # sign is optional.
Questions
Which level should I aim for?
AA is the usual legal and policy target for websites. AAA is stricter and not always possible for every colour.
Is the ratio rounded?
It is cut off, not rounded up, to two decimals, so a result of 4.49 is never shown as a pass at 4.5.
Does it work for dark mode?
Yes. The ratio is the same whichever colour is lighter.
Is anything uploaded?
No. Your colours stays in your browser and is never sent anywhere.