Contrast Ratio
17.72:1
Live Text Preview
The quick brown fox jumps over the lazy dog
PassThe quick brown fox jumps over the lazy dog
PassThe quick brown fox jumps over the lazy dog
PassThe quick brown fox jumps over the lazy dog
PassAA Normal
4.5:1
Small text
AAA Normal
7.0:1
Enhanced small text
AA Large
3.0:1
18pt or 14pt bold
AAA Large
4.5:1
Enhanced large text
Color contrast is one of the most commonly failed WCAG 2.1 success criteria in web accessibility audits. The WCAG contrast ratio formula — based on the relative luminance of foreground and background colors — determines whether text is readable for users with low vision. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text; WCAG AAA requires 7:1 for normal text. Many jurisdictions, including the EU and US federal agencies, mandate AA compliance under accessibility laws.
Relative luminance is computed by first converting the input color (hex, RGB, or HSL) to sRGB values in the 0–1 range. Each channel is then linearized: values below 0.04045 are divided by 12.92; values above that threshold are raised to the power of 2.4 after a shift and scale. The linearized channels are combined using the WCAG luminance weights: L = 0.2126R + 0.7152G + 0.0722B.
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the higher luminance and L2 is the lower. This formula is specified in WCAG 2.1 Success Criterion 1.4.3. The +0.05 offset prevents the ratio from being undefined when comparing two pure black surfaces.
The live preview renders sample text in normal (16px), large (24px), and bold-large (14pt bold) sizes against the selected background, giving an immediate perceptual sense of legibility alongside the numeric ratio.
A frontend developer checks a proposed button text/background color pair before implementing a design spec, catching a 3.2:1 ratio that fails AA for normal text.
A UX designer audits every text style in a new component library against all background variants in the design system before handoff.
A developer building a government website verifies that all body text meets WCAG AAA (7:1) to satisfy federal accessibility requirements.
An accessibility engineer uses the tool to quickly check whether a brand color can be used for body text on white, or only for headings and decorative elements.
Enter foreground and background colors as hex, RGB, or HSL
See the contrast ratio and WCAG AA/AAA pass/fail status instantly
Read the live preview text to visually verify legibility
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29