skills.rest
Deibler
DeiblerCOMMUNITY
Explore all skills by this author →
GitHub

color-accessibility-and-mode

Design accessible color palettes meeting WCAG contrast, dark mode, and color-blindness requirements.

8|3|Updated May 3, 2026
Search Tags:#design tokens#dark mode#css media queries#high contrast#color blindness#color accessibility#wcag contrast
One-click install
npx skills add https://github.com/Deibler/universal-design-principles --skill color-accessibility-and-mode-deibler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-accessibility-and-mode
Source: https://github.com/Deibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/color-accessibility-and-mode
Command: npx skills add https://github.com/Deibler/universal-design-principles --skill color-accessibility-and-mode-deibler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Color palettes often fail accessibility requirements when contrast ratios, color-blindness compatibility, dark mode, and high-contrast preferences are treated as afterthoughts, producing unreadable text and broken status indicators for millions of users. ## Core Features & Use Cases - WCAG Contrast Guidance: Apply AA and AAA contrast ratios (4.5:1 body text, 3:1 UI components) with practical rules for picking text colors and avoiding common failures like light grey body text. - Dark Mode Palette Design: Build deliberate dark-mode tokens with tinted neutrals, adjusted saturation, and per-mode contrast rechecking instead of pure inversion. - Color-Blindness and Forced-Colors Support: Design status systems that pair hue with icons or text, and handle prefers-contrast, forced-colors, and prefers-reduced-motion media queries. - Use Case: When auditing an existing palette for WCAG and EAA compliance, use this Skill to check every text/background pair, simulate deuteranopia, and produce a token set that passes in light, dark, and high-contrast modes. ## Quick Start Audit my CSS color palette for WCAG AA contrast and generate dark mode and high-contrast token variants.

Frequently Asked Questions about color-accessibility-and-mode

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

FAQPage Schema
How do I check WCAG contrast ratios for my color palette?▼

Run every text/background pair through a contrast checker such as WebAIM, Stark, or Chrome DevTools' contrast inspector. Body text needs 4.5:1 for AA, large text and UI components need 3:1, and AAA requires 7:1 for body text.

How do I design a dark mode color palette?▼

Build dark mode tokens deliberately rather than inverting the light palette. Use a near-black tinted background like hsl(220 10% 8%), off-white text, and reduce saturation of brand colors, then recheck contrast ratios since pairs that pass in light mode may fail in dark.

What contrast ratio does WCAG require for text?▼

WCAG Level AA requires 4.5:1 for body text under 18pt and 3:1 for large text and UI components. Level AAA raises these to 7:1 and 4.5:1 respectively. Non-text elements like form borders and focus rings need 3:1 under criterion 1.4.11.

How do I design colors for color-blind users?▼

Never rely on hue alone for status or meaning; pair color with icons, text, or patterns since red-green blindness affects roughly 6% of men. Test with simulators like Chrome DevTools' vision deficiency emulation, Sim Daltonism, or Color Oracle.

Does forced colors mode affect my website's colors?▼

Yes, Windows Forced Colors Mode overrides your palette with system tokens like Canvas, CanvasText, and ButtonText, and may hide background images. Use semantic elements like <button> so system mappings apply correctly, and test in Edge with High Contrast enabled.

Why does my dark mode look glaring after inverting colors?▼

Pure inversion fails because saturated colors that read fine on white look glaring on dark backgrounds, and pure white on pure black causes halation on OLED screens. Tone down saturation and lightness for dark mode and use tinted neutrals instead of pure black.

Related Skills

Explore More Design & Creative Skills→
xcrrrxcrrr
4

color-palette

Generate accessible brand color palettes with semantic design tokens.

Community
Advanced
mgiffordmgifford
39

color-contrast

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

Community
Advanced
GyananoGyanano
5

quieter

Reduce color saturation, visual weight, and motion in overstimulating interfaces.

Community
Intermediate
c0x12cc0x12c
96

design-intelligence

Generate design tokens, color palettes, typography scales, and component inventories from project context.

Official
Intermediate