w3c / w3c/csswg-drafts

[css-color] We should consider addressing different use cases contemplated for contrast-color() with separate CSS functions

Open
#11,619 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-color-6
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

There are a number of different use cases & requirements for "please give me a color that contrasts with this/these other color(s)" functions, but given the differences between these use cases, perhaps they'd best be addressed with additional color functions.

  1. "Given this color, please compute a different color for me that contrasts with it." Variations of this include distinguishing between "this is intended for foreground text v. a background under text" and some threshold of sufficient contrast (WCAG, for instance, has 3 different thresholds for different situations).
  2. "Given a color and a set of colors, tell me which color from that set maximally contrasts" (same fore/background and threshold variations as in (1), but the key difference here is that the author provides a set of colors and there's a guarantee that the returned color will be from that set)
  3. "Given a pair of colors, tweak one or both of them the minimum amount to get the contrast 'good enough'" (same fore/background and threshold variations)
  4. Contrasting color over an unknown background (e.g. an image)

Two relevant personas:

  1. Maintainer of existing, small/medium (not Google-scale) website(s) who want to improve legibility/a11y without messing with the existing design much
  2. Designer at company with very particular and exact brand guidelines who can only use colors from a pre-defined set

@cookiecrook @fantasai

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the four contrast-color() use cases and the two personas described in the issue. Review the existing contrast-color() proposal and determine whether the requirements call for separate functions or another clarified direction. Done means the use cases, thresholds, and expected color-selection behavior have an agreed specification.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, design, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.