Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hober opened this issue Jan 30, 2025 · 3 comments

Comments

@hober
Copy link
Member

hober commented Jan 30, 2025

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

@hober
Copy link
Member Author

hober commented Jan 30, 2025

Note about WCAG thresholds: they IIRC have different ones for body text, for headline text, and for things like borders.

@hober
Copy link
Member Author

hober commented Jan 30, 2025

This is related to #11534

@cookiecrook
Copy link
Contributor

WCAG thresholds:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants