How to Check Button Contrast for WCAG AA Compliance Using Taste Skill

Taste Skill enforces a mandatory Button Contrast Check that requires every call-to-action to meet WCAG AA standards—≥4.5:1 for normal text and ≥3:1 for large text—ensuring accessible UI generation by default.

The Taste Skill repository (Leonxlnx/taste-skill) embeds accessibility directly into its AI design directives, making WCAG AA compliance a built-in requirement rather than an afterthought. When you generate or review UI components using this skill, you are working with a system that treats button contrast as a mandatory checkpoint. This guide walks you through the specific requirements defined in the source code and demonstrates practical methods to verify and implement compliant button styles.

Understanding the Taste Skill Button Contrast Requirement

According to the specification in skills/taste-skill/SKILL.md at line 225, Taste Skill mandates a Button Contrast Check before shipping any button component. The directive states: "Before shipping any button, verify the button text is readable against the button background … contrast ratio WCAG AA min (4.5:1 for body, 3:1 for large text 18px+)."

This requirement is also documented in the project's evolution history. The CHANGELOG.md at line 56 notes the introduction of the Button Contrast Check to ensure "every CTA passes WCAG AA contrast (no white-on-white)." Because this rule is embedded in the skill's prompt, any AI-generated UI produced by Taste Skill should inherently respect these thresholds.

WCAG AA Contrast Thresholds Explained

The Taste Skill specification distinguishes between two text categories when validating contrast:

• Normal text (below 18 px or 14 px bold): Requires a minimum contrast ratio of 4.5:1 against the background.
• Large text (18 px and above, or 14 px bold and above): Permits a reduced minimum of 3:1 due to increased stroke width and visibility.

These ratios apply to the boundary between the button's foreground (text color) and its immediate background (button fill or overlay).

Practical Implementation Methods

When manually authoring or reviewing components, use the following approaches to satisfy the Taste Skill requirements.

High-Contrast Tailwind CSS Buttons

For rapid development with guaranteed compliance, combine Tailwind's color palette with size utilities that trigger the correct threshold.

<!-- Large primary button (≥ 18 px) -->
<button class="text-white bg-blue-800 hover:bg-blue-900 font-medium py-3 px-6 rounded-lg text-lg">
  Get Started
</button>

• bg-blue-800 (#1E3A8A) on text-white (#FFFFFF) yields a contrast ratio of approximately 9.5:1, exceeding the 4.5:1 requirement.
• The text-lg class (≈ 18 px) qualifies as large text, meaning the ratio only needs to exceed 3:1, providing a substantial safety margin.

CSS Ghost Buttons with Dark Mode Support

For outline or transparent buttons—especially those placed over photographic backgrounds—the specification recommends adding a contrasting stroke or backdrop. This example includes a dark-mode fallback to preserve compliance across color schemes.

<button class="ghost-btn">Learn More</button>

.ghost-btn {
  color: #1F2937;               /* Gray-800 */
  background: transparent;
  border: 2px solid #1F2937;
  padding: .75rem 1.5rem;
  font-size: 1rem;              /* Normal body text */
}

@media (prefers-color-scheme: dark) {
  .ghost-btn {
    color: #F9FAFB;            /* Gray-50 */
    border-color: #F9FAFB;
  }
}

• In light mode, Gray-800 (#1F2937) on a light background provides approximately 12:1 contrast.
• The dark mode media query ensures the button adapts to maintain WCAG AA compliance when the system preference changes, addressing the "ghost button over photographic backgrounds" guidance in the specification.

Automated Validation with axe-core in React

Integrate runtime verification using the axe-core library to catch violations during development. This React component automatically audits the DOM for color-contrast issues after mounting.

import React, { useEffect } from 'react';
import axe from 'axe-core';

export const AccessibleButton = ({
  children,
  className = '',
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  useEffect(() => {
    axe.run(document.body, { runOnly: ['color-contrast'] }, (err, results) => {
      if (results.violations.length) {
        console.warn('Contrast violations:', results.violations);
      }
    });
  }, []);

  return (
    <button className={`bg-indigo-700 text-white py-2 px-4 rounded ${className}`} {...props}>
      {children}
    </button>
  );
};

The axe.run method with the color-contrast rule flags any buttons falling below WCAG AA thresholds, ensuring every rendered instance adheres to the Taste Skill mandate before shipping.

Command-Line Verification with WebAIM

For quick audits without installing dependencies, use a cURL request to the WebAIM Contrast Checker API. Replace the hex values with your button's foreground and background colors.

FG="#FFFFFF"
BG="#1E3A8A"
curl -s "https://webaim.org/resources/contrastchecker/?fcolor=${FG}&bcolor=${BG}" | grep -i "Ratio"

Verify the returned ratio meets ≥ 4.5:1 for normal text or ≥ 3:1 for large text.

Verifying Compliance in Generated Code

When you execute Taste Skill via the CLI wrapper (skill.sh), the model receives the Button Contrast Check directive as part of its system prompt and generates CTA markup pre-validated against WCAG AA standards. However, always perform post-generation verification using one of the runtime checks outlined above—particularly when manually overriding styles or placing buttons over complex imagery.

Summary

• Taste Skill mandates button contrast as a mandatory accessibility checkpoint defined in SKILL.md#L225 and CHANGELOG.md#L56.
• The requirement follows WCAG AA guidelines: 4.5:1 for normal text and 3:1 for large text (≥ 18 px).
• Tailwind CSS utilities like bg-blue-800 on text-white provide compliant color pairings out of the box.
• Ghost buttons require contrasting borders or dark-mode overrides to maintain readability over photographic backgrounds.
• axe-core integration enables automated, runtime contrast validation within React components.
• Always verify AI-generated UI with CLI tools or browser extensions before deployment.

Frequently Asked Questions

What is the exact contrast ratio required for buttons in Taste Skill?

Taste Skill requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text measuring 18 pixels or more. These thresholds align with WCAG AA standards and are enforced as mandatory checks before shipping any call-to-action.

Where is the button contrast rule defined in the Taste Skill repository?

The authoritative rule resides in skills/taste-skill/SKILL.md at line 225, which details the mandatory Button Contrast Check. The feature's introduction is also documented in CHANGELOG.md at line 56, marking it as a core accessibility requirement in the skill's evolution.

How does Taste Skill handle buttons on photographic backgrounds?

The specification recommends adding a contrasting stroke, border, or semi-transparent backdrop/scrim behind ghost or outline buttons when placing them over photographic backgrounds. This ensures the foreground text maintains the required contrast ratio regardless of the underlying image's color variability.

Can I automate contrast checking in a CI/CD pipeline with Taste Skill?

Yes. Incorporate the axe-core validation pattern into your test suite, or use CLI tools like the WebAIM Contrast Checker via cURL within your pipeline scripts. Since Taste Skill generates code designed to meet these standards, automated tests primarily serve as guards against manual style regressions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}