RE: [css-color] Exposing "brand"/"accent" color

> On Wed, Oct 15, 2014 at 5:52 PM, fantasai <fantasai.lists@inkedblade.net>
> wrote:
> >   * For example, if the color is expected to be usable as a
> >     background color, then we need some way of ensuring adequate
> >     contrast with the foreground color. Or vice versa.
> >
> >     Microsoft restricts the colors you can pick for the accent
> >     color so that its expected uses in the platform are all
> >     supported. We don't have the option of restricting the
> >     accent color palette, so we need some other way of handling
> >     this problem, such as naming the color more explicitly and
> >     creating guidelines for what kind of color it can be and
> >     how it should be used, or prescribing some kind of luminosity
> >     correction, etc.
> 
> Note that I'd be okay with offering it *today* as some API, so you can use JS
> to get your contrast right.  It's the presence of it as a CSS value, without
> measures to ensure contrast, that is bad.
> 
> >   * As another issue, some platforms might have more than one
> >     "accent color". Even if such platforms aren't popular right
> >     now, how can we set up the solution to this problem so it's
> >     compatible with such platforms and any extensions we need tao
> >     make in the future?
> >
> > In CSS we need to solve the problem in both a cross-platform and
> > future-proof manner, so while your request is *totally
> > understandable*, it's not enough info to really solve the problem...
> 
> Yup.

I'll try to provide few more actual examples to show how this is used today. Generally you are right of course on all the points, and this is exactly why this is so worth discussing here to design this for all applicable systems in the future.

Here are few examples on how this is currently used. In latest Windows Phone on the market the CSS highlight system color was mapped as system accent. This allowed to use this in HTML apps like this: http://winblog.blob.core.windows.net/win/sites/3/2014/04/clip_5F00_image002_5F00_3D2E35C2.png (taken from http://blogs.windows.com/buildingapps/2014/04/18/winjs-on-windows-phone-8-1/), or to see this in motion:  http://www.youtube.com/watch?v=nAzW8y7pt_w#t=758. Notice that the blue color you see (the only color that is not black or white) is actually accent color and would change whenever user picks new accent color in the system settings.

Re: fantasia's foreground/background contrast and readability. In current internal discussions on the accent color topic I've learned that the future thinking is to expose those special colors as a collection of colors (accent, foreground, background, maybe others) that would be guaranteed to be readable and complimentary. The troubling point I see here is that the team creating this feature for Windows has let me know that normally you cannot calculate those colors yourself based on a single color - you would need to get all of them to guarantee readability. In CSS system colors we can map those to any existing colors - foreground is just default color for "color" property and background is default for "background" property. Unless author really wants manual control this would work by default. Looking at Mac OS I believe their color has been selected to work with default black foreground color, so it's essentially similar model - author is fine, unless he or she goes full manual control.

On the topic of JS vs. CSS. Generally both are useful - JS is really prohibitively expensive for application frameworks (like WinJS above). If you instantiate control and need to query some value in JavaScript and set the explicit style - the performance by definition would never match native CSS performance. Moreover without getting too technical here on Microsoft platforms you already have access to WinRT (just in case this is new application runtime) through JavaScript - so getting accent color through WinRT JavaScript projection is already supported (not in browser though!). But generally I agree with you that if this value is available through CSS it should be accessible through CSS OM somehow.

More than one "accent" color or for that matter is also interesting. I understand that for color calculation there would be functions in CSS variables (lighter, darker), but in cases of special system colors author might not know what would he need - lighter or darker depending again on background or foreground. As far as I understand Windows exposes this as named colors like AccentLighter or AccentDarker, but I really don't like this for CSS. This would be nightmare to maintain with any added colors and would become compatibility nightmare for applications using this in cases like deprecation or name changes. Any ideas how it's possible to expose is CSS in future proof fashion is really appreciated.

Received on Friday, 24 October 2014 00:52:26 UTC