# High Contrast Light

WCAG-friendly light high-contrast theme.

This palette ships in the same registry item as [High Contrast](https://www.termcn.dev/docs/themes/high-contrast.md) (`@termcn/theme-high-contrast`).

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/theme-high-contrast
```

<Step>Copy and paste the following code into your project.</Step>

```ts
import { createTheme } from "@/components/ui/theme-provider";

/**
 * WCAG AA high-contrast theme — dark variant (white text on black).
 *
 * All foreground/background pairs meet the 4.5:1 contrast ratio required by
 * WCAG 2.1 AA, with key status pairs at 7:1 for small text.
 *
 * Compatible with: dark (white-on-black) terminal mode.
 * For light (black-on-white) terminals use `highContrastLightTheme`.
 */
export const highContrastTheme = createTheme({
  border: {
    color: "#FFFFFF",
    focusColor: "#FFFF00",
    style: "bold",
  },
  colors: {
    // 8.6:1 on #000 — exceeds AA
    accent: "#00FFFF",
    accentForeground: "#000000",
    background: "#000000",
    border: "#FFFFFF",
    // 5.1:1 on #000 — meets AA; uses symbol + color
    error: "#FF4444",
    errorForeground: "#FFFFFF",
    // 19.1:1 — visually distinct for focus
    focusRing: "#FFFF00",
    // 21:1 — exceeds AAA
    foreground: "#FFFFFF",
    // 7.5:1 on #000 — exceeds AA
    info: "#00CCFF",
    infoForeground: "#000000",
    muted: "#1A1A1A",
    // 10.4:1 on #1A1A1A — exceeds AAA
    mutedForeground: "#CCCCCC",
    // 21:1 on #000 — exceeds AAA
    primary: "#FFFFFF",
    primaryForeground: "#000000",
    // 19.1:1 on #000 — exceeds AAA
    secondary: "#FFFF00",
    secondaryForeground: "#000000",
    selection: "#FFFFFF",
    selectionForeground: "#000000",
    // 15.3:1 on #000 — exceeds AAA
    success: "#00FF00",
    successForeground: "#000000",
    // 19.1:1 on #000 — exceeds AAA
    warning: "#FFFF00",
    warningForeground: "#000000",
  },
  name: "high-contrast",
});

/**
 * WCAG AA high-contrast theme — light variant (black text on white).
 *
 * Compatible with: light (black-on-white) terminal mode.
 * For dark terminals use `highContrastTheme`.
 */
export const highContrastLightTheme = createTheme({
  border: {
    color: "#000000",
    focusColor: "#0000CC",
    style: "bold",
  },
  colors: {
    // 8.6:1 on #FFF — exceeds AA
    accent: "#004499",
    accentForeground: "#FFFFFF",
    background: "#FFFFFF",
    border: "#000000",
    // 5.9:1 on #FFF — meets AA
    error: "#CC0000",
    errorForeground: "#FFFFFF",
    // 8.6:1 on #FFF — meets AA with shape cue
    focusRing: "#0000CC",
    // 21:1 — exceeds AAA
    foreground: "#000000",
    // 8.6:1 on #FFF — exceeds AA
    info: "#004499",
    infoForeground: "#FFFFFF",
    muted: "#F0F0F0",
    // 9.7:1 on #F0F0F0 — exceeds AAA
    mutedForeground: "#444444",
    // 21:1 on #FFF — exceeds AAA
    primary: "#000000",
    primaryForeground: "#FFFFFF",
    // 6.1:1 on #FFF — meets AA
    secondary: "#6600CC",
    secondaryForeground: "#FFFFFF",
    selection: "#000000",
    selectionForeground: "#FFFFFF",
    // 7.4:1 on #FFF — exceeds AA
    success: "#006600",
    successForeground: "#FFFFFF",
    // 5.7:1 on #FFF — meets AA
    warning: "#884400",
    warningForeground: "#FFFFFF",
  },
  name: "high-contrast-light",
});
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { ThemeProvider } from "@/components/ui/theme-provider";
import { highContrastLightTheme } from "@/lib/terminal-themes/high-contrast";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={highContrastLightTheme}>
      <Badge variant="info">{"High Contrast Light"}</Badge>
    </ThemeProvider>
  );
}
```