WCAG contrast checker
Check the contrast ratio between a text color and a background color against WCAG accessibility thresholds, before using them on your site.
Sample heading
Here is a sample paragraph of text using the text color and background color chosen above, so you can visually judge readability in addition to the WCAG score.
How it works
WCAG guidelines define minimum contrast ratios between text and its background to ensure a site remains readable for people with low vision or in difficult viewing conditions (dim screen, glare). Before approving a color combination chosen in Figma or a style guide, this tool calculates the actual ratio between the two colors and indicates whether it meets the AA (minimum recommended level) and AAA (enhanced level) thresholds.
What's the difference between "normal text" and "large text"?
The required contrast threshold depends on text size: large text (roughly 18pt and up, or 14pt bold) remains readable with lower contrast than normal-size text, because the letter shapes are bigger and easier to distinguish.
Should I aim for AA or AAA?
AA is the generally recommended standard and sufficient for most websites (and often a legal requirement depending on jurisdiction). AAA is stricter and recommended for content where accessibility is a top priority, but it can sometimes be hard to achieve with certain brand palettes without significantly changing them.
100% local processing: the contrast ratio calculation happens directly in your browser via WebAssembly, with no calls to an external server.