WCAG Color Contrast Checker

Check WCAG color contrast ratio free online for text accessibility. Real relative luminance calculation against AA and AAA standards, for normal and large text.

Text Color

Background Color

Large Text Sample

Normal body text sample for readability checking

Browser only -- real WCAG 2.x relative luminance formula.

How to Use This Tool

Pick text and background colorsYour intended foreground and background

See the calculated contrast ratioUsing the exact WCAG relative luminance formula

Check against AA and AAA thresholdsFor both normal and large text requirements

WCAG Color Contrast Checker is a free online tool that works entirely in your browser — no signup, no data uploaded, no limits.

Real WCAG Math, Not an Approximation

This checker implements the official WCAG 2.x relative luminance and contrast ratio formulas precisely -- gamma-correcting each RGB channel, applying the official luminance coefficients, then calculating the contrast ratio between your chosen text and background colors. The result matches what accessibility auditing tools calculate, not a simplified estimate.

Why Large and Normal Text Have Different Thresholds

WCAG sets a lower contrast bar for large text (18pt+, or 14pt+ bold) because larger character shapes remain legible at lower contrast than small body text, where every stroke and curve needs clear separation from the background to read reliably at typical reading distances.

AA Versus AAA -- A Practical Tradeoff

AA (4.5:1 normal, 3:1 large) is the commonly targeted accessibility standard for general compliance. AAA (7:1 normal, 4.5:1 large) is stricter and sometimes meaningfully constrains color choice, particularly when working within fixed brand colors -- many teams target AA universally and reserve AAA specifically for critical content where the stricter standard is worth the design tradeoff.

Frequently Asked Questions

The official WCAG 2.x formula: contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Relative luminance itself is calculated from gamma-corrected RGB values using the official WCAG coefficients, not a simplified approximation.

AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA, the stricter standard, requires 7:1 for normal text and 4.5:1 for large text. These are the official published thresholds, not approximations.

Larger text is inherently easier to read at lower contrast since its shapes are more distinguishable, which is why WCAG sets a lower threshold for large text than for normal-size body text where every character needs to be clearly legible.

Color contrast is one specific, important accessibility requirement among many -- AAis the commonly targeted minimum for general accessibility compliance, but full accessibility also involves considerations like keyboard navigation, screen reader compatibility, and other WCAG success criteria beyond contrast alone.

AAA's stricter 7:1 ratio can meaningfully constrain color choices, sometimes conflicting with brand color requirements or design preferences. Many organizations target AA as a practical, still genuinely accessible standard while reserving AAA for specific high-priority content.