Calqu Search tools
KR EN
Developer

Color Contrast Checker

Compute contrast ratio and judge WCAG AA/AAA.

21.00:1

Large text sample Aa

This is a normal text sample. Check readability with this sentence.

All calculations run entirely in your browser — never uploaded or stored.

What is this tool?

The color contrast checker computes the contrast ratio between a foreground (text) color and a background color, and instantly checks whether it passes WCAG 2.1 accessibility thresholds. Type a hex code or pick a color, and the ratio and live preview update immediately.

WCAG thresholds
  • Normal text: AA ≥ 4.5:1, AAA ≥ 7:1
  • Large text (18pt+ or bold 14pt+): AA ≥ 3:1, AAA ≥ 4.5:1
Note: Calculated using the sRGB relative luminance formula; ratios range from 1:1 (no contrast) to 21:1 (max black/white contrast).
Privacy & processing

Everything runs in your browser. Color values are never uploaded or stored.

How is the ratio calculated? — the relative luminance principle

Contrast calculation starts with relative luminance, a value closer to how humans perceive brightness. Each R·G·B channel (0–255) is divided by 255, then converted linearly if ≤0.03928 or via the gamma-correction formula ((value+0.055)÷1.055)^2.4 otherwise. The three results are combined with weights 0.2126×R + 0.7152×G + 0.0722×B — green dominates because human cone cells are most sensitive to green wavelength changes. Once both colors have a relative luminance, the ratio is (lighter+0.05)÷(darker+0.05), the exact formula this tool implements in JavaScript.

Why gray text needs extra care — a pass/fail worked example

The color that trips up accessibility checks most often in practice isn't an extreme color — it's mid-tone gray text. It can look dark enough by eye while still falling short when calculated. On a white background (#ffffff), #999999 gray text gives a ratio of 2.85:1, well under the 4.5:1 AA threshold for normal text — a fail. Darkening it slightly to #767676 on the same background raises the ratio to 4.54:1, narrowly clearing AA — a pass. Try both combinations in the tool above and watch the badge flip from fail to pass. Because a small brightness tweak can flip the result, gray text in a design mockup should always be calculated, never eyeballed.

FAQ

How is the WCAG contrast ratio calculated?
Each color's sRGB channel values are converted to relative luminance, then the lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. The result ranges from 1:1 (no contrast) to 21:1 (max black/white contrast).
What's the difference between AA and AAA?
AA is the minimum accessibility standard, requiring 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA or higher is recommended for public or legally regulated sites.
How is "large text" defined?
WCAG defines large text as 18pt (24px) or larger, or bold text at 14pt (about 18.66px) or larger. Large text gets a relaxed contrast threshold compared to normal text.
Are entered colors sent to a server?
No. All calculations run instantly in your browser via JavaScript; color values are never transmitted or stored.
What exactly is the math behind the contrast ratio?
Each sRGB channel (R·G·B, 0–255) is converted using a linear or gamma-correction formula depending on whether it's above or below 0.03928, then combined as a weighted sum of 0.2126×R + 0.7152×G + 0.0722×B for relative luminance. Green carries the largest weight because human eyes are most sensitive to changes in green.
Why does gray text need extra caution?
Gray often looks dark enough against a white background but falls short when calculated. For example, #999999 text on white (#ffffff) gives about 2.85:1, failing the 4.5:1 AA threshold for normal text, while a slightly darker #767676 gives about 4.54:1, passing.

Related tools

Hash Generator Compute MD5 and SHA hashes of text or files. Slug Generator Turn titles into URL-safe slugs. Regex Tester Test regular expressions in real time.