color-contrast

Audit CSS color tokens and fix WCAG contrast issues across light, dark, and forced-colors modes.

39|2|Updated Mar 28, 2026

Search Tags:#accessibility #wcag #contrast #theme #design-system #color-contrast

Ready to run

npx skills add https://github.com/mgifford/accessibility-skills --skill color-contrast-mgifford

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color-contrast
Source: https://github.com/mgifford/accessibility-skills/tree/main/skills/color-contrast
Command: npx skills add https://github.com/mgifford/accessibility-skills --skill color-contrast-mgifford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures that color choices across text, UI components, icons, and controls meet WCAG contrast requirements, preventing readability issues and inaccessible interfaces.

Core Features & Use Cases

Enforces WCAG 2.x contrast thresholds (4.5:1 for normal text, 3:1 for large text and non-text UI) across light, dark, and forced-colors modes.
Guides safe color token usage and focus indicators to maintain visibility in all themes.
Use Case: Audit a web app's color palette and update CSS variables so all components remain readable for users with low vision.

Quick Start

Audit your project's color palette and update CSS variables to meet contrast requirements across light, dark, and high-contrast modes.

Frequently Asked Questions about color-contrast

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

FAQPage Schema

How do I fix color contrast issues to meet WCAG requirements in my web app?▼

To fix color contrast issues for WCAG compliance, audit your project's color palette and update CSS color tokens to enforce thresholds like 4.5:1 for normal text and 3:1 for large text across light, dark, and forced-colors modes.

What WCAG contrast ratio do UI components and non-text elements need?▼

WCAG contrast requirements mandate a minimum 3:1 contrast ratio for non-text UI components, icons, and indicators to ensure visibility. This applies alongside the 4.5:1 threshold for standard text across all theme environments.

Can I validate color contrast across light, dark, and forced-colors modes?▼

Yes, you can validate color contrast across light, dark, and forced-colors modes by systematically checking CSS color tokens. This ensures text and UI components maintain readable contrast thresholds for users with low vision in any theme.

How do I maintain focus indicator visibility when updating CSS color tokens?▼

Maintaining focus indicator visibility requires guiding safe CSS color token usage to preserve contrast thresholds. Systematic contrast validation ensures focus indicators remain visible and accessible across light, dark, and forced-colors environments.

What is the best way to audit a design system's color palette for accessibility?▼

The best way to audit a design system's color palette for accessibility is to perform systematic contrast validation on its CSS color tokens. This ensures all text, UI components, and icons meet WCAG 2.x thresholds across all display modes.