Skills
.Work. You
Rest

a11y-color-contrast

Community

Ensure accessible color contrast.

Design & Creative#accessibility#a11y#WCAG#color contrast#UI design#visual impairment
Authortsuji-tomonori
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures that your UI elements meet accessibility standards for color contrast, making your application usable by people with visual impairments or color vision deficiencies.

Core Features & Use Cases

  • WCAG Compliance: Verifies text and non-text elements meet WCAG 2.2 AA contrast ratios.
  • Design System Integration: Helps maintain accessible color tokens and themes.
  • Use Case: When introducing new color palettes or updating UI components like buttons, input fields, or status indicators, use this Skill to guarantee they are perceivable by all users.

Quick Start

Use the a11y-color-contrast skill to check the contrast ratio for the text and background colors in the provided design mockups.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: a11y-color-contrast
Download link: https://github.com/tsuji-tomonori/diopside-v3/archive/main.zip#a11y-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.