skills.rest
marcusta
marcustaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/marcusta/golf-serie --skill contrast-validator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
inho-teaminho-team
6

Qdesign

Generate DESIGN.md design token specifications from codebases and Tailwind configurations.

Official
Advanced
leonardoteodorooleonardoteodoroo

tailwind-design-system

Create Tailwind v4 design systems with semantic tokens and CVA components.

Community
Advanced
yonatangrossyonatangross
217

storybook-testing

Test Storybook 9/10 components with Vitest, play() interactions, and Chromatic TurboSnap.

Community
Intermediate
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic