Color Accessibility

aj-geddes/useful-ai-prompts/skills/color-accessibility

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Design color palettes that are accessible to all users including those with color blindness. Ensure sufficient contrast, meaningful use of color, and inclusive design.

Instructions onlyDesign & Creative

AI-generated overview

Guides accessible color palette design, contrast checking, and color-blindness testing for interfaces and charts.

What it does: This skill provides guidance for designing color palettes and interfaces that remain usable for people with color vision deficiency. It covers WCAG contrast ratio requirements, color vision deficiency simulation, accessible color usage, and testing and validation practices. It also includes a component template and reference guides, and produces design guidance rather than files or code.
When to use it: Use it when creating color palettes, designing data visualizations, charts or graphs, or testing interface designs for accessibility. It is also relevant for status indicators, alerts, and form validation states where color conveys meaning.
Requirements: No scripts or tools are required; it is instructions and reference documents only. Following the guidance may involve external contrast-checking tools or color-blindness simulators, but these are not bundled.

Overview

Accessible color design ensures all users, including those with color vision deficiency, can access and understand information.

When to Use

Creating color palettes
Designing data visualizations
Testing interface designs
Status indicators and alerts
Form validation states
Charts and graphs

Quick Start

Minimal working example:

yaml

WCAG Contrast Ratios:
WCAG AA (Minimum):  - Normal text: 4.5:1  - Large text (18pt+): 3:1  - UI components & graphical elements: 3:1  - Focus indicators: 3:1
WCAG AAA (Enhanced):  - Normal text: 7:1  - Large text: 4.5:1  - Better for accessibility
---Testing Contrast:
Tools:  - WebAIM Contrast Checker  - Color Contrast Analyzer  - Figma plugins  - Browser DevTools
Formula (WCAG): Contrast = (L1 + 0.05) / (L2 + 0.05)  Where L = relative luminance
// ... (see reference guides for full implementation)

WCAG Contrast Ratios:
WCAG AA (Minimum):  - Normal text: 4.5:1  - Large text (18pt+): 3:1  - UI components & graphical elements: 3:1  - Focus indicators: 3:1
WCAG AAA (Enhanced):  - Normal text: 7:1  - Large text: 4.5:1  - Better for accessibility
---Testing Contrast:
Tools:  - WebAIM Contrast Checker  - Color Contrast Analyzer  - Figma plugins  - Browser DevTools
Formula (WCAG): Contrast = (L1 + 0.05) / (L2 + 0.05)  Where L = relative luminance
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Color Contrast Standards [blocked]	Color Contrast Standards
Color Vision Deficiency Simulation [blocked]	Color Vision Deficiency Simulation
Accessible Color Usage [blocked]	Accessible Color Usage
Testing & Validation [blocked]	Testing & Validation

Best Practices

✅ DO

Ensure 4.5:1 contrast minimum (WCAG AA)
Test with color blindness simulator
Use patterns or icons with color
Label states with text, not color alone
Test with real users with color blindness
Document color usage in design system
Choose accessible color palettes
Use sequential colors for ordered data
Validate all color combinations
Include focus indicators

❌ DON'T

Use color alone to convey information
Create low-contrast text
Assume users see colors correctly
Use red-green combinations
Forget about focus states
Mix too many colors (>5-8)
Use pure red and pure green together
Skip contrast testing
Assume AA is sufficient (AAA better)
Ignore color blindness in testing

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/color-accessibilityat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Color Accessibility

Color Accessibility

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design