Automating Accessibility: How WeAble Fixes Contrast Issues For You

Manually adjusting colors to meet contrast requirements can be a tedious process. You find a pair that fails WCAG AA, tweak one color, check again, tweak the other, check again... Wouldn't it be great if you could automate this?

The @weable/a11y-color-utils library includes powerful functions designed to do just that: automatically find adjustments to fix contrast problems while minimizing the visual change.

The Challenge of Fixing Contrast

Simply making one color lighter or darker might fix the contrast ratio, but it can also drastically alter the original design intent or aesthetic. The goal is to meet the contrast target (e.g., 4.5:1) with the least perceptible change to the original colors.

How WeAble Automates Fixing

Our library tackles this with a couple of key functions:

1. findMinLightnessAdjustment(colorToAdjust, fixedColor, targetContrast):

   • This is the core engine for finding the best fix.
   • It takes two colors and a target contrast ratio.
   • It iteratively adjusts the lightness of colorToAdjust (both lighter and darker) until the targetContrast is met against the fixedColor.
   • Crucially, it calculates the visual difference (using DeltaE 2000) between the original colorToAdjust and potential lighter/darker fixes.
   • It returns the adjusted color (either the lightened or darkened version) that meets the target contrast with the smallest visual difference (lowest DeltaE) compared to the original.

2. fixWorstContrastPair(colors[], targetContrast?):

   • This function takes an array of colors (your palette).
   • It finds the pair of colors within the array that has the lowest contrast ratio.
   • If that lowest ratio is below the targetContrast (defaulting to 4.5:1), it calls findMinLightnessAdjustment to fix that specific pair.
   • It cleverly tries adjusting both colors in the failing pair against the other, choosing the adjustment that results in the least visual change overall.
   • It returns an object indicating which color was changed, its original value, the new value, and whether a fix was successfully applied.

Example Scenario

Imagine you have a palette: ['#FFFFFF', '#777777', '#000000']. The contrast between #FFFFFF (white) and #777777 (gray) is too low (around 2.8:1).

Calling fixWorstContrastPair(['#FFFFFF', '#777777', '#000000']) would:

1. Identify #FFFFFF / #777777 as the worst pair.
2. Call findMinLightnessAdjustment to find the best way to adjust #777777 against #FFFFFF to reach 4.5:1.
3. Return a result like { fixedPalette: ['#FFFFFF', '#707070', '#000000'], changedIndex: 1, originalColor: '#777777', newColor: '#707070', fixed: true } (Note: exact adjusted color may vary based on algorithm details).

The library automatically darkened the gray just enough to pass contrast with white, choosing the adjustment with the least perceptual impact.

Benefits

• Saves Time: Eliminates manual trial-and-error for fixing contrast.
• Preserves Design: Minimizes visual changes compared to naive lightening/darkening.
• Ensures Compliance: Helps systematically bring palettes into WCAG compliance.

By leveraging these automated fixing functions, you can significantly speed up the process of creating accessible color palettes. Explore the fixWorstContrastPair function in your next project!