Blog English barrierefreies Webdesign mit Joomla aus Bonn

CSS , automatically accessible color combinations?

The function is intended to help automatically choose a text color that creates the highest possible contrast with the background (or vice versa). This could be a great aid in implementing accessibility and using design systems.

The idea behind it:
You no longer have to decide which color combinations to use yourself—the browser takes care of it for you.

It could even go as far as allowing users to define their favorite colors on a website, with those preferences—applied via CSS variables—shaping the site’s design. That may sound exciting at first, but I need to temper expectations early on: this is strictly about achieving the highest possible contrast.

How  CSS contrast-color() works

What’s behind it technically?

The algorithm behind contrast-color() in Safari is currently based on the contrast ratio according to the WCAG (Web Content Accessibility Guidelines), an international standard for accessible web design. It calculates which color tone offers better brightness contrast against a given background color.

To determine this contrast, the so-called CIE luminance (Y) is first calculated—a measure of a color’s brightness based on an international standard (CIE), designed to closely match human visual perception. This calculation is done relative to a D65 white point, a standardized reference value that roughly corresponds to natural daylight and is used for color comparisons.

After that, the contrast ratio is calculated according to the WCAG 2.1 contrast formula:

Kontrast = (Yl + 0,05) / (Yd + 0,05)

Here, Yl stands for the luminance of the lighter color and Yd for the luminance of the darker color. Luminance is a measure of brightness. It enables the human eye to perceive contrasts at all. Imagine looking at two colors—a bright yellow and a dark blue. The yellow appears brighter. This perceived brightness is described as luminance.

The factor 0.05 is added to the luminance of both the lighter and the darker colors in the contrast formula to account for the so-called veiling luminance effect. This term describes an additional brightness impression caused by stray light, reflections, or glare in real-world viewing. Such effects occur, for example, when light is reflected from a bright surface nearby and slightly brightens darker areas in the field of view.

Imagine dark blue text displayed on a light yellow background. Although the dark blue shade is actually quite dark, strong ambient light or screen reflections can cause some of the yellow’s brightness to “bleed” onto the blue. This makes the dark blue appear slightly lighter to our perception than it would be in a pure calculation. To realistically include this effect in the contrast calculation, a small value of 0.05 is added to the luminance of both colors. This results in a practical contrast value that better reflects what we actually see, rather than a purely theoretical calculation.

Colors in the mid-brightness range face a fundamental problem with this type of contrast evaluation: they are often neither bright nor dark enough to achieve clear contrasts. The 0.05 correction has a disproportionately strong effect here, leading to lower 

APCA in the Future?

The contrast guidelines from WCAG 2.x date back to a time before smartphones or iPads existed, and research was not as advanced as it is today. However, there is already a potential alternative: APCA.

The APCA model (Accessible Perceptual Contrast Algorithm) is perception- and context-based. It relies on current research into color perception and takes into account how the human eye actually interprets colors and brightness differences. Unlike rigid contrast ratios, APCA also considers the specific presentation context—such as font size, font weight, and environmental conditions—to evaluate actual readability more realistically.

APCA generates a brightness contrast value that accounts for minimum font weight, size, and color pairing. This value is consistent for the perception of lightness and darkness. That means, regardless of how light or dark the two colors are, a given contrast value remains visually consistent. For example, the value Lc 60 always represents the same perceived contrast, no matter what color range the colors fall into. This allows the readability of text to be reliably assessed because the contrast value always appears equally strong to the viewer.

It seems very likely that this algorithm will become the standard in WCAG3. Many designers would be very happy about this, as it would significantly expand the range of colors that can be used.