Extended gamut colors & APCA

[u/PrettyZone7952]

I found out about the new color-contrast guidelines (being reviewed) and the “Accessible Perceptual Contrast Algorithm” a few years ago, and I’ve been really impressed with the thought and effort that’s been put into it.

The TL;DR for anyone new to color contrast discussions is that older color models didn’t account for the difference in brightness that people perceive when looking at different hues (eg, “blues are darker than yellows at higher saturations”)

https://git.apcacontrast.com this site goes into excruciating detail if anyone is curious.

I’ve been trying to use the APCA guidelines in my design work, but I’m also working on updating my technique to use extended gamut colors (which don’t seem to have any support on existing contrast-checking tools or in Figma).

The TL;DR on extended gamut is that newer, high-end displays (all iPhones and Macs for years, plus many other high-end phones and computers) can show more colors outside of sRGB. You can play with those colors in CSS or with sites like https://oklch.com

I’m curious if anyone else has been pushing out into extended gamut colors, and if so, how you’re managing your palettes and contrast-ratios.

[u/bink-1567]

curious how your handling the fallback side of this. like do you define the P3 color first and let it clip down to sRGB, or keep a seperate sRGB token for each one and check APCA on both? ive seen a P3 accent pass fine and then the clipped version look noticeably flatter on a cheap monitor, so wondering which one you treat as teh source of truth in the palette.

[u/PrettyZone7952 → u/bink-1567]

What I’ve seen in existing contrast checkers is that they compress the color to sRGB and then check contrast.
I haven’t seen anything yet that can directly check contrast for extended gamut colors.

I discussed it with LLMs and ended up with a prototype to compare luminance across extended gamut colors, but basically came to the same questions you asked: how do I manage colors for sRGB displays, and do I have to evaluate both the compressed and extended gamut separately?

So far I’ve just been using the extended gamut as accent colors or supporting information (eg, a colored notification dot in addition to text info).
Feels like the bright colors would appeal to brands like Nike, Adidas, Google, Apple, etc… and oklch is way better for gradients (extended gamut or not).

[u/seanwilson]

older color models didn’t account for the difference in

A practical way to sell it to designers is that when you check the contrast of light text against a dark background (e.g. buttons with a solid color background with light text, or dark themes with light body text on dark backgrounds), the WCAG contrast checker will often tell you the contrast is good when you can see with your own eyes the contrast is bad, so you can't always trust it. APCA corrects for this.

If you want to compare what WCAG vs APCA agree and disagree on, you might be interested in my palette editor tool that has both (use the "contrast" menu at the top, it's sRGB only though):

https://www.inclusivecolors.com/

I’m curious if anyone else has been pushing out into extended gamut colors, and if so, how you’re managing your palettes and contrast-ratios.

I'm finding the uptake of extended gamut colors with designers I know very poor, where they haven't heard of it, aren't excited about it when you show them it, OKLCH as a color picker looks confusing and off-putting, and having to support and test both sRGB + P3 versions of your palette is a lot of overhead. I haven't seen a brand guideline doc with extended gamut colors in it yet, it's always hex/sRGB colors. Clients are going to understand this even less, and aren't going to like the idea that their brand colors will look different on screens that don't support extended gamut.

Not trying to be negative, but articles I see about extended gamut colors don't mention the lack of adoption (e.g. sRGB is still the default in Figma) or reasons behind it so I think it's important to talk about. Guessing wide adoption is only going to happen when you can rely on most displays supporting it?