Skills
.Work. You
Rest

contrast-checker

Community

Ensure WCAG color contrast compliance.

Design & Creative#accessibility#a11y#wcag#color contrast#ui design#contrast ratio
Authoraptxaptx
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: contrast-checker
Download link: https://github.com/aptxaptx/scamai-landing/archive/main.zip#contrast-checker

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.