Skip to content
Get packs

Color Contrast Checker

Makes the agent check and fix text and UI color contrast against WCAG accessibility ratios

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist for the WCAG minimum color contrast rules: 4.5:1 for normal text, 3:1 for large text and key UI parts like icons, borders and focus indicators. When you ask the agent to review a page or component, it checks these ratios, explains which elements fail, and suggests darker or lighter colors that pass. It also reminds the agent that opacity-based lightening must be checked as a blended color, and that disabled controls and decorative elements are exempt.

Great for

  • Front-end developers who want a quick accessibility pass on a page or component before release
  • Designers checking whether a brand palette meets WCAG AA for text and UI controls
  • Teams preparing for an accessibility audit who want consistent contrast reasoning

Skip it if

  • Legal or compliance sign-off: the skill gives guidance from WCAG references, not a certified audit, so results still need human or specialist review
  • Projects needing AAA-level compliance by default: the skill mainly targets AA and only mentions the 7:1 AAA threshold briefly
  • Anyone expecting automatic pixel-level measurement: the skill describes checks but does not itself include a measurement script in the files reviewed

Try asking

  • “Check the color contrast of the buttons and body text in this React component and suggest fixes”
  • “Review my landing page CSS for WCAG AA contrast failures on text and input borders”
  • “Which of these brand colors can I use for small text on a white background while still meeting 4.5:1?”
  • “Audit the focus indicators and icon colors in this form for 3:1 non-text contrast”
Step-by-step guide: how to use Color Contrast CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    color-contrast.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip color-contrast.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip color-contrast.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the actual hex colors or the rendered CSS so it can compute ratios rather than guessing.
  • Ask it to check hover, focus and active states too, since the skill asks for those.
  • Verify its final numbers with a browser DevTools contrast checker or WebAIM before shipping.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.