Contrast Checker
Check the WCAG contrast ratio between two colors with AA and AAA pass/fail for normal and large text, plus a live preview. Runs entirely in your browser.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
This tool runs entirely in your browser. Your data never leaves your device — it is not uploaded to any server.
How to use
- 1Type a hex or rgb() value, or use the color picker, for the foreground.
- 2Do the same for the background color.
- 3Read the ratio and the AA / AAA badges, or tap a preset pair.
- 4Check the preview block to judge the pairing with your own eyes.
Contrast Checker
Enter a foreground and a background color — hex like #333 or #1F2937, or rgb()/rgba() — and get the WCAG contrast ratio to two decimals, with immediate pass/fail badges for the four thresholds that matter: AA and AAA, for normal and large text. A live preview shows both a body-text and a large-text sample in the actual colors.
The math is the official WCAG 2.x relative-luminance formula — the same one the W3C checker uses — so a 4.5 here is a 4.5 everywhere. Presets include a borderline 4.54:1 gray pair so you can see how tight the AA line really is.
Frequently asked questions
What contrast ratio do I need to pass?
WCAG 2.x: normal body text needs 4.5:1 for AA and 7:1 for AAA. Large text — at least 24 px, or 18.7 px bold — needs 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects need 3:1.
How is the ratio calculated?
Each color is linearized from sRGB and combined into a relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B; the ratio is (L lighter + 0.05) / (L darker + 0.05). That is the exact formula from the WCAG 2.x specification, matching the W3C's own checker.
What about semi-transparent colors?
An rgba() alpha below 1 is flattened onto white before the ratio is computed. WCAG itself has no alpha concept — composite the color over its real background first, or enter the resulting opaque color, for authoritative numbers.
Related tools
Color Converter
Paste a color in hex, rgb() or hsl() and get all three formats plus a ready-made row of tints and shades for your design system.
All tools →
Color Picker
Pick a color from the swatch or grab one straight from your screen with the EyeDropper API — hex, RGB and HSL copied in one click.
All tools →
Grade Calculator
Weighted or points-based grade calculator: add assignments, see your current grade and letter, and find out exactly what to score on the final exam.
All tools →
Embed this tool
Put this tool on your own site with one line — it runs entirely in the visitor's browser.
<iframe src="https://zoyku.com/en/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>