Check if your text and background colour combination passes WCAG AA and AAA accessibility standards.
The quick brown fox jumps over the lazy dog.
Large Text Sample (18pt+)
Small body text — this is how your normal paragraph content will look with these colour choices. Readability matters for accessibility.
Click the colour pickers or type HEX codes directly into the fields to set your foreground (text) and background colours.
The contrast ratio updates instantly. A higher number means better readability — 21:1 is black on white (maximum), 1:1 is no contrast at all.
Green ✅ means Pass, red ❌ means Fail. Adjust colours until your most important badges show Pass.
Large text = 18pt (24px) regular or 14pt (≈19px) bold or heavier.
WCAG stands for Web Content Accessibility Guidelines — the international standard for web accessibility published by the W3C. WCAG 2.1 defines minimum contrast ratios to ensure text is readable for people with low vision.
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 14pt bold) and 3:1 for large text (18pt+ / 14pt+ bold). For UI components and graphical objects, 3:1 is required.
WCAG AAA requires a minimum contrast ratio of 7:1 for normal text and 4.5:1 for large text. AAA is the highest level of conformance and is recommended for content used by people with severe vision impairment.
The contrast ratio is calculated using the relative luminance of each colour as defined by the W3C: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 is the darker one's.
The checker works with fully opaque HEX and RGB colours. For transparent colours, use the RGBA to HEX converter to compute the effective colour on a given background first.
Yes. All calculations happen entirely in your browser using JavaScript. No data is ever sent to any server.
