Fix CSS gradient contrast by testing each color stop

Short summary

Automated accessibility tools like axe-core return 'needs review' for text on CSS gradients because gradients lack a single background-color value. The solution is to compute contrast against each gradient color stop and take the minimum — the worst case always occurs at a stop since contrast changes smoothly between stops. This approach resolves most gradient contrast issues without pixel sampling, though semi-transparent stops and background images still require manual review.

• •Gradients cause axe-core to return 'needs review' because there is no single background-color to measure
• •Worst-case contrast always occurs at a gradient color stop, so checking each stop suffices
• •Code provided for computing WCAG 1.4.3 contrast ratios using relative luminance formula

Generated with AI, which can make mistakes.