Re: [csswg-drafts] Allow specifying the "accent color" of a form control element (#5187)

I went ahead and glanced at component libs across the web as well and here are the [results](https://docs.google.com/spreadsheets/d/16DS4Dt-I2NoX7pB9ZW6fLYOnTgZdHlUHvO7tM0N3ZvY/edit#gid=0).

Every single one that I can find allows some type of complete theme change. This is somewhat similar to `prefers-color-scheme` in the platform but it allows you to denote specific ones (primary, secondary, danger, etc). There are a few that allow you to pass in specific params or even select a custom color to override the where that color is used in the component (similar to accent color above) but only Material has the color helpers to ensure color contrast. Based on what I've seen from the component libraries and how the themes work you select a single color and the control adjusts accordingly while ensuring contrast. This aligns with what @heycam proposes with regards to specifying it in a way that the UA will do the color math based on the accent color as that is what the author is going to desire.

Now, designers commonly don't desire true black or white and so I can see them wanting to be able to control the foreground color. If it isn't a lot of additional impact on implementation I would specify something like for both foreground and background.

> If `accent-color-foreground` computes to `auto` and `accent-color-background` computes to a [CSS color](https://drafts.csswg.org/css-color-4/#typedef-color) then the user agent **MUST** use a color that meets the [WCAG minimum contrast requirements](https://www.w3.org/TR/WCAG/#contrast-minimum) of 4:5:1

This will achieve what @heycam denotes above while also allowing designers that want to still adhere to the WCAG but possibly in their own way do so.

-- 
GitHub Notification of comment by gregwhitworth
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5187#issuecomment-662230588 using your GitHub account

Received on Wednesday, 22 July 2020 04:12:47 UTC