Skills
.Work. You
Rest

color-contrast

Official

Ensure WCAG-compliant color contrast

Design & Creative#design#accessibility#a11y#wcag#contrast#color#palette
AuthorChoreShore
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Identify and fix color combinations that fail WCAG 2.1 contrast requirements so text and UI elements remain legible and accessible across devices and sizes.

Core Features & Use Cases

  • Contrast validation: Calculate relative luminance and contrast ratios for any foreground/background pair and report AA and AAA compliance for normal and large text.
  • Accessible suggestions: Recommend the closest compliant color adjustments (darken/lighten) to meet target contrast thresholds.
  • Palette and batch checks: Evaluate entire color scales or token sets, output contrast matrices, and highlight problematic pairs for designers and developers.
  • Integration scenarios: Use during brand design reviews, front-end styling updates, or automated accessibility audits to ensure buttons, text, and UI components meet contrast rules.

Quick Start

Use the color-contrast skill to check #6b7280 on #ffffff and return the contrast ratio, AA/AAA pass-fail results for normal and large text, and suggested compliant color 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/ChoreShore/Version1/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 223,000+ vetted skills library on demand.