# High-contrast accessibility

Also called: accessible design, WCAG AAA design, high contrast mode, inclusive UI, a11y-first  
Era: WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); design priority since 2020 legal pressure  
Page: https://designforai.dev/style/high-contrast-accessibility

## 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

```css
: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.