Color accessibility
Skill Dragoon0x/everything-design-taste/skills/color-accessibility
Color blindness accommodation, contrast checking, and inclusive color design.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill color-accessibilityAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.2 KB, 267 tokens by cl100k_base, as published. Nobody here has run it
Color Accessibility
Color Vision Deficiency
Types (approximate prevalence in males)
- Deuteranopia (green-blind): 1% — red/green confusion.
- Protanopia (red-blind): 1% — red/green confusion.
- Tritanopia (blue-blind): 0.003% — blue/yellow confusion.
- Achromatopsia (no color): 0.003% — gray only.
Design Rules
- Never use color as the only indicator. Pair with icons, text, patterns.
- Red + green: Always pair with icons (checkmark/X) not just color.
- Test with simulators: Chrome DevTools > Rendering > Emulate vision deficiency.
- Use colorblind-safe palettes: Blue + Orange works for almost everyone.
- Charts: Use patterns/textures alongside colors. Label directly.
Safe Color Combinations
- Blue + Orange (safe for all types).
- Blue + Yellow (safe for most types).
- Dark Blue + Light Blue (value contrast).
Dangerous Combinations
- Red + Green (most common confusion).
- Red + Brown (deuteranopia).
- Blue + Purple (tritanopia).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.