color-accessibility_skill

Overview

This skill helps designers and developers create color palettes and UI states that are accessible to all users, including those with color vision deficiencies. It focuses on sufficient contrast, meaningful use of color, and practical testing workflows to validate palettes in real interfaces. The guidance includes standards, simulation checks, and actionable recommendations for inclusive visual design.

How this skill works

The skill inspects color pairs and full palettes for WCAG contrast ratios and flags low-contrast combinations. It simulates common color vision deficiencies (protanopia, deuteranopia, tritanopia) to detect indistinguishable colors and verifies that states and data visualizations remain readable. It returns issues, severity levels, and concrete recommendations such as adding icons, patterns, or adjusting luminance values.

When to use it

• Creating or refining a site or app color palette
• Designing charts, graphs, and data visualizations
• Defining status indicators, form validation states, or alerts
• Building or updating a design system or style guide
• Before QA release to catch accessibility regressions

Best practices

• Meet WCAG AA contrast minimum (4.5:1 for normal text) and prefer AAA where feasible
• Test palettes with color blindness simulators and with real users where possible
• Use redundant cues: labels, icons, patterns, or text in addition to color
• Avoid relying on red/green differences alone; use colorblind-friendly palettes (Okabe-Ito, ColorBrewer)
• Provide visible focus indicators and do not use color alone to indicate state
• Document color usage and validated combinations in the design system

Example use cases

• Selecting an accessible primary/secondary palette for a web app
• Designing multi-series charts that remain distinguishable for colorblind users
• Creating status badges (error, success, warning, info) with icons and sufficient contrast
• Auditing an existing UI for contrast and color-differentiation issues before launch
• Building a form validation system that uses icons and messages in addition to color