Stats
Actions
Tags
From harness-claude
Designs colorblind-safe palettes, audits UI for WCAG 2.1 SC 1.4.1 compliance, and selects redundant encodings so color never carries information alone.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:design-color-accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Color independence — conveying information without relying on color alone, building colorblind-safe palettes, and ensuring perceptual uniformity across all vision types
Color independence — conveying information without relying on color alone, building colorblind-safe palettes, and ensuring perceptual uniformity across all vision types
Understand the types and prevalence of color vision deficiency (CVD). Do not design for "colorblindness" as a monolith — there are distinct types with different impact:
| Type | Affected Cones | Prevalence (Male/Female) | Colors Confused | Safe Alternatives |
|---|---|---|---|---|
| Deuteranopia (green-blind) | M-cones (green) | 6% / 0.4% | Red-green, brown-green, teal-gray | Blue-orange, blue-yellow |
| Protanopia (red-blind) | L-cones (red) | 1% / 0.01% | Red-green, red-brown, purple-blue | Blue-orange, blue-yellow |
| Tritanopia (blue-blind) | S-cones (blue) | 0.003% / 0.003% | Blue-yellow, purple-red, green-cyan | Red-blue, red-green |
| Achromatopsia (total) | All cones | 0.003% / 0.003% | All hues — sees only lightness | Lightness differences only |
Key insight: red-green confusion affects approximately 8% of males. This means in a room of 25 people, 1-2 will not be able to distinguish your red error state from your green success state by color alone. This is not an edge case — it is a significant portion of your user base.
Never use color as the sole means of conveying information. This is WCAG 2.1 SC 1.4.1 — a Level A requirement (the most basic tier). Every piece of information conveyed by color must also be conveyed by at least one additional channel:
| Color-Only (Fails) | Color + Redundant Encoding (Passes) |
|---|---|
| Red/green dot for online/offline | Dot + "Online"/"Offline" text label |
| Colored bar chart series | Color + pattern (stripes, dots, crosshatch) + legend |
| Red border on invalid input | Red border + error icon + error message text |
| Green/red text for pass/fail | Color + checkmark/X icon + "Pass"/"Fail" label |
| Calendar events coded by color | Color + category letter/icon + tooltip |
| Link text distinguished only by blue color | Blue color + underline (or 3:1 contrast vs surrounding text) |
Choose colorblind-safe color pairs. When two elements must be distinguishable by color (in addition to a redundant encoding), select pairs that survive all common CVD types:
Safe universal pairs (distinguishable under deuteranopia, protanopia, and tritanopia):
#2563EB) and orange (#EA580C) — the most reliable safe pair#2563EB) and red (#DC2626) — safe for red-green CVD (the most common)#1E3A5F) and yellow (#EAB308) — high lightness contrast as backup#7C3AED) and yellow-green (#A3E635) — different lightness + different hue regionUnsafe pairs (fail for common CVD types):
#DC2626) and green (#16A34A) — indistinguishable for deutan/protan (8% of males)#16A34A) and brown (#92400E) — merge for deutan#DC2626) and brown (#92400E) — merge for protan#2563EB) and purple (#7C3AED) — merge for tritan#EC4899) and gray (#6B7280) — insufficient lightness contrast for achromatopsiaDesign data visualizations for color independence. Charts are the most common color accessibility failure. A line chart with 5 color-coded series is useless for colorblind users if color is the only differentiator.
Visualization accessibility checklist:
IBM's accessible palette for data visualization provides 8 distinct colors all designed to remain distinguishable under deuteranopia and protanopia: #6929C4, #1192E8, #005D5D, #9F1853, #FA4D56, #570408, #198038, #002D9C. These were specifically tested under CVD simulation.
Use perceptually uniform color spaces for palette generation. Standard RGB and HSL spaces are not perceptually uniform — equal numeric steps do not produce equal visual differences. This matters for accessibility because colorblind users may rely on lightness differences when hue is indistinguishable.
OKLCH is the recommended perceptually uniform space:
When generating accessible palettes, ensure that each color in the palette has a distinct OKLCH Lightness value. If two colors must be distinguishable, they should differ by at least 0.15 in OKLCH Lightness (or ~15 units in CIELAB L*). This guarantees that even under total color blindness (achromatopsia), the values remain separable.
Test with CVD simulation tools. Do not assume your palette is accessible — verify it:
colorblind-check npm package for automated CI testingWCAG SC 1.4.1 states: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." This is Level A — the absolute baseline. Failing this criterion means failing the most fundamental accessibility standard.
Common violations that pass unnoticed in design review:
The standard semantic colors (red=error, yellow=warning, green=success, blue=info) are problematic because red and green are the most commonly confused pair. Solutions:
Always pair with icons: Error = red + X icon, Success = green + checkmark, Warning = amber + triangle icon, Info = blue + (i) icon. The icon alone must be sufficient to communicate the state.
Ensure lightness differentiation: Even if hue is lost, the lightness should differ. Error red at L:45%, warning amber at L:65%, success green at L:55%, info blue at L:50%. Under achromatopsia, these become four distinct grays.
Use distinct shapes for status badges: Error = circle, Warning = triangle, Success = shield/checkmark, Info = square. Material Design uses shape as a primary differentiator for chip states — selected chips change both color AND shape (adding a checkmark).
Traditional HSL is perceptually non-uniform: hsl(60, 100%, 50%) (yellow) appears far brighter than hsl(240, 100%, 50%) (blue) despite identical L values. This means a palette with "equal" HSL steps will have wildly different perceived lightness, causing colorblind users (who rely on lightness) to lose information.
OKLCH fixes this. In OKLCH, L:0.7 looks equally bright regardless of hue. A palette generated with equal OKLCH Lightness spacing guarantees that even under complete color blindness, the lightness progression is perceivable. Modern CSS supports OKLCH natively: color: oklch(0.7 0.15 250).
Traffic Light Reliance. Using red/yellow/green as the primary semantic system without any redundant encoding. This is the single most common color accessibility failure. Approximately 1 in 12 males cannot reliably distinguish your red from your green. Fix: add icons (X, triangle, checkmark), add text labels, and ensure the three colors have distinct lightness values (not all at L:50%).
Hue-Only Chart Differentiation. A pie chart with 5 slices distinguished only by hue. Under deuteranopia, 2-3 slices may become indistinguishable. Fix: add patterns, direct labels, or interactive tooltips. Limit to 3-4 color-only slices maximum, and ensure they span safe pairs (blue, orange, purple, yellow — not red, green, brown, olive).
Red-Green as Primary Semantic Pair. Using red and green as the two most important status colors without alternatives. Even when icons are added, if the icon is small and the color fill is dominant, colorblind users may struggle with rapid scanning. Fix: consider blue (safe) for the positive state and red (universal danger) for the negative state — blue and red are distinguishable under all common CVD types.
Decorative Color Dependency. Calendar apps that use color-coded categories without any text or icon label. When 8 calendar categories are distinguished only by color, a colorblind user sees perhaps 4 distinguishable groups. Fix: add category initials, icons, or pattern fills in addition to color.
Ignoring Achromatopsia. Designing for red-green colorblindness but forgetting total color blindness. If two elements differ in hue but have identical lightness, an achromatopsic user sees them as identical. Fix: ensure every meaningful color distinction also has a lightness distinction of at least 15 OKLCH L units (or ~20 CIELAB L* units).
Material Design — Shape + Color for States. Material Design 3 chips use both color and shape to indicate selection state. An unselected chip has an outlined border with transparent fill. A selected chip gains a tinted fill AND a leading checkmark icon. The checkmark alone communicates "selected" without any color perception. This dual-encoding approach is applied consistently across the entire component library: radio buttons (filled circle), checkboxes (checkmark), toggles (position + fill), and tabs (underline + fill).
Stripe — Triple Encoding for Error States. Stripe's form validation uses three simultaneous channels: (1) the input border turns red (#DF1B41), (2) an error icon appears to the left of the error message, (3) descriptive error text appears below the input. A colorblind user who cannot perceive the red border still receives the error through the icon and text. This triple-encoding is not defensive — it is better design for all users because it provides faster error recognition through multiple cognitive channels.
IBM Carbon — Accessible Data Visualization. IBM's Carbon design system includes an 8-color categorical palette specifically tested under all CVD types. Each color was selected to maintain distinctness under deuteranopia, protanopia, and tritanopia simulation. Additionally, Carbon's chart components default to pattern fills for area charts and shape markers for line charts — making color truly supplementary rather than primary.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudePrompts you to add non-colour encoding (text, icons, patterns) to UI elements so colour vision deficient users get the same information.
Ensures text and UI components meet WCAG contrast ratios (AA/AAA) and avoids color-only information conveyance.
Ensures WCAG 2.1 AA contrast ratios and adds non-color indicators (icons, patterns, labels) for accessibility. Use when choosing color combos, designing UI states, or building data visualizations.