skills.rest
etak-ai
etak-aiOFFICIAL
Explore all skills by this author →
GitHub

contrast-checker

Analyze color contrast in code files for WCAG 2.1 compliance.

Updated Aug 27, 2026
Search Tags:#code analysis#accessibility#UI development#color contrast#WCAG compliance
One-click install
npx skills add https://github.com/etak-ai/etak-app --skill contrast-checker-etak-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contrast-checker
Source: https://github.com/etak-ai/etak-app/tree/main/.agents/skills/contrast-checker
Command: npx skills add https://github.com/etak-ai/etak-app --skill contrast-checker-etak-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp__accesslint__calculate_contrast_ratio, mcp__accesslint__analyze_color_pair, mcp__accesslint__suggest_accessible_color, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps analyze color contrast in code files for WCAG compliance, providing actionable recommendations to improve accessibility while preserving design aesthetics.

Core Features & Use Cases

  • Color Contrast Analysis: Calculates contrast ratios and identifies violations in color pairs.
  • Accessibility Suggestions: Suggests accessible color alternatives that maintain design themes.
  • Use Case: When analyzing color contrast in UI components, this Skill can automatically check and suggest fixes for non-compliant colors.

Quick Start

Check the color contrast in the 'src/components/PrimaryButton.tsx' file.

Frequently Asked Questions about contrast-checker

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

FAQPage Schema
How do I check color contrast for WCAG compliance in my UI components?▼

Calculating contrast ratios for WCAG 2.1 compliance involves analyzing styling files within your codebase to identify color pair violations. The analysis automatically suggests accessible color alternatives that preserve your original design aesthetics while meeting accessibility standards.

How does color contrast analysis suggest accessible colors without ruining my design?▼

Color contrast analysis suggests accessible colors by evaluating your existing color pairs and recommending alternatives that maintain your design themes. It calculates precise contrast ratios to ensure new color suggestions meet WCAG 2.1 standards while preserving the visual aesthetic.

Can I analyze color contrast directly within my existing code files?▼

Yes, you can analyze color contrast directly within your existing code files. The analysis requires access to color analysis tools and the styling files within your specified codebase to automatically check UI components like buttons for non-compliant colors.

What is the best way to find WCAG 2.1 color contrast violations in a codebase?▼

The best way to find WCAG 2.1 color contrast violations is to run an automated analysis on your styling files. This calculates contrast ratios for color pairs, identifies exact violations, and provides actionable recommendations for accessible color replacements.

Why does my UI color pair fail WCAG compliance checks?▼

Your UI color pair fails WCAG compliance checks because its calculated contrast ratio falls below the required threshold. Analyzing the specific color pair identifies the exact violation and suggests an accessible alternative that meets the standard.

Related Skills

Explore More Software Engineering Skills→
lsst-sqrelsst-sqre
2

wcag-contrast-checker

Compute WCAG contrast ratios and AA/AAA compliance for CSS colors.

Official
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
frap129frap129
8

executing-plans

Load, review, and execute plan tasks in batches with verification checkpoints.

Community
Intermediate
vosslabvosslab
2

color-accessibility-expert

Detect and fix color contrast issues in code and images using WCAG ratios.

Community
Advanced