skills.rest
aptxaptx
aptxaptxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

contrast-checker

Analyze color contrast in code files for WCAG 2.1 compliance.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#wcag#color contrast#ui design#contrast ratio
One-click install
npx skills add https://github.com/aptxaptx/scamai-landing --skill contrast-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contrast-checker
Source: https://github.com/aptxaptx/scamai-landing/tree/main/.agents/skills/contrast-checker
Command: npx skills add https://github.com/aptxaptx/scamai-landing --skill contrast-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses accessibility issues by analyzing color contrast in UI elements to ensure compliance with WCAG standards, preventing visual impairments for users.

Core Features & Use Cases

  • WCAG Compliance Analysis: Calculates contrast ratios for text and UI components against WCAG 2.1 AA guidelines.
  • Violation Identification: Pinpoints specific color combinations that fail contrast requirements.
  • Accessible Color Suggestions: Provides alternative color values that maintain design themes while meeting accessibility standards.
  • Use Case: When developing a new button component, use this Skill to verify that the text color on the button background meets the 4.5:1 ratio for normal text, and suggest adjustments if it doesn't.

Quick Start

Use the contrast-checker skill to analyze color contrast in the file src/components/Button.tsx.

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?▼

To check color contrast for WCAG compliance, analyze your UI code files to calculate contrast ratios against WCAG 2.1 AA guidelines. This process identifies specific violations where text and background combinations fail the required accessibility ratio.

What is the minimum contrast ratio required for normal text under WCAG 2.1?▼

The minimum contrast ratio required for normal text under WCAG 2.1 AA guidelines is 4.5:1. Color contrast analysis verifies that your UI elements meet this threshold to prevent visual accessibility issues for users.

Can I automatically suggest accessible color alternatives that match my design theme?▼

You can suggest accessible color alternatives that match your design theme by analyzing existing color combinations and generating adjusted color values that meet WCAG 2.1 contrast requirements while preserving the original visual aesthetic.

Does the contrast checker work with React component files like Button.tsx?▼

The contrast checker works with UI component files like Button.tsx by analyzing the code to extract color values and calculate contrast ratios. It verifies that text and background color combinations meet WCAG accessibility standards.

Why does my color combination fail the accessibility audit even though it looks fine?▼

Your color combination fails the accessibility audit because it does not meet the WCAG 2.1 contrast ratio thresholds. Visual appearance alone is insufficient; contrast ratios must be mathematically calculated to ensure compliance for visually impaired users.

Related Skills

Explore More Design & Creative Skills→
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
dylantarredylantarre
38

color-contrast

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

Community
Basic
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic
addyosmaniaddyosmani
2.6k

accessibility

Audit web accessibility and improve WCAG 2.1 conformance across web content.

Community
Advanced