Design & Colour
Contrast Checker
Pick or paste two hex colours to see contrast ratio and AA/AAA pass/fail.
Does this colour pair pass WCAG?
WCAG 2 contrast compares the relative luminance of foreground and background colours. Normal text generally needs at least 4.5:1 for AA and 7:1 for AAA; large text thresholds are 3:1 (AA) and 4.5:1 (AAA). Paste or pick two hex values to see the ratio and pass/fail for each tier, with a live sample swatch. This checker reports contrast only — it does not suggest a repaired pair. For automatic nudges toward a passing text colour use the accessible colour pair tool, and for exploring tints around a brand hex see colour shade.
Worked example
#111111 on #FFFFFF yields a very high ratio (well above 7:1) and passes AAA for normal text. Mid greys on pastel backgrounds often fail AA for body copy.
Limits and assumptions
WCAG 2 contrast only. Does not test colour vision deficiency, focus indicators, non-text contrast (UI components) or dark-mode tokens separately.
Frequently asked questions
What is WCAG?
Web Content Accessibility Guidelines — the usual standard for making websites readable. This tool checks the colour-contrast part of WCAG 2.
What do AA and AAA mean?
They are WCAG success levels. AA is the common bar for products and public sites. AAA is stricter (harder to pass) for enhanced contrast.
What counts as large text?
Typically 18 pt+ regular or 14 pt+ bold (CSS px equivalents vary). When unsure, meet the normal-text threshold.
What is a hex colour?
A hex code like #111111 is how screens store a colour (red, green and blue channels in hexadecimal). Paste it or use the colour picker.