Skills
.Work. You
Rest

color-contrast

Community

Deliver WCAG-compliant color pairings instantly.

Design & Creative#accessibility#a11y#WCAG#contrast#color-contrast#color-pairings
Authordylantarre
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps designers and developers ensure accessible color combinations by validating WCAG 2.1 contrast ratios and proposing compliant foreground/background pairings for text and UI elements.

Core Features & Use Cases

  • Contrast validation: Compute precise contrast ratios for normal and large text against multiple background options.
  • Pairing suggestions: Generate accessible color pairings and palettes that meet AA/AAA criteria.
  • Batch analysis: Evaluate entire color palettes to surface compliant alternatives and highlight risky combos.

Quick Start

Provide a foreground color and a background color (e.g., #1a1a1a on #ffffff) to receive a WCAG verdict and recommended accessible alternatives.

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: color-contrast
Download link: https://github.com/dylantarre/design-system-skills/archive/main.zip#color-contrast

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 471,000+ vetted skills library on demand.