Skip to content

color-contrast support for basic gradient backgrounds #4628

Open
@dbjorge

Description

@dbjorge

Product

axe-core

Feature Description

Today, color-contrast gives an incomplete result anytime it detects text with a background-image that involves any sort of gradient.

However, it's relatively common for gradient backgrounds to be "simple" cases like this:

<span
  style="background-image: linear-gradient(rgb(240, 240, 240), rgb(255, 255, 255))"
>
  Text
</span>

...where color contrast would pass if tested at any point along the interpolation between the 2 color stops.

It would be a nice feature for axe-core to be able to handle "simple" gradient cases like this by testing a foreground color against multiple background colors and only giving a bgGradient incomplete if the different tests give different results.

In color spaces where relative luminance changes monotonically during a gradient interpolation (eg, sRGB), this would just require testing against each color stop (and confirming that "which of fg and bg is lighter" doesn't swap between the stops). In other color spaces (probably including the default gradient interpolation color space (oklab)), it might be simplest to just pick some arbitrary number of points in the color space along the interpolation and test each.

Metadata

Metadata

Assignees

No one assigned

    Labels

    color contrastColor contrast issuesfeatNew feature or enhancement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions