Agent skill

Color Accessibility Guide

by wentorai in wentorai/research-plugins

Colorblind-friendly palettes and accessible visualization design

MITAuto-check passedFrontend & Design

Install Color Accessibility Guide

skills CLI
$ npx skills add wentorai/research-plugins --skill color-accessibility-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install wentorai/research-plugins color-accessibility-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .claude/skills/color-accessibility-guide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
color-accessibility-guide
GitHub stars
298
Used in
1 other repo
Token cost
~1.8k tokens
SKILL.md length
370 words
Files
1
Skills in repo
405
Repo updated
First seen
Licence
MIT

At a glance

Colorblind-friendly palettes and accessible visualization design

  • Works in 3 steps: Data-Ink Ratio → Redundant Encoding → Line Style Differentiation
  • Tasks that involve Accessibility
  • SKILL.md covers Color Vision Deficiency Overview, Recommended Colorblind-Safe…, Design Principles for… and Checking Your Visualizations, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Color Accessibility Guide is an agent skill from wentorai/research-plugins. Colorblind-friendly palettes and accessible visualization design

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility and Data visualization. The repository describes itself as: 350+ academic research skills, MCP configs, and plugins for Research-Claw and AI agents. The licence is MIT.

When your agent uses it

  • Tasks that involve Accessibility
  • Tasks that involve Data visualization

Example prompts

  • “/color-accessibility-guide”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Data-Ink Ratio
  2. Redundant Encoding
  3. Line Style Differentiation

What it can do on your machine

Read from SKILL.md and the folder at commit bf44b3c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are python).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Color Accessibility Guide loads about 1.8k tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 370 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from wentorai/research-plugins at commit bf44b3c, republished under its MIT licence (© wentorai). 370 words, ~1,845 tokens.

Download SKILL.mdSave it as .claude/skills/color-accessibility-guide/SKILL.md (or your agent's skills folder).
name
color-accessibility-guide
description
Colorblind-friendly palettes and accessible visualization design

Color Accessibility Guide

Design data visualizations that are accessible to colorblind readers and follow best practices for clarity, using tested palettes and encoding principles.

Color Vision Deficiency Overview

Approximately 8% of males and 0.5% of females have some form of color vision deficiency (CVD). The most common types:

TypePrevalence (Male)Affected ColorsCommonly Confused
Deuteranomaly (green-weak)5%GreenRed and green
Protanomaly (red-weak)1%RedRed and green
Deuteranopia (no green)1%GreenRed and green
Protanopia (no red)1%RedRed and green
Tritanopia (no blue)0.003%BlueBlue and yellow
MonochromacyVery rareAllAll colors

Key takeaway: Never rely solely on a red-green distinction to convey information. About 1 in 12 male readers cannot distinguish them.

Qualitative Palettes (Categorical Data)
Wong (2011) Nature Palette (8 colors)

Widely recommended for scientific publications:

python
# Wong's colorblind-friendly palette
wong_palette = {
    "black":       "#000000",
    "orange":      "#E69F00",
    "sky_blue":    "#56B4E9",
    "bluish_green":"#009E73",
    "yellow":      "#F0E442",
    "blue":        "#0072B2",
    "vermillion":  "#D55E00",
    "reddish_purple":"#CC79A7"
}
Okabe-Ito Palette
python
okabe_ito = ["#E69F00", "#56B4E9", "#009E73", "#F0E442",
             "#0072B2", "#D55E00", "#CC79A7", "#000000"]
Tol's Qualitative Palette
python
# Paul Tol's qualitative palette (up to 12 distinct colors)
tol_qualitative = ["#332288", "#88CCEE", "#44AA99", "#117733",
                   "#999933", "#DDCC77", "#CC6677", "#882255",
                   "#AA4499", "#661100", "#6699CC", "#888888"]
Sequential Palettes (Ordered Data)

For continuous data, use perceptually uniform colormaps:

python
import matplotlib.pyplot as plt

# Recommended sequential colormaps
# These are perceptually uniform and colorblind-safe:
good_cmaps = ["viridis", "plasma", "inferno", "magma", "cividis"]

# Avoid these (not perceptually uniform, not colorblind-safe):
bad_cmaps = ["jet", "rainbow", "hsv"]  # NEVER use these

# Example usage
import numpy as np
data = np.random.randn(10, 10)
fig, ax = plt.subplots(figsize=(8, 6))
im = ax.imshow(data, cmap="viridis")
plt.colorbar(im)
plt.title("Use viridis, not jet")
plt.savefig("heatmap.pdf", dpi=300, bbox_inches="tight")
Diverging Palettes (Data with Meaningful Center)
python
# Colorblind-safe diverging palettes
# Blue-to-Red via white (good for temperature, correlation)
import matplotlib.colors as mcolors

# Built-in matplotlib options:
diverging_safe = ["RdBu_r", "PuOr_r", "BrBG"]

# Custom two-color diverging (Tol):
tol_diverging = ["#364B9A", "#4A7BB7", "#6EA6CD", "#98CAE1", "#C2E4EF",
                 "#EAECCC", "#FEDA8B", "#FDB366", "#F67E4B", "#DD3D2D", "#A50026"]

Design Principles for Accessible Visualization

1. Data-Ink Ratio

Edward Tufte's principle: maximize the proportion of ink used to display actual data.

python
import matplotlib.pyplot as plt

fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(12, 5))

