A CTA button that fails WCAG 2.2 SC 1.4.11 (Non-text Contrast, 3:1 minimum against adjacent background) and SC 1.4.3 (Text Contrast, 4.5:1 minimum for normal text) is invisible to users with low vision — and to many typical users on bright screens or in direct sunlight. Beyond accessibility compliance, contrast failure directly suppresses conversion: if the primary action doesn't visually demand attention, visitors scan past it. A low-contrast CTA is the single cheapest conversion kill in a marketing page.
High because a CTA that fails to register visually eliminates the conversion path for a measurable fraction of visitors, including users with visual impairments covered by WCAG 2.2.
Replace the low-contrast color combination with a brand color that achieves at least 3:1 button-to-background contrast and 4.5:1 text-to-button contrast. In Tailwind, indigo-600 on white clears both thresholds:
<Button className="bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500">
Get Started
</Button>
Verify contrast ratios with the WebAIM contrast checker before shipping. If your hero section uses a background image or gradient, test the button against both the lightest and darkest regions of that background.
ID: marketing-conversion.cta-effectiveness.cta-visual-contrast
Severity: high
What to look for: Examine the CSS or Tailwind classes applied to the primary CTA button(s). Look for the background color and text color combination. Check the Tailwind color values or CSS custom properties used. A CTA should use a color that visually pops against its background — not a subtle gray or low-contrast combination. Specifically: (1) If using Tailwind, check that the button class does not use near-neutral combinations like bg-gray-200 text-gray-700 on a white background; (2) If the primary color matches the background (e.g., white button on white hero), flag it; (3) Check that the button does not blend into the hero background image or gradient.
Pass criteria: Extract and quote the primary CTA button's color classes or styles. The primary CTA button uses a background color that is visually distinct from and has a contrast ratio of at least 3:1 against the surrounding background. For text contrast specifically, the text color achieves at least a 4.5:1 contrast ratio against the button background (WCAG AA). Report even on pass: "Primary CTA uses [color] on [background] with estimated X:1 contrast."
Fail criteria: The CTA button uses a low-contrast color combination — the background-to-button contrast is insufficient (e.g., a light gray button on a white background), or the button text has poor contrast against the button background.
Skip (N/A) when: No CTA button component is found in the codebase.
Detail on fail: Describe the color combination found. Example: "Primary CTA uses 'bg-gray-100 text-gray-500' — near-invisible on white background" or "Button background color (#f0f0f0) on hero background (#ffffff) provides approximately 1.1:1 contrast".
Remediation: A CTA button that blends in doesn't get clicked. Your primary action should demand attention.
Use a high-contrast color from your brand palette:
// High-contrast CTA example
<Button className="bg-indigo-600 text-white hover:bg-indigo-700">
Get Started
</Button>
Rule of thumb: the CTA button color should be the most visually prominent color on the page. If your logo or brand color is distinctive, use it here. Test on both dark and light hero backgrounds.
For a deeper analysis of color contrast across the full interface, the Accessibility Fundamentals audit covers WCAG contrast requirements in detail.