WCAG Contrast Checker
Private by design — runs entirely in your browser
Pick foreground and background colours, see the WCAG contrast ratio and AA/AAA badges for normal text, large text and UI components.
What ratio counts as passing
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18 px regular or ≥14 px bold). AAA tightens the bar to 7:1 and 4.5:1 respectively.
What is the 3:1 UI components rule
WCAG 2.1 SC 1.4.11 requires 3:1 contrast for icons, form-field borders and any non-text UI part that conveys information. The badge in this tool covers that case.
Does it cover semi-transparent colours
Yes when the value is given as rgba and the background is solid; for layered translucency you need to flatten upstream. The tool warns when the parser cannot read the value.
Frequently Asked Questions
- What ratio counts as passing?
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18 px regular or ≥14 px bold). AAA tightens the bar to 7:1 and 4.5:1 respectively.
- What is the 3:1 UI components rule?
- WCAG 2.1 SC 1.4.11 requires 3:1 contrast for icons, form-field borders and any non-text UI part that conveys information. The badge in this tool covers that case.
- Does it cover semi-transparent colours?
- Yes when the value is given as rgba and the background is solid; for layered translucency you need to flatten upstream. The tool warns when the parser cannot read the value.
- Is anything uploaded?
- No. The maths is a tiny function on this page; the colours never leave the browser.