Accessible & Ethical
Also called: WCAG AAA, Accessibility-first, Ethical design, Gov-grade UI
Black-on-white at AAA contrast, 18px+ type, thick yellow focus rings and underlined links — an interface that never tricks or squints.
Design keywords
Say these words to ask for this style.
Accessible & Ethical design treats legibility and honesty as the aesthetic. Text is near-black on pure white (≥ 7:1), body type starts at 18px with a hyper-legible face, every link is underlined, and keyboard focus is a loud yellow block with a black bar. Controls are big (52px+), labelled in plain words with icons as support, errors are marked with a thick red side bar and text, and choices are presented with equal weight — no pre-ticked boxes, no shaming opt-outs, no fake urgency.
Best for
- Government and public-service forms
- Healthcare booking, results and prescriptions
- Banking and insurance flows for older users
- Any product with a legal accessibility requirement
Avoid for
- Fashion or luxury brands that sell mood over clarity
- Immersive games and art portfolios
- Campaign sites that must feel loud and trendy
✓ Do
- Keep body text ≥ 18px and text contrast ≥ 7:1
- Show focus as a 3px+ yellow (#FFDD00) block with a dark bar, on every interactive element
- Underline every link and pair every icon with a text label
- Give accept / decline buttons equal size and weight
✕ Don't
- No light-grey placeholder text used as a label
- Never convey status with colour alone — add an icon and a word
- No pre-ticked consent boxes, countdown timers or confirm-shaming copy
- No motion that starts by itself
Not to be confused with
On mobile
Keep 17–18px body text and 52px buttons; the tab bar always shows text labels and marks the active tab with a thick bar plus bold text, not colour alone. Focus rings stay on for switch-access and keyboard users.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.