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.
Parsed: color(display-p3 0.097 0.167 0.449)
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
AA — 4.5:1✓ Pass
AA Large — 3:1✓ Pass
AAA — 7:1✓ Pass
AAA Large — 4.5:1✓ Pass
APCA Lc
63
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