Measuring Visual Difference: Using DeltaE with the WeAble Toolkit

When we talk about fixing contrast or generating palettes, we often mention minimizing "visual difference." But how do we quantify that? The answer lies in Delta E (ΔE), a standard metric for measuring the perceptual difference between two colors.

The @weable/a11y-color-utils library includes a function to calculate this important metric.

What is Delta E?

Delta E (often specifically Delta E 2000, the most common modern formula) calculates a single number representing the difference between two colors as perceived by the human eye. It takes into account the complexities of color perception in a way that simple RGB or HSL differences cannot.

• A ΔE of ~1.0 is generally considered the smallest difference noticeable by the human eye.
• A ΔE of 2-3 is a perceptible but usually acceptable difference.
• ΔE values above 5 represent clearly noticeable differences.

Why Use Delta E in Accessibility?

While not a direct WCAG requirement itself, Delta E is incredibly useful in accessibility workflows:

1. Minimizing Contrast Fix Impact: When using functions like findMinLightnessAdjustment, the library uses Delta E internally to find the adjusted color that meets contrast requirements while having the lowest ΔE compared to the original. This preserves the original design intent as much as possible.
2. Palette Cohesion: You can use Delta E to check if colors within a generated palette are sufficiently distinct from each other, preventing combinations that might be confusingly similar.
3. Comparing Alternatives: If you have multiple potential replacement colors that all meet contrast standards, you can calculate the Delta E between each replacement and the original color to choose the one that is visually closest.

Using Delta E with WeAble

The library provides the deltaE function:

import { deltaE, initLicense } from '@weable-tools/a11y-color-utils';

// initLicense('YOUR_KEY'); // Assume initialized

const color1 = '#777777';
const color2 = '#707070'; // A slightly darker gray
const color3 = '#CCCCCC'; // A much lighter gray

const difference1 = deltaE(color1, color2);
console.log(`DeltaE between ${color1} and ${color2}: ${difference1.toFixed(2)}`);
// Example Output: DeltaE between #777777 and #707070: 2.35

const difference2 = deltaE(color1, color3);
console.log(`DeltaE between ${color1} and ${color3}: ${difference2.toFixed(2)}`);
// Example Output: DeltaE between #777777 and #CCCCCC: 17.79

Parameters:

• color1 (string): The first color hex code.
• color2 (string): The second color hex code.

Return Value:

• Returns a number representing the Delta E 2000 difference between the two colors, or throws an error if colors are invalid or the feature is not licensed.

In the example, the difference between #777777 and the slightly adjusted #707070 is small (ΔE ≈ 2.35), indicating a subtle change. The difference between #777777 and the much lighter #CCCCCC is large (ΔE ≈ 17.79), indicating a very noticeable visual shift.

Conclusion

Understanding and utilizing Delta E allows for more sophisticated and design-sensitive accessibility work. By incorporating the deltaE function from @weable/a11y-color-utils, you can quantify visual differences, make more informed choices when adjusting colors, and ensure that your accessible palettes remain aesthetically cohesive.