skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

38|3|Updated Dec 29, 2025
Search Tags:#accessibility#a11y#WCAG#contrast#color-contrast#color-pairings
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill color-contrast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-contrast
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/accessibility/color-contrast
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill color-contrast

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about color-contrast

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

FAQPage Schema
Can I evaluate an entire color palette for accessibility compliance?▼

To check WCAG color contrast ratios, provide a foreground and background color like #1a1a1a on #ffffff to compute relative luminance and receive a WCAG 2.1 verdict with accessible alternatives.

What is the minimum color contrast ratio needed for large text?▼

Yes, you can batch analyze entire color palettes to evaluate accessibility compliance, which surfaces compliant alternatives and highlights risky color combinations that fail WCAG AA or AAA criteria.

How do I generate accessible color pairings that meet WCAG AA standards?▼

The minimum color contrast ratio for large text is evaluated against WCAG 2.1 requirements, computing precise contrast ratios for normal and large text to determine AA or AAA compliance.

Does this color accessibility checker work for UI components or just text?▼

You generate accessible color pairings by inputting your colors; the tool proposes compliant foreground and background combinations that satisfy WCAG AA and AAA criteria for text and UI elements.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
yash-7575yash-7575

ui-ux-pro-max

Generate UI/UX design recommendations for web and mobile applications.

Community
Advanced
thrillmadethrillmade
1

wcag-contrast

Verify color contrast against WCAG 2.2 AA standards.

Official
Advanced