A skill that makes Claude check a design against WCAG 2.2 AA the way an accessibility reviewer does before it ships. It measures every text, icon and control colour pair from the hex values, samples text sitting on photos, and gives the nearest passing colour for each failure while keeping your hue. It converts type sizes into what a phone really shows, finds meaning carried by colour alone, checks focus states and tap targets on screens, writes alt text you can paste, checks captions, and screens GIFs and video for flashing. You finish with one ranked list of fixes with exact values.
Inside is a tested Python script that Claude runs with code execution: contrast ratios, colour fixes, a palette pairing table, text-on-photo sampling, a colour-blind simulation, social type conversion and a flash screen. Reference files hold the WCAG 2.2 figures, Apple and Android minimums, caption specs, platform alt text limits, and which US and EU rules name which WCAG version, each with its source and the date checked. Its rules are strict. Every number is measured, thresholds are never rounded, brand colours move by the smallest step, and nothing is ever called compliant.
It checks designs, not built code, so keyboard order, screen reader output and zoom on a device become test steps in the report rather than findings. Without code execution it works the numbers by hand and says so. Colours sampled from screenshots can drift by a few steps, so hex codes from your design file give the best result. It reads GIFs directly, but an MP4 depends on the video tools in Claude's sandbox. Send every state you have, hover, error and dark mode included, and run it again on the revised files before handoff.
Claude skill · version 1.0
Accessibility check
Checking your access.
In the download · 9 files
- SKILL.mdThe method Claude follows, stage by stage, from scope and contrast to type, colour-only meaning, interaction, media and the ranked report.
- README.mdHow to install it in claude.ai or Claude Code, how to start, and the licence.
- references/wcag-figures.mdWCAG 2.2 AA figures, Apple and Android minimums, house defaults, and which US and EU rules name which WCAG version, each with its source and the date checked.
- references/measuring.mdHow to run each measurement and read the results, the hand method and ready-made grey and colour tables for when code execution is off, and the pitfalls that give wrong numbers.
- references/a11y-script.mdA tested Python script for contrast ratios, nearest passing colours, palette pairings, text over photos, colour-blind simulation, social type sizes and a flash screen.
- references/social-and-motion.mdAlt text rules and examples, where alt text goes on each platform and its limits, the caption spec, and motion and flash rules, with sources.
Install it and begin
01Install it in Claude CodeTerminal mkdir -p ~/.claude/skillsunzip ~/Downloads/accessibility-check.zip -d ~/.claude/skills/# Start it with /accessibility-check. If this is your first skill, type /reload-skills once.On claude.ai there is nothing to unzip: upload the zip as it is. Every step is on Install and use a Claude skill.
02Your first message to ClaudeText Use the accessibility check skill. I'm checking [WHAT, E.G. 6 MOBILE CHECKOUT FRAMES] that people will see on [WHERE, E.G. PHONES AND INSTAGRAM]. Our brand colours are [HEX CODES, OR SEE ATTACHED]. The standard is [WCAG 2.2 AA UNLESS YOU KNOW ANOTHER]. The files are attached. Start with the scope and tell me what you can and cannot check.Attach design exports or screenshots, the post or video, and your colour styles as hex codes. Turn on code execution so Claude measures rather than estimates.
Common mistakes
Where accessibility checks go wrong
Instead ofJudging contrast by eye, or treating 4.48:1 as near enough to 4.5:1.
Do thisMeasure every pair from the hex values. WCAG thresholds are never rounded, so aim for 4.6:1 and an export cannot tip it under.
Instead ofChecking the body text and forgetting button labels, placeholders, input borders, focus rings and hover states.
Do thisList every pair first, every state included. Labels need 4.5:1; input borders, icons and focus rings need 3:1 against what sits next to them.
Instead ofJudging a social post at design size, where 28 px body copy looks fine on a 1080 px canvas.
Do thisConvert to what a 360 px wide phone shows. 28 px becomes about 9 CSS px; body copy needs 48 px on that canvas.
Instead ofWhite headline on a photo because it reads well over the dark half.
Do thisJudge the worst 5% of the area behind the text, then add the overlay that fixes it, often 25 to 40% black, or move the line.
Instead ofStatus shown by red and green dots, and links marked by colour alone.
Do thisAdd a word, an icon or an underline. About 1 in 12 men cannot rely on the colour difference.
Instead ofFixing a failing brand colour by swapping in a different colour altogether.
Do thisMove the colour that carries text by the smallest step, or add one darker tint token, and keep the signature colour for fills.
Instead ofTrusting auto captions and cutting to a white flash on the beat.
Do thisCorrect every caption line, burn them in at 48 px or more on a 1080 px wide video, and keep flashing to three times a second or fewer.
What to do it with
- ClaudeFree tier, paid above it
A language model that writes, edits, reads long documents and runs tools, including agents that work inside a codebase.
Bad at It is agreeable by default, so it will improve a bad idea instead of telling you it is bad. Ask it to argue against you and the quality of the answer changes.
- Claude CodeSubscription
An agent that reads a whole repository, edits files, runs the tests and explains what it changed.
Bad at It is fast enough to make a large mistake quickly. Work on a branch, read the diff, and never let it push. Watch the starting mode: on Pro, Max and Team plans it opens in auto mode, which Anthropic's own list says may read a .env file and send the key in it to the API that key belongs to. Switch it off.
Why it matters
WebAIM's 2026 survey found low-contrast text on 83.9% of the top million home pages, and it is the failure a designer can fix fastest. Asked in a general chat, Claude tends to estimate a ratio or suggest more contrast. This skill makes it measure each pair, show the number against the rule, and hand back the exact hex value, size or wording that passes, with your brand colours kept where they matter.
- Type
- technique
- Period
- ongoing