Tool · Wide-Gamut Contrast

Wide-Gamut Contrast.

Check WCAG and APCA contrast for any pair of colors - in any CSS color space. Paste hex, rgb, hsl, oklch, lch, color(display-p3 …), or color(rec2020 …) and see how the pair performs on both sRGB displays and modern wide-gamut displays.

Foreground

Parsed: color(display-p3 0.097 0.167 0.449)

Background

Parsed: color(display-p3 0.951 0.675 0.757)

Display gamut

Controls how the preview renders. The contrast scores below are always computed on the sRGB-equivalent hex.

Try a pair

Sample heading

The quick brown fox jumps over the lazy dog. Wide-gamut colours render as themselves on capable displays - no gamut-mapped desaturation.

Small caption text · 13px · regular weight

WCAG 2 ratio

7.09:1

Computed on sRGB

AA - 4.5:1✓ Pass

AA Large - 3:1✓ Pass

AAA - 7:1✓ Pass

AAA Large - 4.5:1✓ Pass

APCA Lc

Lc mid

Bronze - body |Lc| ≥ 60✓ Pass

Silver - body |Lc| ≥ 75✕ Fail

Gold - body |Lc| ≥ 90✕ Fail

Lc 60+ - large text only (24px+ or 18.66px bold).

Foreground · gamut

✓ sRGB✓ P3✓ Rec2020

HEX
RGB
HSL
OKLCH
LCH
LAB
P3
REC2020

Background · gamut

✓ sRGB✓ P3✓ Rec2020

HEX
RGB
HSL
OKLCH
LCH
LAB
P3
REC2020

Open in the classic contrast checker (sRGB, auto-fix, font preview) →

What is the wide gamut contrast checker?

A contrast checker for Display P3 and other wide-gamut colors, reporting WCAG ratios and APCA values for colors that fall outside sRGB, with the sRGB fallback shown alongside.

Contrast beyond sRGB

Modern screens show colors sRGB cannot, and CSS lets you use them with color(display-p3 ...) and oklch(). WCAG's formula is defined for sRGB, so this tool converts wide-gamut colors correctly rather than clipping them, reports APCA (which handles wide gamut natively), and shows what the pair becomes on an sRGB screen so the fallback is checked too.