Contrasts an digital Accessibility - a deep Dive

Contrast is a more complex topic than one might think at first glance. At first glance, it's only about differences in brightness. The highest possible contrast is 21:1 and the color combination is black and white. WCAG 2.2 AA requires a contrast of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.2 AAA requires at least 7:1 for normal text and 4.5:1 for large text.

The APCa Algorithm

The Advanced Perceptual Contrast Algorithm (APCA) is a new approach to more realistically assessing the readability of text using color contrast. Unlike previous WCAG guidelines, which work with a fixed mathematical relationship between brightnesses, APCA is more closely aligned with human perception. This means that it takes into account how our eyes actually process brightness, font weight, and font size. It is currently unclear whether APCA will replace the old contrast value in the new WCAG 3 or not.

APCA does not describe contrasts with an abstract ratio like "4.5:1," but with so-called Lc (Lightness Contrast) values. These values indicate how strongly the foreground and background colors contrast from each other – in a way that better matches actual readability. For example, an Lc value of around 60 is sufficient for easily legible body text. However, if the font is very small or very thin, it needs a higher contrast, such as Lc 75 to 90, to remain legible.

Another advantage of APCA is that it distinguishes between dark text on a light background and light text on a dark background. Since our eyes perceive the two situations differently, the contrast requirements are not identical. APCA therefore provides more differentiated and practical recommendations that work better in modern designs than the old, rigid limits of WCAG 2.x.

More than light and dark

The WCAG formula has the advantage of being very simple, but it doesn't truly reflect reality. Research has since yielded new insights that haven't yet been incorporated into WCAG. For example, it's now clear that while black on white has the highest contrast, it doesn't necessarily offer the best readability. White on self-illuminating screens tends to be glaring, especially in dark environments; dark mode is so popular for a reason. For presentations, it's often recommended to use a very light gray background. The same applies to paper: it reflects.

Scattered light in the eye: White radiates very strongly, especially on screens. This creates a kind of "veil of light" (in optics, this is called veiling glare) in the eye, which slightly overexposes the edges of the black text. This can make reading tiring over time.

Extremely high contrast: 100% black (000) on 100% white (FFF) is the maximum possible contrast. However, our visual system doesn't always perceive "maximum" as "optimal." Too strong a difference can be tiring for extended reading. Many print and screen designers therefore prefer to use dark gray text on slightly off-white (e.g., 111 on FAFAFA or 333 on FDFDFD). This appears calmer, creates less glare, and still remains perfectly legible.

A problem arises when highly saturated colors collide directly. An example of this is pure blue (#0000FF) on pure red (#FF0000). According to WCAG specifications, such color combinations can sometimes meet the required threshold because the brightness difference is mathematically large enough. In practice, however, they blur because the eye has difficulty distinguishing highly saturated and equally bright colors. This creates an unpleasant flickering effect.

Light on light or dark on dark are not taken into account. An example of this is the color combination medium gray (#777777) on light yellow (#FFFFAA). While the contrast ratio may appear mathematically "okay" and, for example, be just above 4.5:1, the text still appears low-contrast and difficult to read – especially when displayed in thin type. This is because, although the brightness of the two colors is numerically different, the visual contrast is subjectively perceived as weak.

WCAG does not distinguish between body text and headings (except in the "large text" category). A contrast of 4.5:1 can be practically unreadable for small, thin type on a light Background.

The WCAG guidelines do not take color vision deficiencies into account. For example, the color combination dark green (#006600) on red (#FF3333) may have a sufficient contrast ratio according to the specifications. However, for people with red-green color blindness, this combination blurs into a nearly solid color and is therefore barely distinguishable.

Iconsider these cases rather academic. Anyone who combines green and red belongs in design hell. Thin type rarely occurs in practice; that would be another case of design hell.

Light on dark, dark on light

From a purely mathematical perspective, a contrast ratio such as 5:1 should be equivalent – regardless of whether dark type is on a light background or light type is on a dark background. In practice, however, there are several perceptual and design factors that explain why dark text on a light background is almost always perceived as more legible:

Our eyes are physiologically designed to perceive subtle differences in dark structures on a light background in daylight – in what is known as photopic vision. However, when light text is on a dark background, the eye switches more strongly to scotopic vision, or low-light vision. In this mode, the perception of fine details is limited, making readability more difficult.

Added to this is the effect of glare, also known as "halation": On light surfaces, bright pixels optically spread slightly into the adjacent dark areas. As a result, letters appear blurred or thinner in light text on a dark background, which reduces the clarity of the text. Another factor is adaptation. Since most texts—whether books, websites, or documents—are traditionally set in black on a white background, our visual system is accustomed to this color scheme. Reversed configurations such as the so-called "dark mode" therefore appear unfamiliar and can slightly slow reading speed.

Finally, psychovisual weighting also plays a role. Even if the calculated contrast is identical, our brain subjectively perceives differences in brightness differently. Dark text on a light background conveys stability and appears clearly defined, while light text on a dark background tends to flicker or "vibrate."

Things get interesting when you view the situation in a dark environment, because this is where visual perception changes significantly. In low light, the eye adapts through what is known as dark adaptation, with scotopic vision dominating. In this state, the rod cells in the retina do most of the work: They are very sensitive to light but can hardly differentiate between colors. Under these conditions, light text on a dark background can often be perceived as more pleasant, as the eyes are less overstimulated.

Another important aspect is glare. If you are in a completely dark room and look at a bright background – such as a white screen – you experience strong glare because your pupils are wide open in the dark. A dark background with light text reduces this strain and subjectively makes reading significantly more pleasant.

The perception of contrast also plays a role in readability. While the calculated contrast ratio remains the same, in practice, visual fatigue determines how long and comfortably texts can be read. In low ambient light, light text on a dark background is often easy to read for longer, while dark text on a light background places greater strain on the eyes in the dark.

This has a practical consequence: In bright environments, dark text on a light background is more legible, while in dark environments, light text on a dark background is more pleasant because it reduces glare and is easier on the eyes.

To some extent, however, this is also relative: Many developers work with dark backgrounds, and virtually all programming environments and shells are light-on-dark by default or offer a corresponding setting. As mentioned above, it would generally be healthier for the eyes of office workers to work with matte white instead of bright white.

Visually impaired people are the outliers

The entire contrast topic in WCAG is aimed at people with relatively low perceptions. For people with visual impairments, contrast ratios of 3:1 or 4.5:1 are often too low. They often use tools to significantly increase the contrast, overwriting the application's color values.

The statement regarding light-dark preference for visually impaired people also does not apply across the board. Many visually impaired people work with dark backgrounds because the bright background dazzles them.

Aesthetics Bias and Anecdotal Evidence

Contrasts are a wonderful example of aesthetics bias. Aesthetic bias is the fact that attractive interfaces are often not actually that usable. The core cause is that the people who design interfaces are often not the ones who actually use them. Let's look at this using contrast as an example.

If, as recently happened on LinkedIn, someone claims that white on orange is more pleasant to read, that's factually incorrect. It may look better. There may be a few people for whom that applies, for whom this color combination is easy to read. But we don't design for specific individuals.

This is a classic case of misperception, an aesthetic bias: because something looks better, we assume it's better. We look at magazines that are beautifully designed, but that doesn't automatically mean they're more readable. Classic, because we're all subject to it. However, people who design things that other people use, rather than themselves, should be more aware of this.

Incidentally, the article is also an example of anecdotal evidence. If I ask someone if they like it, they'll most likely say yes. They want to confirm me, not offend me, they don't want to have the conversation, they don't care, or they're simply uncritical. You really shouldn't make a design decision based on that.