How is the contrast ratio calculated?

It follows the WCAG 2.x formula: each color's relative luminance is computed from its sRGB channels, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. The result ranges from 1:1 (identical colors) to 21:1 (black on white).

What's the difference between AA and AAA?

WCAG AA is the standard minimum accessibility level most sites target: 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is a stricter, enhanced level: 7:1 for normal text and 4.5:1 for large text.

What counts as 'large text' for these thresholds?

WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Large text gets a lower contrast requirement because bigger, bolder glyphs remain legible at lower contrast.

Is my color data sent anywhere?

No. The luminance and ratio calculations happen entirely in your browser using JavaScript — nothing is uploaded or stored.

CONTRAST RATIO CALCULATOR

Check the WCAG contrast ratio between two colors, with pass/fail results for AA and AAA. Nothing leaves your browser.

Foreground (text)

Background

13.96:1

The quick brown fox jumps over the lazy dog.

Sample text at this contrast ratio.

Level	Result
AA — Normal text (4.5:1)	Pass
AA — Large text (3:1)	Pass
AAA — Normal text (7:1)	Pass
AAA — Large text (4.5:1)	Pass

How to check contrast ratio

1
Pick or type a foreground (text) color and a background color as hex codes.
2
Read the contrast ratio and the live text preview.
3
Check the pass/fail table for WCAG AA and AAA at normal and large text sizes.

Questions

How is the contrast ratio calculated?: It follows the WCAG 2.x formula: each color's relative luminance is computed from its sRGB channels, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. The result ranges from 1:1 (identical colors) to 21:1 (black on white).
What's the difference between AA and AAA?: WCAG AA is the standard minimum accessibility level most sites target: 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is a stricter, enhanced level: 7:1 for normal text and 4.5:1 for large text.
What counts as 'large text' for these thresholds?: WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Large text gets a lower contrast requirement because bigger, bolder glyphs remain legible at lower contrast.
Is my color data sent anywhere?: No. The luminance and ratio calculations happen entirely in your browser using JavaScript — nothing is uploaded or stored.