Skip to content

[css-color-5] Requirements for light and dark colors returned by contrast-color(<color>) #9970

Open
@LeaVerou

Description

@LeaVerou

In #9166 we resolved to add a contrast-color(<color> max?) MVP that returns white or black if max is specified and a UA-dependent "very light" or "very dark" color when max is not specified.

This issue is to brainstorm the requirements that color should meet.

Right now, the only requirement I have added to the spec is that the returned colors SHOULD pass WCAG 2.1 AA-large, as that is a legal requirement for many authors.

However, part of the original proposal was that there should be a threshold of how close these colors should be to white or black.

So we need to decide:

  • What color difference measure should we use here?
  • What should the threshold be?
  • Should the threshold be different for light and dark colors?
  • Should there be a minimum difference? Right now the spec permits UAs to even return the same color in both cases. Do we want to continue allowing this?

I have no opinion yet, but since we have the stricter max version, I propose we keep the threshold pretty liberal here to allow UAs room to innovate.

One observation from my (not trivial, but not very extensive either) design experience is that it is much more common to want a dark color (instead of black) over a light tint, whereas when placing light color on a darker background one typically goes for pure white. The syntax does not currently allow expressing this intent. I wonder if we need to introduce a max-light keyword for this. I wonder if this needs a new issue, so we can keep this strictly about the questions above.

Initial exploration:

Metadata

Metadata

Assignees

No one assigned

    Labels

    a11y-trackerGroup bringing to attention of a11y, or tracked by the a11y Group but not needing response.css-color-5Color modification

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions