# Accessible & Ethical > Black-on-white at AAA contrast, 18px+ type, thick yellow focus rings and underlined links — an interface that never tricks or squints. - Nickname: AAA plain - Also called: WCAG AAA, Accessibility-first, Ethical design, Gov-grade UI - Category: Accessible & Inclusive - Moods: Trustworthy, Serious, Calm - Industries: Government & Nonprofit, Healthcare, Education, Fintech & Banking, Corporate & B2B - Style page: https://uilingo.dev/styles/accessible-ethical/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Accessible & Ethical" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Black-on-white at AAA contrast, 18px+ type, thick yellow focus rings and underlined links — an interface that never tricks or squints. Design keywords: AAA contrast, yellow focus ring, underlined links, 18px body text, big tap targets, red error bar, plain language, no dark patterns, square tags. ## Visual language A public-service interface where legibility and honesty are the whole aesthetic: near-black #0B0C0C text on pure white, one dependable blue (#1D4F91) for actions and links, and a loud #FFDD00 yellow reserved for keyboard focus. Type is large (18px root, 1.6 line-height) in a hyper-legible sans; every link is underlined; controls are big flat rectangles with 2px dark borders and 4px corners. There are no shadows, gradients, textures or auto-playing motion — the page looks calm, plain and slightly governmental, and nothing on it is designed to trick the user. ## Signature details (must be visible) - Root font-size 112.5% (18px body, 17px on phones); body line-height 1.6 Latin / 1.8 Thai; contrast of body text ≥ 7:1 - Focus = yellow block: background #FFDD00, text #0B0C0C, box-shadow 0 4px 0 #0B0C0C on links and buttons; inputs get a 3px #FFDD00 outline plus an inset 2px black border - Every link underlined (thickness 1px, offset 0.18em, 3px on hover); nav links are blue and underlined, the current page is black, bold and has a 4px underline - 10px solid primary-blue rule under the header; 10px top rule on the closing call-to-action block - Inputs: 52px high, square corners, 2px solid #0B0C0C; error state = 4px red border plus a 5px red bar down the left of the whole field and a bold red message - Status tags are square, tinted and always carry a symbol: ✓ success, ! warning, ✕ danger — never colour alone - Buttons ≥ 52px tall, 700 weight, 2px border, no shadow; disabled buttons stay readable with a dashed border and a ⦸ glyph instead of fading to 45% opacity ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #FFFFFF - surface-2 #F3F2F1 - text #0B0C0C - text-muted #484949 - primary #1D4F91 (text on it #FFFFFF) - secondary #FFDD00 (text on it #0B0C0C) - accent #00703C - border #505A5F - success #00703C · warning #8A4B00 · danger #B10E1E - chart series #1D4F91, #00703C, #B10E1E, #6F2C91, #505A5F Radius: sm 2px, md 4px, lg 4px, xl 6px, pill 999px Border width: 2px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.15 density Motion: 80ms linear ## Typography (Latin + Thai) - Headings: Atkinson Hyperlegible 400/700 with Thai fallback Sarabun 600/700 - Body: Atkinson Hyperlegible 400/700 with Thai fallback Sarabun 400/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Sarabun:wght@400;600;700&display=swap - CSS stacks: heading `"Atkinson Hyperlegible", "Sarabun", system-ui, sans-serif`; body `"Atkinson Hyperlegible", "Sarabun", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.4rem, 4.6vw, 3.6rem), heading weight 700, heading tracking 0 (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Atkinson Hyperlegible was drawn for low-vision readers with very distinct letter shapes; looped Sarabun, the Thai government standard, gives Thai the same clear, formal and highly recognisable glyphs. ## Components - Primary button: solid #1D4F91, white 700 label, 2px same-colour border, hover darkens to #12355F, no lift or glow; secondary: white with 2px #0B0C0C border; ghost = underlined blue text - Cards: white, 2px #B1B4B6 border, 4px radius, no shadow; hover only darkens the border; feature items are a light grey panel with a 6px blue left bar and a solid blue icon tile - Pricing: the recommended plan is marked with a 4px blue frame and a label — its price and button are the same size as the others, and every plan's button looks the same - Forms: label above field in 700 weight, help text below in #484949, 32px square checkboxes and radios with thick check marks, switch shows the words On / Off inside the track - Alerts: no rounded box — an 8px coloured left bar on a light tint, bold text, icon first - Navigation: white bar, 76px tall, black logo tile, blue underlined links; dashboard uses a top nav where the active section is black and bold with a 5px bar underneath - Tables: black 2px header rule, 16px row padding, zebra rows in #F3F2F1, status column uses the symbol tags - Charts: 3.5px lines, the second series dotted (2 6) so it is distinguishable without colour, solid grey gridlines, square legend keys; deltas read 'up' / 'down' as words next to the arrow - Accordions (FAQ): question as an underlined blue link with a written '+ Show' / '− Hide' toggle - Tab bar: white with a 2px black top rule, labels always visible, active tab has a 5px blue bar above and a bold underlined label ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → steps → features → trust → faq → cta. Feature section as list. Split hero with a left-aligned headline (no centred text blocks), a plain-language lead at 1.25rem, two equal-size buttons and an informational note marked with ⓘ. Sections are left-aligned and linear: steps first (numbered black circles over a grey rule), then a single-column feature list (max 820px) instead of a busy grid, trust badges, FAQ and a grey CTA panel. Section backgrounds alternate white and #F3F2F1 only. Dashboards prefer tables and status lists over decorative charts, with a top navigation instead of a hidden sidebar. ## Content Use realistic product copy (fictional brand) suited to: Government and public-service forms. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Grey-on-grey or low-contrast muted text, placeholder text used as a label - Subtle focus states (thin blue glow) or removing outlines - Colour-only status, unlabeled icon buttons, charts distinguishable only by hue - Dark patterns: pre-ticked boxes, a tiny 'no thanks' link next to a huge 'accept', fake countdowns, confirm-shaming - Decorative gradients, glass, drop shadows or big rounded pills that make it read as a consumer marketing style - Thin or light-weight fonts and tight line-height, especially for Thai ## Stack notes One self-contained HTML file with a