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

Background

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.

Saved Color Palette (0)

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