Contrast Checker
In nine accessibility audits out of ten, contrast issues on disabled states or placeholders go unnoticed. Designers test main text, not every interface state. This tool checks everything, to WCAG standards.
Contrast ratio
15.92 : 1
- AA (normal text) (min. 4.5:1)
- AA (large text) (min. 3:1)
- AAA (normal text) (min. 7:1)
- AAA (large text) (min. 4.5:1)
How to use this tool
- 1Enter the text colour (hex code or colour picker)
- 2Enter the background colour
- 3Read the calculated contrast ratio
- 4Check AA and AAA compliance by text size
Why it matters
WCAG 2.1 criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. These thresholds are often checked for body text but missed on disabled states, placeholders, form labels, or text on images. A single non-compliant value is enough to generate a finding in an accessibility audit.
Frequently asked questions
What contrast ratio does WCAG require?
WCAG 2.1 criterion 1.4.3 (Level AA) requires 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). For non-text UI components, criterion 1.4.11 requires 3:1.
Are decorative colours exempt from contrast requirements?
Yes. WCAG exempts purely decorative text, logotypes, and text embedded in decorative images. In practice, any text that conveys information is subject to contrast criteria.
How do you fix a colour contrast issue?
Darken the text colour or lighten the background, or vice versa. Tools like the Colour Contrast Analyser or accessibility plugins for Figma allow real-time adjustment. Aim for at least 4.5:1 to pass AA safely.