High Contrast Design

High Contrast Design

"Maximum legibility. Stark, powerful, and universally accessible."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. WCAG AAA Compliance: Every color pairing must exceed a 7:1 contrast ratio.
2. Clear Boundaries: Interactive elements have highly visible borders and focus states.
3. No Ambiguity: Avoid subtle greys, low-opacity text, or purely decorative elements that distract from the core content.

Visual DNA

• Colors: Industrial Chic (Black and White) or Modern Editorial. Often uses a single, highly luminous accent color (like pure Yellow #FFFF00 or Cyan #00FFFF) against black.
• Typography: Highly legible, robust sans-serifs (Atkinson Hyperlegible, Inter, Roboto). Large base font sizes (18px+).
• Styling: Solid 2px borders around cards and buttons. Avoid drop shadows as they reduce edge clarity.

Web Implementation

• Focus heavily on focus states (:focus-visible) and clear active states.
• CSS Example:

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

body {
  background-color: var(--hc-bg);
  color: var(--hc-text);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px; /* Larger default */
}

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