contrast-validator

Validate WCAG AA contrast ratios in React, Vue, or HTML/CSS code.

Updated May 25, 2025

Search Tags:#ui #a11y #frontend #validation #wcag #contrast

Ready to run

npx skills add https://github.com/marcusta/golf-serie --skill contrast-validator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: contrast-validator
Source: https://github.com/marcusta/golf-serie/tree/main/.claude/skills/contrast-validator
Command: npx skills add https://github.com/marcusta/golf-serie --skill contrast-validator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates that foreground text and background color combinations in frontend code meet WCAG AA contrast requirements, reducing accessibility issues in UI before deployment.

Core Features & Use Cases

Contrast checks across common UI tokens and CSS classes to identify low-contrast pairings.
Report generation with violated pairs, suggested fixes, and calculated contrast ratios.
Framework-agnostic guidance applicable to React, Vue, or plain HTML/CSS code during code reviews and design handoffs.

Quick Start

Run the validator on your frontend project to audit color pairs and generate a violations report.

Frequently Asked Questions about contrast-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I validate WCAG AA contrast ratios in my frontend code?▼

To validate WCAG AA contrast ratios, the validator audits foreground and background color combinations across your UI tokens and CSS classes, then outputs a structured report with calculated ratios and recommended fixes.

Does this contrast checker work with React and Vue projects?▼

Yes, this contrast checker provides framework-agnostic guidance that works with React, Vue, and vanilla HTML/CSS projects to identify low-contrast pairings during code reviews and design handoffs.

What is the best way to catch insufficient color contrast in UI components?▼

The best way to catch insufficient color contrast is to run a validator that checks background and text color combinations against common UI tokens, generating a report of violated pairs and suggested fixes.

Can I check accessibility contrast for multiple themes and styles?▼

Yes, you can check accessibility contrast across multiple components, themes, and styles by running the validator on your frontend project to audit all defined color token pairs.

What does a WCAG contrast validation report include?▼

A WCAG contrast validation report includes identified low-contrast foreground and background pairs, their calculated contrast ratios, and recommended fixes to meet accessibility requirements.