wcag.*

Accessibility

WCAG 2.1 contrast audit for all core color pairs. Use the checker below to test any custom combination. Target AA for all text, AAA for critical content.

WCAG 2.1 standards

Normal text

4.5:1

Large / UI

3:1

Minimum for all production UI. Required for normal text and UI components.

AAA

Normal text

7:1

Large / UI

4.5:1

Enhanced standard. Target for editorial content, long-form reading contexts.

Focus

Normal text

3:1

Large / UI

—

Focus indicators must have at least 3:1 contrast against adjacent colors.

"Large text" means 18px+ regular weight or 14px+ bold. "UI components" includes focus rings, borders on active inputs, and icon-only controls.

Dark mode — color pair audit

Pair

Token

Context

Ratio

Grade

text-1 / bg

Headlines, body text

17.39:1

AAAAA

text-1 / surface-1

Card text on raised surface

15.90:1

AAAAA

text-1 / surface-2

Text on hover/elevated surface

14.65:1

AAAAA

text-2 / bg

Secondary text(large/UI)

6.95:1

AAAAA

text-2 / surface-1

Captions on cards(large/UI)

6.35:1

AAAAA

signal / bg

Signal text on background(large/UI)

5.83:1

AAAAA

signal / surface-1

Accent text on cards

5.33:1

AAAAA

ink / signal

Primary button text

5.83:1

AAAAA

green / bg

Success / newsletter badge

7.97:1

AAAAA

red / bg

Danger / video badge

5.67:1

AAAAA

purple / bg

Podcast badge text

7.33:1

AAAAA

amber / bg

Book badge text

7.49:1

AAAAA

Light mode — color pair audit

Pair

Token

Context

Ratio

Grade

ink / paper

Headlines on light bg

17.72:1

AAAAA

ink / surface-1

Card text on white

19.80:1

AAAAA

ink / surface-2

Text on elevated card

16.35:1

AAAAA

text-2 / paper

Secondary text on light(large/UI)

18.35:1

AAAAA

text-2 / surface-1

Captions on white card(large/UI)

20.50:1

AAAAA

signal-text / paper

Signal text on light bg (WCAG-safe)

4.92:1

AAAAA

signal-text / surface-1

Signal text on white

5.50:1

AAAAA

ink / signal

Primary button text

5.83:1

AAAAA

green / paper

Newsletter badge on light

2.22:1

AAAAA

red / paper

Video badge on light

3.13:1

AAAAA

Note: In light mode, --signal-text resolves to #C4321A (not #FF4725) to achieve 4.76:1 contrast on cream and 4.63:1 on white — meeting WCAG AA. The raw signal orange (#FF4725) is only 3.0:1 on white and should not be used as text color in light mode.

Interactive contrast checker

Foreground

Background

Large Text PreviewNormal body text preview — checking legibility at 16pxSmall text at 12px — use sparingly, always check contrast

Contrast ratio

17.39:1

Normal text (4.5:1 / 7:1)

AAAAA

Large text / UI (3:1 / 4.5:1)

AAAAA

System accessibility features

Focus visible:focus-visible

All interactive elements receive a 2px signal-colored focus ring via :focus-visible. Mouse users are unaffected. Keyboard users always see clear focus indicators.

Dark / light modeThemeProvider

System preference (prefers-color-scheme) is respected on first visit. User preference is persisted in localStorage. The data-theme attribute on <html> drives all color tokens.

Reduced motionprefers-reduced-motion

All CSS transitions use the motion token system. Components should respect prefers-reduced-motion. Target: zero motion for users with vestibular disorders when they opt out.

Semantic HTMLARIA landmarks

Landmark roles (main, nav, aside, section) are used throughout. Headings follow a logical hierarchy. Interactive elements use native <button> and <a> tags, not divs.

Color not sole indicatorWCAG 1.4.1

Status indicators (success, error, warning) use both color and icon/text. No information is conveyed by color alone. Content-type badges use both color and text label.

Touch targetsWCAG 2.5.5

All interactive controls meet the 44×44px minimum touch target recommendation. Navigation items, buttons, and form controls are sized for reliable activation.