APCA + WCAG 2 Contrast Checker

Enter colors using any modern CSS color format supported by your browser. This tool evaluates WCAG 2.x & APCA Lc contrast ratios.

Inputs

Foreground

Picker
Nudge
Random

Background

Picker
Nudge
Random

Focus color

Examples: pink, #0044cc, rgb(10 120 200), hsl(200 40% 40%), lch(60 50 240) & oklch(0.7 0.16 250)

WCAG 2.x threshold

APCA threshold

Preview

View preview as:

Both panels use your chosen colors for headings, body text, links, buttons, and simple icons. The right-hand panel shows a focus or hover state using the third color when enabled.

Foreground on background

Example heading

The quick brown fox jumps over the lazy dog. 1234567890. This paragraph uses the chosen foreground and background colors.

Example link text

Results

Pair Colors WCAG ratio WCAG status APCA Lc APCA status

Harmony Palette Generator

Generate a 5-color harmonious palette based on the current foreground color. (No external API used.)

Harmony is generated by rotating hue and adjusting lightness/saturation from the foreground color to produce visually distinct but related swatches.

Tonal Scale (50–950)

Generate a full tonal scale from the foreground color hue, varying lightness across 11 stops. Inspired by enterprise design system palettes.

Blend the tonal scale with a brand tint color to create a cohesive palette. Set intensity to 0 for no tint.
0%

Accessible Contrast Matrix

Compare each tonal swatch against the current background color to see which combinations meet WCAG 2.x and APCA thresholds. Generate the tonal scale first.

Saved Color Palette (0)

No saved colors yet. Use the Save buttons near color inputs.