For 16 years, WCAG color contrast has been the standard for color contrast accessibility. The problem is WCAG contrast has always been a terrible standard. In 2019, Color Scientist Andrew Somers posted the issue on #695 WCAG Github.

“The W3C’s specification for determining sRGB contrast … is not perceptually uniform and as a result creates ‘contrast ratios’ that are not meaningful. The end result is incorrect contrast choices…“— Andrew Somers

Rather than waiting for WCAG to create a solution, Andrew built the Accessible Perceptual Contrast Algorithm, or APCA, to be included in WCAG 3.0 (currently in working draft). Andrew Somers provided the APCA Color Contrast Calculator so you can try it for yourself.

This article does not describe APCA or how it should be used but illustrates why WCAG is insufficient and how APCA shows us a better way.

Andrew Somers is a color scientist whereas I’m a ‘color mechanic’, meaning I have practical experience in the science of color using ICC Color Management to create reliable color solutions in production. As a photo retoucher, I used spectrophotometers, colorimeters, and profiling software to create custom ICC Color Profiles for monitors, scanners, and printers.

This article describes a sympathetic solution that APCA provides but is different because it is still approached from the perspective of density, much like WCAG does today. Tier 2 tokens (semantic, contextual) are responsible for behavior in dark mode and reference Tier 1 tokens of known densities that most closely align with APCA standards.

I was glad to discover (or re-discover) in 2022 the connection between WCAG ratios and L* density as described by the device-independent color model called L*a*b*, created by the International Commission on Illumination, or CIE for short. The CIE L*a*b* and L*c*h* color models express density in the L* channel on a scale of 0 to 100 where 50 is the mid-tone value.