Hit space. Get colors that actually pass.

WCAG 2.1 contrast minimums by context

WCAG sets a different minimum ratio depending on text size, text weight, and whether the element is text or a non-text control.

Large text is 18pt (24px) at a regular weight, or 14pt (18.66px) at bold. The ratio always divides the brighter relative luminance by the darker, so it reads the same regardless of which color is the foreground.

APCA Lc levels and intended use

APCA reports a polarity-signed lightness contrast (Lc) that runs from about -108 to 106; Shadl displays the absolute value. A higher Lc clears smaller and thinner text.

These are readability levels, not strict size cutoffs. The full size-by-weight matrix (pixel size against font weights 100 to 900) lives in the APCA documentation linked under Related concepts.

Color vision deficiency types and prevalence

About 1 in 12 men and 1 in 200 women of Northern-European ancestry have some color vision deficiency. Shadl simulates the three dichromatic types side by side.

Red-green deficiencies (deutan plus protan) account for roughly 99% of cases. That is why a palette leaning on red-versus-green to signal state is the single most common accessibility trap.

OKLCH channels

Shadl draws unlocked swatches from OKLCH and reports each swatch in it. The three channels behave as follows.

CSS syntax is oklch(L C H), for example oklch(0.52 0.2 27). Not every L/C/H triple is displayable in sRGB; high chroma near black or white clips to the gamut edge.

Export formats for design tokens

Shadl writes the same five swatches (bg, surface, text, primary, accent) into four token formats. Copy whichever matches the target codebase. The snippets below use the default starter palette; the tool emits exact OKLCH conversions for the colors on screen.

:root {
  --bg: #f4eedd;
  --surface: #e6dbbe;
  --text: #1a0e10;
  --primary: #c9302a;
  --accent: #2a5cff;
}

@theme {
  --color-bg: oklch(0.94 0.02 90);
  --color-surface: oklch(0.88 0.04 88);
  --color-text: oklch(0.20 0.02 18);
  --color-primary: oklch(0.52 0.20 27);
  --color-accent: oklch(0.55 0.24 264);
}

module.exports = {
  theme: {
    extend: {
      colors: {
        bg: "#f4eedd",
        surface: "#e6dbbe",
        text: "#1a0e10",
        primary: "#c9302a",
        accent: "#2a5cff",
      },
    },
  },
};

{
  "bg": "#f4eedd",
  "surface": "#e6dbbe",
  "text": "#1a0e10",
  "primary": "#c9302a",
  "accent": "#2a5cff"
}

WCAG contrast: a worked example

The ratio is the brighter relative luminance plus 0.05, divided by the darker plus 0.05. Worked here for gray #767676 text on white #FFFFFF, the lightest gray that still clears AA on white.

Linearization applies ((c + 0.055) / 1.055) ^ 2.4 to any channel above 0.03928, then luminance weights the channels 0.2126 R, 0.7152 G, 0.0722 B. The result:

ratio = (1.000 + 0.05) / (0.181 + 0.05)
      = 1.05 / 0.231
      = 4.54:1

That clears the 4.5:1 floor for normal text by a hair, which is exactly why #767676 is the canonical “lightest passing gray” reference value.

Standards and regulations that cite these numbers

Where the thresholds come from and who enforces them.

Related concepts

• sRGB gamma and linear light: why each channel is linearized before relative luminance is computed.
• Polarity in APCA: why light-on-dark and dark-on-light score differently for the same two colors.
• Gamut mapping: what happens when an OKLCH color falls outside the range sRGB can display.
• WCAG large-text threshold: the 24px-regular and 18.66px-bold boundary, and why bold lowers the required ratio.
• Design tokens: naming and distributing palette values across CSS, Tailwind, and JSON pipelines.