#accessible color palette

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.

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.