What formula is used to compute contrast?

We use the standard WCAG 2.1 formula: relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B (with sRGB linearisation), then ratio = (L_light + 0.05) / (L_dark + 0.05).

What counts as “large text”?

WCAG defines large text as ≥18pt (24px) regular, or ≥14pt (18.66px) bold. Large text has a lower contrast threshold (3:1 for AA, 4.5:1 for AAA).

What ratios should I aim for?

AA normal text needs 4.5:1, AAA needs 7:1. Large text needs 3:1 (AA) or 4.5:1 (AAA). Going AAA on body text is a great accessibility win.

Does this work for buttons and UI components?

Yes — test the text color against the button background. For non-text contrast (icon borders, focus rings) WCAG 2.1 asks for 3:1 against adjacent colors.

Are my colors sent to a server?

No. The ratio is computed in your browser. Nothing is uploaded.

Contrast Checker

Test foreground/background pairs against WCAG AA & AAA — live.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Contrast Checker

Follow these steps — everything happens instantly in your browser.

1
Step 1. Pick a foreground (text) color and a background color using the swatches or HEX inputs.
2
Step 2. Read the live contrast ratio displayed at the top of the results panel.
3
Step 3. Check the WCAG 2.1 results grid for AA and AAA pass/fail on normal and large text.
4
Step 4. Hit the swap button to flip the two colors and re-test.