Design High-Contrast UI Components for Accessibility

A visual sub-style reference for "High Contrast Design" - maximum-legibility, WCAG AAA-compliant styling built for universal accessibility. It is a child reference of a parent design-it skill and is not meant to be triggered directly - it applies when a user's aesthetic request matches this specific look. Core principles require every color pairing to exceed a 7:1 contrast ratio, interactive elements to have highly visible borders and focus states, and no ambiguity: no subtle greys, low-opacity text, or purely decorative elements that distract from core content. Visual DNA calls for an Industrial Chic (black and white) or Modern Editorial palette with a single, highly luminous accent color like pure yellow or cyan against black, highly legible robust sans-serifs such as Atkinson Hyperlegible, Inter, or Roboto at 18px+ base size, and solid 2px+ borders around cards and buttons with drop shadows avoided since they reduce edge clarity. It provides full, complete implementations across five platforms: CSS for web, using CSS custom properties for background/text/accent/focus colors, a card with a 3px solid black border, and a :focus-visible rule with a 4px outline and offset for keyboard accessibility; SwiftUI, a card built from a RoundedRectangle stroke overlay and explicit .black-on-.white text, warning against .secondary colors that might drop below 7:1; Flutter, Border.all for the card boundary and elevation: 0 on buttons to remove shadow-based contrast loss; React Native, explicit borderWidth: 3 and pure #000000 text colors, plus a minimum 48x48 hit-slop note for touch targets; and Jetpack Compose, Modifier.border for the card and elevation = null on the button. Do's and don'ts call for running colors through an actual contrast checker rather than eyeballing them, and explicitly forbid conveying meaning through color alone - an error state must be red and carry an icon and bold text, not color alone.

Use this sub-style when a user's aesthetic request calls for maximum legibility, stark accessible contrast, or WCAG AAA compliance - it is invoked as a reference within the parent design-it skill's style selection, not called directly by name. Do not use it when the desired look calls for subtle color gradations, low-opacity decorative elements, or color-only status indicators, since those directly violate its accessibility-first core principle.

Input is a target platform - web, iOS, Flutter, React Native, or Android/Compose - and content to style. Output is complete, ready-to-adapt code implementing the 7:1-contrast card and button pattern for that platform, for example the web CSS:

:root {
  --hc-bg: #ffffff;
  --hc-text: #000000;
  --hc-accent: #0000FF; /* Pure blue */
  --hc-focus: #FF00FF; /* High visibility focus ring */
}

.hc-card {
  background-color: #ffffff;
  border: 3px solid #000000; /* Unmissable boundary */
  padding: 32px;
  border-radius: 8px;
}

Provides parallel implementations in CSS, SwiftUI, Flutter, React Native, and Jetpack Compose, all built around explicit high-contrast color values, thick solid borders, and shadow-free flat surfaces, plus the Atkinson Hyperlegible typeface for maximum readability.

Designers and frontend or mobile engineers implementing an accessibility-first, WCAG AAA-compliant high-contrast interface across web or native app platforms.