color-contrast
From the author
Load this skill whenever the project contains text, UI components, icons, form controls, data visualisations, or focus indicators — in short, almost every project. Under no circumstances hard-code colour values without verifying contrast ratios. Absolutely always ensure text meets 4.5:1, large text meets 3:1, and non-text UI elements meet 3:1 against adjacent colours. Test in light mode, dark mode, and forced-colors (high contrast) mode.
Install
npx skills add mgifford/accessibility-skills --skill color-contrast -a claude-code
Installs to .claude/skills/color-contrast/ · Each command fetches the skill straight from GitHub with the open skills CLI.
No download: this skill’s licence (AGPL-3.0) does not let us redistribute its files. The install commands fetch them from GitHub instead.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 78
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- light-dark-modemgifford/accessibility-skillsLoad this skill whenever the project supports light/dark mode, colour theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colours that break in alternative themes. Absolutely always test colour contrast in both light and dark themes, and respect user OS-level colour preferences via CSS media queries.Testing★ 57
- Dark Mode Testing PatternsPramodDutta/qaskillsSystematic dark mode testing covering color contrast, theme switching, persistence, media query respect, component-level theming, and image adaptation.Testing★ 240
- design-system-compliancereticlehq/reticleCheck that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.Design★ 1.3K
- color-ops0xDarkMatter/claude-modsColor for developers: color spaces, accessibility contrast, palette generation, CSS color functions, design tokens, dark mode. Triggers on: color, palette, contrast, WCAG, APCA, OKLCH, color-mix, dark mode colors, design tokens, CVD, color blind, P3, sRGB.Design★ 76
- taste-colormadebymustafa/design-tasteColor craft for agent-built interfaces: palette construction in OKLCH, the 60-30-10 discipline, one-accent rule, WCAG 2.2 contrast math, semantic tokens, color-blind-safe pairs, and dark mode mapping. Use whenever picking colors, building palettes, or reviewing UI color. Stack on the design-taste core skill.Design★ 196
- hue-recontonone-ai/tononeAudit existing color usage in a codebase — find inconsistencies, hardcoded values, and contrast failures. Use when asked to "audit our color usage", "find hardcoded hex values", or "check for contrast failures".Other★ 76
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in