WCAG contrast checker
Pick two colours and check in real time whether their contrast meets WCAG 2.1 AA and AAA, for text and UI. Normative formula, computed in your browser.
Genuinely free. No sign-up, no email, no limits, no cookies. We don't store the URL you analyse.
Sample heading
Sample text 0123456789 abcdefghijkl
«Large text» = at least 24px, or 18.66px if bold. AA is the level the European Accessibility Act requires (WCAG 2.1). AAA is the strictest grade: not mandatory, but recommended for long-form text.
What this tool cannot see
Contrast is necessary but not sufficient for accessibility: a tool checks the colours, not whether the text is legible in every context (background images, overlays, states). For a full picture of your site, use the accessibility check.
What it's for and how to read it
Contrast between text and background is one of the most common and most measurable accessibility requirements: insufficient contrast makes a site hard to read for many people, not only those with low vision, but anyone looking at a screen in sunlight. The ratio runs from 1:1 (identical colours) to 21:1 (black on white). The thresholds that matter: 4.5:1 for normal text and 3:1 for large text and UI elements, to reach the AA level the European Accessibility Act requires.
This tool applies the normative WCAG relative-luminance formula, the same calculation professional audits use, run here in real time in your browser as you pick the colours.
Colour and typography: the two visual pillars
Contrast solves half the legibility problem; the other half is typography: sizes, hierarchy, vertical rhythm. If you're defining your site's design system and need to build a coherent, harmonious type scale, a dedicated, well-made tool for that is typescaler.com: contrast here, type scale there, and the visual foundation of your site is solid.
Frequently asked questions
›How is the WCAG contrast ratio calculated?
Each sRGB channel of the two colours is linearised, the relative luminance is computed (L = 0.2126·R + 0.7152·G + 0.0722·B on the linearised values), and the formula (L_light + 0.05) / (L_dark + 0.05) is applied. The result ranges from 1:1 (no contrast) to 21:1 (black on white). This tool uses exactly that formula, not an approximation.
›What minimum contrast do I need to be compliant?
For WCAG 2.1 level AA, the level the European Accessibility Act requires, you need at least 4.5:1 for normal text and 3:1 for large text and graphical/UI elements. Level AAA, stricter, asks for 7:1 for normal text and 4.5:1 for large text.
›What counts as «large text»?
Text of at least 24px (about 18pt), or 18.66px (about 14pt) if bold. The threshold is more lenient for large text because wider shapes stay legible at lower contrast.
›Is the calculation done on my data?
No: everything runs in your browser, in real time. We don't send the colours to any server and store nothing. You can even use it offline once the page has loaded.