Check my brand colors and typography for accessibility
A contrast matrix and typography review of your style guide, with close-match color fixes and usage rules you can paste in.
The prompt
Check my brand style guide for accessibility and suggest fixes that keep the brand recognizable.
Brand colors: [HEX codes and how each is used - e.g. "#FF6B35 for primary buttons"]
Typefaces and sizes: [FONTS, weights, body and heading sizes]
Where the brand appears: [website, app, slides, social, print, signage]
Target standard: [e.g. "WCAG 2.2 AA", "AAA for body text"]
Elements I'm worried about: [e.g. "light gray text", "white text on yellow buttons", "thin script font"]
Check:
1. Color contrast: for every realistic text and background pair, the contrast ratio and pass/fail for normal text (4.5:1), large text (3:1), and UI components and graphics (3:1). If you can't calculate a ratio precisely, say so and tell me which checker to use.
2. Reliance on color: places where color alone carries meaning (status, links, charts), with alternatives that work for color-blind users.
3. Typography: minimum sizes, weights, line height, letter spacing, and fonts that are hard to read at small sizes.
4. Components: focus states, link styling, error and disabled states, and text over images or gradients.
5. Motion and imagery: rules for animation, flashing content, and alt text.
Return:
- A contrast matrix: Foreground | Background | Ratio | Normal text | Large text | UI.
- Fixes: adjusted shades (new hex values close to the originals) or usage rules (e.g. "only for headings 24px and larger").
- An accessibility section I can paste into the style guide, with clear do and don't rules.
Note that an accessible style guide doesn't guarantee an accessible product; test real pages with assistive technology and real users too.
Highlighted [brackets] are blanks to replace with your own details.
Fill in the blanks and use this promptMore Images, Video & Design prompts
What to fill in
- FONTS, weights, body and heading sizes
- website, app, slides, social, print, signage
- e.g. "WCAG 2.2 AA", "AAA for body text"
How this prompt is built
This prompt follows the Few-Shot structure (Few-shot prompting). A few-shot prompt includes one or more worked examples of the input and the output you want, so the model can copy the pattern instead of guessing it.
Related prompts
- Create an icon or illustration as SVG codeClean, scalable SVG graphics written as code.
- Design a logo conceptLogo directions with rationale, plus prompts or briefs to produce them.
- Create an infographicTurns information into a clear infographic layout with copy, data visuals, and design direction.
- Get an honest, useful critique of my drawing or paintingHonest, specific feedback on composition, values, color, and technique, with clear next steps to improve.