# BAD: Low data-ink ratio (chartjunk)
ax1.bar(range(5), [3, 7, 2, 5, 8], color="blue", edgecolor="black",
        linewidth=2)
ax1.set_facecolor("#EEEEEE")
ax1.grid(True, color="white", linewidth=2)
ax1.set_title("Before: Low Data-Ink Ratio")

# GOOD: High data-ink ratio
ax2.bar(range(5), [3, 7, 2, 5, 8], color="#0072B2", edgecolor="none")
ax2.spines["top"].set_visible(False)
ax2.spines["right"].set_visible(False)
ax2.set_title("After: High Data-Ink Ratio")

plt.tight_layout()
plt.savefig("data_ink_ratio.pdf", dpi=300)
2. Redundant Encoding

Never use color as the sole channel for conveying information. Combine color with at least one other visual channel:

ChannelExamples
ShapeCircles, squares, triangles for different groups
PatternSolid, dashed, dotted lines
Fill patternHatching, cross-hatching for bar charts
LabelDirect text labels on or near data points
PositionSeparate panels (facets) for each group
SizeVarying point sizes
python
import matplotlib.pyplot as plt

markers = ['o', 's', '^', 'D']  # Different shapes
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7']
labels = ['Group A', 'Group B', 'Group C', 'Group D']

fig, ax = plt.subplots(figsize=(8, 6))
for i in range(4):
    ax.scatter(x[i], y[i], c=colors[i], marker=markers[i],
               s=80, label=labels[i], edgecolors='black', linewidth=0.5)

ax.legend()
ax.set_xlabel("X Variable")
ax.set_ylabel("Y Variable")
plt.savefig("redundant_encoding.pdf", dpi=300)
Show full SKILL.md (126 more words)Show less
3. Line Style Differentiation
python
line_styles = ['-', '--', '-.', ':', (0, (3, 1, 1, 1))]
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7', '#E69F00']

fig, ax = plt.subplots(figsize=(8, 5))
for i in range(5):
    ax.plot(x, data[i], color=colors[i], linestyle=line_styles[i],
            linewidth=2, label=f"Method {i+1}")

ax.legend()

Checking Your Visualizations

Simulation Tools
ToolPlatformURL
CoblisWebcolor-blindness.com/coblis
Color OracleDesktop (Win/Mac/Linux)colororacle.org
Sim DaltonismmacOSmichelf.ca/projects/sim-daltonism
ColorblindlyChrome extensionChrome Web Store
Matplotlib CVD simulationPythonSee code below
Programmatic CVD Simulation
python
from colorspacious import cspace_convert
import numpy as np

def simulate_cvd(rgb_hex, deficiency="deuteranomaly", severity=100):
    """Simulate how a color appears to someone with CVD."""
    # Convert hex to RGB [0,1]
    rgb = np.array([int(rgb_hex[i:i+2], 16)/255 for i in (1, 3, 5)])

    # Convert using colorspacious
    cvd_space = {"name": "sRGB1+CVD",
                 "cvd_type": deficiency,
                 "severity": severity}
    rgb_cvd = cspace_convert(rgb, cvd_space, "sRGB1")
    rgb_cvd = np.clip(rgb_cvd, 0, 1)

    return "#{:02x}{:02x}{:02x}".format(*[int(c*255) for c in rgb_cvd])

# Test your palette
for color in ["#FF0000", "#00FF00", "#0072B2", "#D55E00"]:
    sim = simulate_cvd(color)
    print(f"{color} -> {sim} (deuteranomaly)")

Quick Reference: Do's and Don'ts

DoDon't
Use Wong or Okabe-Ito palettesUse red vs. green to distinguish categories
Use viridis/cividis colormapsUse jet/rainbow colormaps
Add shape/pattern as redundant encodingRely on color alone
Use direct labels when possibleForce readers to match colors to legend repeatedly
Test with CVD simulatorsAssume your color choices work for everyone
Use high contrast (WCAG AA: 4.5:1 ratio)Use light colors on white backgrounds
Keep maximum 7-8 colors in categorical chartsUse 15+ colors that are impossible to distinguish

