AVIF 4:2:0 Color Bleeding on UI Text

When exporting user interface (UI) graphics containing text using the AVIF image format, employing 4:2:0 chroma subsampling frequently produces noticeable color bleeding, haloing, and legibility issues. This article examines the technical mechanics behind 4:2:0 subsampling, how it interacts with high-contrast UI text, the exact visual artifacts it generates, and best practices for preventing this degradation in digital design.

The Mechanics of 4:2:0 Chroma Subsampling

Chroma subsampling is a compression technique that reduces color information in an image while preserving brightness detail, exploiting the human visual system's lower sensitivity to color shifts compared to luminance variations.

In an image utilizing 4:2:0 subsampling:

This means that a \(2 \times 2\) block of four pixels shares a single color value, effectively quartering the spatial color resolution. While this compression is nearly imperceptible in photographic content with gradual tonal shifts, it conflicts fundamentally with synthetic, sharp-edged graphics such as rendered text.

Manifestations of Color Bleeding on UI Text

Because 4:2:0 drops 75% of the spatial color data, rendering sharp UI text onto a contrasting background produces several distinct visual defects:

1. Color Spillage and Smearing

When a high-saturation text element—such as a bright red warning label, blue hyperlink, or green badge—sits on a neutral (white, gray, or black) background, the downsampled chroma cannot align with the full-resolution luminance boundaries. The single color value assigned to the \(2 \times 2\) grid averages the text color with the background color. Consequently, the hue visibly spills outside the text boundary, staining the adjacent background pixels with an unnatural smudge.

2. False Halos and Edge Fringe

Glyph edges often develop dark, muddy, or chromatic halos. Because the subpixel rendering and anti-aliasing rely on precise pixel transitions, downsampling the color channels causes the transition pixels to be calculated incorrectly during decompression. For example, saturated red text on a black background frequently manifests with a dark, desaturated halo around the stems and curves of individual letters.

3. Loss of Stroke Integrity and Fine Detail

Fine strokes, serifs, punctuation marks, and crossbars in UI typography are often only one or two pixels wide. Under 4:2:0 subsampling:

4. Disconnect Between Luma and Chroma Edges

While the luminance component of the text remains sharp due to the 1:1 luma retention, the color boundaries lag behind. This creates an optical aberration where the viewer perceives a sharp, gray or darkened text silhouette overlaid with an out-of-focus color blotch.

Why UI Text Is Particularly Vulnerable

Natural photographs feature soft transitions, noise, and complex textures that disguise subsampling artifacts. In contrast, UI typography relies on:

When high-frequency edges encounter low-frequency color grids, mathematical reconstruction during AVIF decoding cannot reproduce the crisp demarcation necessary for clean text.

How to Prevent Color Bleeding

To eliminate subsampling artifacts on UI text in AVIF images: