🎯 Design
Accessible Color Palette with Contrast Ratios and Usage Map
Build a small color palette with estimated contrast ratios, roles, and do-not-pair rules so UI text can pass WCAG-minded checks.
0Reviews
Prompt
Act as a product designer who treats color as a usability system, not a moodboard. You produce a small palette with roles and contrast. You estimate contrast with a stated method. You do not claim a lab measurement you did not run. Inputs: - Product surface: [Surface] - Existing brand colors: [Existing] - Theme: [Light / dark / both] - Audience and impairments to respect: [Access] - UI needs: [Needs] - Forbidden: [Forbidden] - Personality: [Personality] - Where text sits: [Text on] Generate: 1. Roles: 8-12 tokens max (bg, surface, text-primary, text-muted, border, brand, brand-on, success, warning, danger, link, overlay). One hex each (or two if both themes). No 64-stop ramps unless asked. 2. Contrast table: For every text/icon-on-bg pair you expect, list fg, bg, estimated ratio, and AA/AAA for body (4.5:1) and large (3:1). Label estimates as estimates. Method: sRGB relative luminance formula, rounded to 1 decimal. If you cannot compute, say "compute in a contrast checker before shipping" and still give the pair list. 3. Usage map: Where each token goes (buttons, body, charts, alerts). One "never" per token (e.g., never use danger for a discount). 4. Do-not-pair: 6 combinations that fail or confuse (muted on brand, success vs danger for color-blind users without an icon). 5. Color-blind check: Deuteranopia/protanopia notes. Do not rely on red/green alone for Needs (error, success). Name the extra cue (icon, text). 6. Dark mode: If both, pair tokens. If only light, 5 lines on what would break if someone inverts it naively. 7. CSS sketch: :root custom properties for the tokens. Comments for role, not essays. 8. What this is not: not a full design system, not illustration colors, not charts with 12 series. Constraints: - Prefer Existing hexes. If you add a color, say why Existing failed contrast. - Honor Forbidden (no neon, no purple, etc.). - Do not fake AAA on a pair that is obviously light-gray on white. - No medical claims about color blindness beyond standard design practice. - Keep the palette small enough to memorize.
Instructions
Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.
Examples
Example Input
Product surface: BatchNotes web app (changelog editor + public changelog page) Existing brand colors: navy #1B2A4A, paper #F6F1E8, ink #121212, white #FFFFFF. No accent yet. Theme: both Audience and impairments to respect: ops leads on cheap laptops; deuteranopia; do not use color as the only error signal UI needs: primary button, secondary, link, success "published," danger "failed to publish," muted helper, code in editor Forbidden: AI-purple, rainbow, light gray body text Personality: paper and ink, analog, not neon Where text sits: paper or white in light mode; navy or #0E1628 in dark mode
Example Output
1. Roles (light / dark)
bg: #F6F1E8 / #0E1628
surface: #FFFFFF / #1B2A4A
text-primary: #121212 / #F6F1E8
text-muted: #3A3A3A / #C8C2B8
border: #C9C2B4 / #3A4A6A
brand: #1B2A4A / #F6F1E8
brand-on: #F6F1E8 / #1B2A4A
success: #1F6B3A (same both; text on success is white)
warning: #8A5A00
danger: #9B1C1C
link: #1B2A4A / #E7D9B8
overlay: #121212 at 60%
2. Contrast table (estimates, sRGB luminance, check before ship)
ink #121212 on paper #F6F1E8: ~16:1 body AAA.
ink on white: ~18:1 AAA.
muted #3A3A3A on paper: ~9:1 body AA/AAA (not light gray).
paper on navy #1B2A4A: ~11:1 AAA (dark brand-on).
white on success #1F6B3A: ~5.5:1 body AA.
white on danger #9B1C1C: ~7:1 AA.
navy on paper (link): ~11:1.
Fail avoided: #888 on paper would miss 4.5:1; not used.
3. Usage map
brand: primary button in light (navy, paper label).
success: "Published" with a check icon, never as the only cue.
danger: "Couldn't publish" with icon + text.
muted: helper under fields, not body.
link: underline in body, not color-only in dark.
4. Do-not-pair
muted on navy (guess <4.5). success next to danger as two unlabeled dots. brand-on as body text on paper (invisible). warning as body. white on paper. link color without underline in a paragraph.
5. Color-blind
Success green vs danger red: always icon + words ("Published" / "Couldn't publish"). Deuteranopia still gets the label. Do not use red/green chart lines without a second encoding.
6. Dark mode
bg #0E1628, surface navy, text paper. Primary button becomes paper fill, navy label (brand swap). Naive invert would turn paper yellow-green; do not invert, use tokens.
7. CSS
:root { --bg:#F6F1E8; --surface:#FFF; --text:#121212; --muted:#3A3A3A; --border:#C9C2B4; --brand:#1B2A4A; --brand-on:#F6F1E8; --success:#1F6B3A; --danger:#9B1C1C; --link:#1B2A4A; }
[data-theme="dark"] { --bg:#0E1628; --surface:#1B2A4A; --text:#F6F1E8; --muted:#C8C2B8; --border:#3A4A6A; --brand:#F6F1E8; --brand-on:#1B2A4A; --link:#E7D9B8; }
8. Not a full design system. No 12-hue chart set. No illustration palette.