Color Palette & Contrast Checker

Build palettes and validate WCAG 2.1 contrast (AA/AAA). Click a swatch to apply to the current foreground (FG) or background (BG).

Palette Builder

Pick a base color and scheme. Each swatch shows tints → base → shades. Use the “Apply to FG/BG” pills to decide where a swatch goes when you click it.

Base color

Scheme

Steps (tints/shades)

Apply to FG

Apply to BG

Import JSON

Contrast Checker

AA requires 4.5:1 for normal text and 3.0:1 for large text (≥24px normal or ≥18.66px bold). AAA is stricter: 7.0:1 normal and 4.5:1 large.

Foreground

Background

Sample text

Font size (px)

Weight

Contrast: —

AA Normal: — AA Large: — AAA Normal: — AAA Large: —

Preview text

Badge

Table: palette colors vs. current background

Color	Hex	Ratio	AA N	AA L	AAA N	AAA L

What these numbers mean

Contrast uses sRGB relative luminance (Y) with (L_light+0.05)/(L_dark+0.05).
“Large” text = ≥24px normal, or ≥18.66px bold.
WCAG AA/AAA thresholds: 4.5/7.0 for normal; 3.0/4.5 for large.
Copy CSS exports --color-fg, --color-bg, and the first 12 palette colors as --color-01..12.