What is the WCAG 2.1 contrast ratio formula?

Contrast is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.

What qualifies as large text under WCAG guidelines?

Large text is defined as 18pt (24px) regular weight or 14pt (approximately 18.66px) bold weight.

Does this tool transmit color values to an external server?

No. All luminance equations and contrast calculations run strictly in client-side JavaScript.

Free & Private Online Browser Utility

WCAG Color Contrast Checker: AA & AAA Test

Evaluate relative luminance and color contrast ratios between foreground and background colors in accordance with WCAG 2.1 guidelines. The tool calculates exact numerical contrast ratios, tests conformance for normal text, large text, and interface graphical components across AA and AAA levels, and provides real-time lightness adjustments with simulated vision previews in local browser memory.

How to use

Step 1: Enter Foreground & Background Colors

Input hexadecimal color values or adjust interactive HSL sliders for text and background surfaces.
Step 2: Evaluate Conformance Ratings

Review WCAG AA and AAA pass or fail badges for normal body copy, 18pt large text, and interactive UI components.
Step 3: Adjust Lightness or Swap Colors

Fine-tune color brightness sliders or click swap to invert colors and verify contrast balance.

Options explained

WCAG Level Verification

Calculates contrast ratio against 4.5:1 (AA normal), 3.0:1 (AA large / UI), and 7.0:1 (AAA enhanced) thresholds.

When to use: Use during design system creation to confirm accessible typographic contrast.

Live Text Preview

Renders real-time typography samples at small body (14px), regular (16px), and heading sizes.

When to use: Use to inspect legibility and visual weight before committing color values to code.

Color Inverter

Swaps foreground and background hex codes with one click to check inverted dark-mode schemes.

When to use: Use when evaluating dark mode surface contrast and reversed pill badges.

Worked example

Input: Foreground #0f172a on Background #ffffff

Output: Contrast Ratio: 16.09:1 (Passes AA Normal, AA Large, AAA Normal, and AAA Large)

Calculated via relative luminance formula defined in WCAG 2.1.

Tips & limits

Normal body text requires a minimum 4.5:1 ratio, while bold text above 14pt requires a 3.0:1 ratio.
Form input borders and interactive icons require at least 3.0:1 contrast against adjacent background colors.
Pure black text on pure white yields a 21.0:1 ratio; softening to dark slate reduces eye strain on high-luminance displays.

Common problems

Brand color falls slightly below the 4.5:1 requirement: Use the lightness slider to shift luminosity slightly darker until the ratio crosses the 4.5:1 boundary.
Short 3-character hex code fails parsing: The parser expands 3-digit shorthand values like #abc into complete 6-digit codes automatically.

Frequently Asked Questions (FAQ)

What is the WCAG 2.1 contrast ratio formula?: Contrast is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.
What qualifies as large text under WCAG guidelines?: Large text is defined as 18pt (24px) regular weight or 14pt (approximately 18.66px) bold weight.
Does this tool transmit color values to an external server?: No. All luminance equations and contrast calculations run strictly in client-side JavaScript.

How to use

Step 1: Enter Foreground & Background Colors

Step 2: Evaluate Conformance Ratings

Step 3: Adjust Lightness or Swap Colors