Design for AI

High-contrast accessibility: UI design prompt

Palette, type rules and a pasteable prompt for high-contrast accessibility. Also called accessible design, WCAG AAA design, high contrast mode, inclusive UI, a11y-first. WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); design priority since 2020 legal pressure.

Traits

  • text contrast at 7:1 or better (AAA), UI components at 3:1 minimum
  • large default type (18px+), line-height 1.5+, measure 60-70 characters
  • visible, thick focus indicators (3px) on every interactive element
  • links underlined, buttons look like buttons, never colour alone to signal state
  • big touch targets (44px minimum), generous spacing between them
  • motion minimal and always disabled under prefers-reduced-motion
  • honours forced-colors mode; icons have text labels

Palette

#ffffff page, #0b0b0b text, #005a9c link blue (7:1 on white), #b30000 error, #006400 success, #ffd200 focus ring on dark, #1a1a1a dark surface

Type

Atkinson Hyperlegible (designed for low vision), IBM Plex Sans, Source Sans 3 or Lexend; body 18-20px, headings 700 at 32-48px, minimum 16px anywhere; no light weights

Do

  • test every text/background pair for 7:1 and every border/icon for 3:1 before styling anything else
  • make focus impossible to miss: 3px solid outline plus 2px offset, in a colour that hits 3:1 on every background
  • pair every colour signal with a shape, icon or text (error text plus icon, not red alone)

Don't

  • do not use grey placeholder text under 4.5:1 or thin hairline inputs
  • do not remove outlines, disable zoom, or animate on scroll
  • do not rely on hover; everything must work with keyboard and touch

Known for it: GOV.UK, BBC (GEL), Atkinson Hyperlegible project by Braille Institute, Microsoft Inclusive Design

CSS seed
:root {
  --bg: #ffffff;
   --fg: #0b0b0b;
   --accent: #005a9c;
   --error: #b30000;
   --focus: #ffd200;
   --radius: 4px;
   --focus-ring: 3px solid #005a9c;
   --font: 'Atkinson Hyperlegible',sans-serif
}
Prompt

Build the site to a high-contrast accessibility standard (WCAG 2.2 AAA where possible). Background #ffffff, text #0b0b0b, links #005a9c always underlined, error #b30000 with an icon and text, success #006400. Font Atkinson Hyperlegible: body 19px line-height 1.6 with max-width 66ch, headings 700 at 44/32/24px, nothing under 16px, no weights below 400. All interactive elements at least 44x44px with 12px spacing between them. Buttons: solid #005a9c with white text, radius 4px, 2px border in the same colour so they survive forced-colors mode; secondary buttons have a 2px #0b0b0b border. Focus: outline 3px solid #005a9c, outline-offset 2px on every element; on dark surfaces #1a1a1a use #ffd200. Inputs: 2px #0b0b0b border, visible label above, never placeholder-only. Skip link first in the DOM. Icons decorative (aria-hidden) with adjacent text labels. No autoplay, no parallax; any transition 150ms max and removed under prefers-reduced-motion. Add a visible landmark structure: header, nav, main, footer.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site to a high-contrast accessibility standard (WCAG 2.2 AAA where possible). Background #ffffff, text #0b0b0b, links #005a9c always underlined, error #b30000 with an icon and text, success #006400. Font Atkinson Hyperlegible: body 19px line-height 1.6 with max-width 66ch, headings 700 at 44/32/24px, nothing under 16px, no weights below 400. All interactive elements at least 44x44px with 12px spacing between them. Buttons: solid #005a9c with white text, radius 4px, 2px border in the same colour so they survive forced-colors mode; secondary buttons have a 2px #0b0b0b border. Focus: outline 3px solid #005a9c, outline-offset 2px on every element; on dark surfaces #1a1a1a use #ffd200. Inputs: 2px #0b0b0b border, visible label above, never placeholder-only. Skip link first in the DOM. Icons decorative (aria-hidden) with adjacent text labels. No autoplay, no parallax; any transition 150ms max and removed under prefers-reduced-motion. Add a visible landmark structure: header, nav, main, footer.

## Tokens
:root { --bg:#ffffff; --fg:#0b0b0b; --accent:#005a9c; --error:#b30000; --focus:#ffd200; --radius:4px; --focus-ring:3px solid #005a9c; --font:'Atkinson Hyperlegible',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.