Color Contrast Calculator
Check the WCAG contrast ratio between a foreground and background colour, and see whether it passes AA and AAA for normal and large text.
How it works
linearise each sRGB channel c/255 → c≤0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4 · luminance L = 0.2126·R + 0.7152·G + 0.0722·B · contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)
The WCAG contrast ratio measures how distinguishable text is from its background, and it is not a simple brightness difference. Each colour is converted from its sRGB hex value into relative luminance: channels are normalised to 0–1, "linearised" to undo the display gamma, then weighted (green counts most, blue least, matching human vision). The ratio of the two luminances, each nudged by 0.05 to keep it finite, runs from 1:1 for identical colours to 21:1 for black on white. WCAG sets thresholds on that ratio — 4.5:1 for normal text at AA, 7:1 at AAA — with lower bars for large text, which stays legible at lower contrast.
Worked example
#333333 text on a #ffffff background: dark grey has a relative luminance of about 0.033 and white is 1.0, so the ratio is (1.0 + 0.05) ÷ (0.033 + 0.05) ≈ 12.6:1. That comfortably clears 7:1, so it passes AAA for both normal and large text — a safe, high-contrast body-text pairing.
Sources: WCAG 2.1 — Contrast (Minimum) · Relative luminance — WCAG
Frequently asked questions
What contrast ratio do I need?
For WCAG AA, normal text needs at least 4.5:1 and large text (about 24px, or 18.66px bold) needs 3:1. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. Aim for AA as a baseline for accessible, readable interfaces.
What counts as "large" text?
WCAG defines large text as 18 point (about 24px) and up, or 14 point (about 18.66px) and up when bold. Larger, heavier letters stay legible at lower contrast, which is why they get a gentler threshold (3:1 for AA instead of 4.5:1).
Why is it a ratio and not a percentage difference?
Because perception of contrast is relative, not additive. The formula compares the two luminances as a ratio after correcting for how displays and eyes handle brightness, so it reflects real legibility far better than subtracting one hex value from another.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.