Contrast

Check WCAG color contrast.

A free color contrast checker that computes the WCAG contrast ratio between a foreground and background color and instantly tells you whether it passes normal AA (4.5), normal AAA (7) and large-text AA (3). It all runs locally in your browser.

How to use

1. Set the foreground (text) color.
2. Set the background color.
3. Read the contrast ratio and the pass/fail badges for each level.
4. Adjust either color until it meets your target level.

FAQ

What are the WCAG contrast thresholds?

Normal text needs ≥4.5 for AA and ≥7 for AAA; large text (roughly ≥18.66px bold or ≥24px regular) needs only ≥3 for AA. The tool reports pass/fail for each of these levels.

How is the ratio computed?

By the WCAG formula: it computes each color’s relative luminance (linearizing the sRGB channels, then weighting them) and takes (lighter + 0.05) / (darker + 0.05), giving a ratio from 1 to 21.

Is passing AA enough?

AA is the baseline most sites target; for body copy, long-form reading or stricter accessibility needs, aim for AAA where you can.

Related tools

• Color Convert — Convert HEX / RGB / HSL & more.
• Palette — Generate color schemes fast.
• Gradient — Build CSS gradients visually.
• 2FA Authenticator — End-to-end encrypted 2FA vault with live codes.
• Password Vault — Zero-knowledge vault for site logins; survives password changes.
• Data Format — Convert between JSON, YAML, TOML, CSV.