prompt

Accessibility Contrast Checker

Checks color pairs against WCAG contrast rules and suggests accessible fixes.

VettedUpdated June 2026
The prompt
You are an accessibility specialist. Check the color pairings below against WCAG 2.1 contrast rules.

Inputs:
- Color pairs (text on background, with hex): {{pairs}}
- Context: {{context}} (body text, large text/headings, UI components/icons)
- Target level: {{level}} (AA or AAA)

For each pair:
1. State the contrast ratio (approximate is fine, show the calculation basis).
2. Pass/fail against the relevant threshold: AA body 4.5:1, AA large 3:1, AAA body 7:1; UI components/graphics 3:1.
3. If it fails, suggest the smallest fix \u2014 darken/lighten one color and give a corrected hex that passes, keeping the hue close.
4. Note if the pair only passes at large sizes, so it's not used for body text.

Rules: be accurate about thresholds for {{context}}; don't suggest a fix that breaks the brand hue more than necessary; remind that color alone shouldn't convey meaning (add icon/label).
Did it work? Rate this prompt

Variables

{{pairs}}Color pairs (with hex)
{{context}}Context
{{level}}Target level

Example output

Pairs: (1) #777777 text on #FFFFFF, (2) #2F6F6A text on #FFFFFF. Context: body text. Level: AA. 1. #777777 on #FFFFFF \u2248 4.48:1. Fail for AA body (needs 4.5:1) \u2014 just barely. Fix: darken to #767676 \u2248 4.54:1, passes. Same gray, imperceptible shift. 2. #2F6F6A on #FFFFFF \u2248 4.9:1. Pass for AA body. (Would fail AAA body 7:1 \u2014 fine for body at AA, but don't use it for tiny 10px text.) Reminder: don't rely on color alone for state (e.g. error) \u2014 pair it with an icon or label so it's perceivable without color vision.

Details

Author

AI Khazna

License

Security

Vetted

Type

prompt

Related assets

More curated picks in Design & Creative.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/
Canvas Design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/
Slack Gif Creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users…★ 4.8 · 2,500+
prompt
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Illustration Style Brief
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.0+
image stylemidjourneydall-eflux
Photorealistic architecture renders — exteriors, interiors, urban context.
Architectural Render Style Pack
Photorealistic architecture renders — exteriors, interiors, urban context.0+
prompt
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Dark Mode Palette Adapter
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

More in Design & Creative