Color Contrast Checker
ColorCheck the contrast ratio between a text and background colour against WCAG AA and AAA thresholds, with a live preview of real text at normal and large sizes.
Runs entirely in your browser. Nothing is uploaded.
Large text looks like this
And this is body copy at a normal size — the size most of your text actually is, and the one that has to clear 4.5:1 to pass AA.
Contrast ratio
4.41:1
Normal text AA
Normal text AAA
Large text AA
UI & graphics
"Large" means 18.66px and bold, or 24px and up. Icons, form borders, and focus rings fall under the 3:1 non-text requirement. Contrast is necessary but not sufficient for accessibility — it says nothing about focus order, labels, or semantics.
WCAG AA & AAA pass or fail
Low-contrast text is the most common accessibility failure on the web, and the easiest to fix, because the requirement is a single number. WCAG asks for 4.5:1 on normal text and 3:1 on large text and interface elements. Enter your two colours and this gives you the exact ratio, a pass or fail against every threshold, and a live preview showing the combination on real headings, body copy, and a button.
How to check colour contrast
- 1
Enter your two colours
Set the text and background colours with the picker or by typing hex values.
- 2
Read the ratio
Get the exact contrast ratio, with pass or fail against AA and AAA for both text sizes.
- 3
Check the preview
See the pairing on real large text, body copy, and a button before you commit it to your design.
Good to know
- AA needs 4.5:1 for normal text and 3:1 for large; AAA needs 7:1 and 4.5:1. Non-text elements like icons, borders, and focus rings need 3:1.
- "Large" means 18.66px bold or 24px and above — bigger, heavier letterforms stay legible at lower contrast.
- The ratio uses WCAG relative luminance: each channel is gamma-expanded and weighted for perception, then compared as (lighter + 0.05) / (darker + 0.05).
- Grey placeholder and helper text is the usual offender — it very often sits below 4.5:1 against a light background.
What people use it for
- Checking body and helper text meets AA before shipping a design
- Finding out how much darker a brand colour needs to be to pass
- Verifying button and link colours against their backgrounds
Frequently asked questions
What ratio do I need?+
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1. Icons, borders, and focus indicators need 3:1 under the non-text contrast rule.
What counts as large text?+
18.66px and bold, or 24px and above. Large text gets a lower threshold because thicker, bigger letterforms stay legible at less contrast.
How is the ratio calculated?+
From relative luminance as defined by WCAG: each channel is gamma-expanded, weighted for how the eye perceives red, green, and blue, then compared as (lighter + 0.05) / (darker + 0.05).
Does passing contrast make my site accessible?+
No. Contrast is one requirement among many. Keyboard access, focus order, form labels, headings, and alternative text all matter just as much.
Related tools
Color Converter
HEX ⇄ RGB ⇄ HSL with a picker
Color Palette Extractor
Pull dominant colors from an image
CSS Gradient Generator
Build & copy CSS gradients
Tints & Shades Generator
Build a colour scale from one hex
Or browse all 50 free tools.