color-accessibility-and-mode

What problem does it solve?

This skill helps you create color systems that remain readable and compliant across WCAG requirements, color-blindness conditions, and user-controlled display preferences like dark mode and high-contrast/forced-colors.

Core Features & Use Cases

• WCAG contrast validation: guides you to check and achieve AA/AAA contrast for body text, large text, and non-text UI elements.
• Color-blindness resilient signaling: prevents relying on red/green hue alone by using additional cues like text, icons, or patterns.
• Mode parity (light/dark): avoids naive inversion and recommends tuned dark-mode neutrals, saturation adjustments, and rechecking contrast in both schemes.
• High-contrast and forced-colors support: ensures usability when OS/browser accessibility modes override page colors and hide backgrounds.
• Motion/transition safety: reduces risk from rapid color/flash transitions and supports prefers-reduced-motion.

Quick Start

Use this skill when auditing or selecting text and UI colors for an interface that must support dark mode, high-contrast preferences, and color-blind accessibility, and ask it to produce an accessibility-aware palette and a checklist of required contrast validations.