a11y-color-contrast

Name: a11y-color-contrast
Availability: InStock
Author: tsuji-tomonori

Validate UI elements for WCAG 2.2 AA color contrast requirements.

1|Updated Feb 11, 2026

Search Tags:#accessibility #a11y #WCAG #color contrast #UI design #visual impairment

Ready to run

npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-color-contrast

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: a11y-color-contrast
Source: https://github.com/tsuji-tomonori/diopside-v3/tree/main/.opencode/skills/a11y-color-contrast
Command: npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-color-contrast

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about a11y-color-contrast

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I check color contrast for WCAG 2.2 AA compliance in UI design?▼

WCAG 2.2 AA color contrast requirements specify a 4.5:1 ratio for normal text and a 3:1 ratio for large text and non-text UI elements. This Skill validates design mockups against these thresholds to ensure readability for visually impaired users.

How do I validate color tokens in a design system for accessibility?▼

Validating color tokens for accessibility involves checking background and foreground pairs against contrast ratio standards. The Skill processes provided UI elements to verify that themes maintain perceivable color-dependent information and focus indicators.

Does this color contrast checker work for non-text UI elements?▼

Yes, this color contrast checker works for non-text UI elements by verifying they meet a 3:1 contrast ratio against adjacent colors. It ensures components like status indicators and focus boundaries are distinguishable for users with visual impairments.

What is the minimum contrast ratio for accessible text in UI components?▼

The minimum contrast ratio for accessible text in UI components is 4.5:1 for normal text and 3:1 for large text. This Skill evaluates your input fields and buttons against these WCAG 2.2 AA standards to guarantee readability.

When should I test UI elements for color vision deficiency compliance?▼

You should test UI elements for color vision deficiency compliance when introducing new color palettes or updating components. The Skill checks for sufficient contrast and alternative representations to ensure information remains perceivable without relying solely on color.