Contrast Checker
Check two colours against the WCAG contrast rules.
Text colour
HEX, RGB or HSL, for example #767676, rgb(118, 118, 118) or hsl(0, 0%, 46%)
Background colour
Your text stays on your deviceHow?
- Contrast ratio
- 21:1
Normal text looks like this.
Large text looks like this.
Button outlineWCAG 2.2
- AA normal text
- 4.5:1 needed Pass
- AA large text
- 3:1 needed Pass
- AAA normal text
- 7:1 needed Pass
- AAA large text
- 4.5:1 needed Pass
- User-interface components
- 3:1 needed Pass
How to check colour contrast
- Pick or type the text colour, as HEX, RGB or HSL.
- Pick or type the background colour.
- Read the contrast ratio and whether it passes each WCAG level.
Questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text and for buttons, icons and other parts of an interface. Level AAA asks for 7:1 and 4.5:1.
What counts as large text?
Text of at least 18 point (24 pixels), or at least 14 point (about 19 pixels) in bold.
Why does 4.499 not round up to a pass?
WCAG compares the exact ratio with the threshold, so the ratio is cut to two decimals rather than rounded, and a near miss never shows as a pass.
Can I check a colour with transparency?
No. A see-through colour's contrast depends on what is behind it, so enter the solid colour you see.
Is anything I enter sent anywhere?
No. The check happens inside your browser.