Accessibility & Design

CTA Button Color Contrast Checker (WCAG AA Compliance)

White text on vibrant primary call-to-action button.

WCAG 2.1 Contrast & APCA Checker

Tested Palette Presets:
High-Converting Hero Headline (24px Bold)

Normal body text (16px, 400 weight). If this text is difficult to read against the background, your visitors will experience cognitive fatigue and bounce within seconds.

UI Badge Component
Contrast RatioPass
5.17:1
Passes WCAG AA (Standard Compliance)
Normal Text (AA)4.5:1 Met
Pass
Requires min 4.5:1 ratio
Normal Text (AAA)Under 7.0:1
Fail
Requires min 7.0:1 ratio
Large Text & UI (AA)3.0:1 Met
Pass
Requires min 3.0:1 ratio

Accessibility Verdict & Guidance:

  • Meets standard legal requirements for body text (4.5:1) and buttons.
Instant Diagnostic

Audit Your Live Website in 10 Seconds

Get an instant above-the-fold hero teardown, cognitive friction diagnostics, button contrast verification, and HTML issue checks directly on your live page.

Zero DNS or code changes Free first fix preview Private & non-invasive

Methodology & Grounded Benchmarks

What are the official WCAG 2.1 contrast thresholds?

WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3.0:1 for large text (≥18pt or 14pt bold). Level AAA requires 7.0:1 for normal text and 4.5:1 for large text. UI components and graphical boundaries require 3.0:1.

How is relative luminance calculated?

According to W3C specs, each sRGB color component (R, G, B) is linearized: values ≤ 0.04045 are divided by 12.92; otherwise, ((value + 0.055) / 1.055)^2.4. Luminance L is computed as 0.2126*R + 0.7152*G + 0.0722*B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05).