ThinkWithPrompt by SynotticThinkWithPrompt

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.

Images, Video & DesignFew-ShotAdvancedDesignBrainstormCodeFill-in Template

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

Find more prompts like this