© wentorai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/analysis/dataviz/color-accessibility-guide of wentorai/research-plugins.

Open the folder on GitHubat commit bf44b3c

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in wentorai/research-plugins, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Color Accessibility Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Color Accessibility Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Color Accessibility Guide this skillwentorai/research-plugins2981 repos~1.8kAutomated safety check: PassMIT
Data-Dense Dashboard Designerplugin87/ux-ui-agent-skills1.6k—~2.6kAutomated safety check: PassMIT
Blog ChartAgriciDaniel/claude-blog2.3k—~2.4kAutomated safety check: PassMIT
Visualizing Dataancoleman/ai-design-components525—~2.4kAutomated safety check: PassMIT
Md Reviewborghei/Claude-Skills891—~3.8kAutomated safety check: PassMIT
Kb Data Visualization AccessibilityCommunity-Access/accessibility-agents423—~1.8kAutomated safety check: PassMIT

Similar skills

  • Data-Dense Dashboard Designer

    plugin87/ux-ui-agent-skills

    Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.

    1.6k GitHub stars~2.6k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Blog Chart

    AgriciDaniel/claude-blog

    Generate dark-mode-compatible inline SVG data visualization charts for blog posts.

    2.3k GitHub stars~2.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Visualizing Data

    ancoleman/ai-design-components

    Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics.

    525 GitHub stars~2.4k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed
  • Md Review

    borghei/Claude-Skills

    Pre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology.

    891 GitHub stars~3.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Kb Data Visualization Accessibility

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~1.8k tokensUpdated 16 days ago
    Frontend & DesignAuto-check passed
  • Data Visualization Accessibility

    Community-Access/accessibility-agents

    Charts, graphs and dashboards: SVG ARIA, table alternatives, safe palettes.

    423 GitHub stars~425 tokensUpdated 16 days ago
    Frontend & DesignAuto-check passed

More from wentorai/research-plugins

All 405 skills in this repo
  • Abstract Writing Guide

    wentorai/research-plugins

    Craft structured research abstracts that maximize clarity and journal acceptance

    298 GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed
  • Academic Citation Manager

    wentorai/research-plugins

    Manage academic citations across BibTeX, APA, MLA, and Chicago formats

    298 GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed
  • Academic Paper Summarizer

    wentorai/research-plugins

    Summarize academic papers with structured extraction of key elements

    298 GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed
  • Academic Study Methods

    wentorai/research-plugins

    Evidence-based study techniques for academic learning and retention

    298 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • Academic Tone Guide

    wentorai/research-plugins

    Adjust writing tone and register for academic audiences and venues

    298 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Academic Translation Guide

    wentorai/research-plugins

    Academic translation, post-editing, and Chinglish correction guide

    298 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Questions about Color Accessibility Guide

What does Color Accessibility Guide do?

Colorblind-friendly palettes and accessible visualization design. Color Accessibility Guide is an agent skill from wentorai/research-plugins.

When should I use Color Accessibility Guide?

Color Accessibility Guide fits situations like: tasks that involve Accessibility; tasks that involve Data visualization.

How do I install Color Accessibility Guide in Claude Code?

Run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a claude-code`. Or copy the skill folder (skills/analysis/dataviz/color-accessibility-guide in wentorai/research-plugins) into .claude/skills/color-accessibility-guide in your project. Claude Code loads it when a task matches its description.

How do I install Color Accessibility Guide in Codex?

Run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a codex`. Or copy the skill folder (skills/analysis/dataviz/color-accessibility-guide in wentorai/research-plugins) into .agents/skills/color-accessibility-guide in your project. Codex loads it when a task matches its description.

Can I use Color Accessibility Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/color-accessibility-guide, .gemini/skills/color-accessibility-guide, .github/skills/color-accessibility-guide and .opencode/skills/color-accessibility-guide in your project.

What does Color Accessibility Guide need to run?

SKILL.md names no scripts, command-line tools or credentials: Color Accessibility Guide is instructions for the agent only. Our summary lists: Python 3.

Does Color Accessibility Guide access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Color Accessibility Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Color Accessibility Guide use?

Color Accessibility Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Color Accessibility Guide use?

About 1.8k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Color Accessibility Guide?

Skills that share tags, products or a category with Color Accessibility Guide: Data-Dense Dashboard Designer (plugin87/ux-ui-agent-skills, 1.6k stars), Blog Chart (AgriciDaniel/claude-blog, 2.3k stars), Visualizing Data (ancoleman/ai-design-components, 525 stars) and Md Review (borghei/Claude-Skills, 891 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Color Accessibility Guide?

wentorai (a GitHub user) maintains it in wentorai/research-plugins, which has 298 GitHub stars. The repository holds 405 skills in this directory. The repository was last updated on June 19, 2026.

Source: wentorai/research-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.