[css-color-4] color() feedback

Syntax
========

I was reviewing the color() [1] syntax recently. While the functionality is sorely needed, I'm not so sure the syntax is optimal. Here are a few examples based on the current syntax:

color(var(red) tint(20%))
color(var(green) blend(yellow 20%))
color(lime blend(yellow 20%) shade(5%))

I think the number of nested parentheses make it hard to read and understand, especially on longer expressions. Why not something like:

color(var(red), 20% tint)
color(var(red), tint 20%)
color(var(green), blend with 20% yellow)
color(lime, blend with 20% yellow, 5% shade)

`with` in blend would be optional. The number of arguments would be the number of adjusters - 1. No particular order of tokens in each argument would be  enforced, as it seems with all the existing adjusters, it's not needed for disambiguation. 

I think something like this reads much more naturally, with no extra verbosity.

blend(a) adjusters
===================

I'm pretty sure having both a `blend` and a `blenda` adjuster [2] is going to confuse the hell out of authors, many of which will expect `blend` to act like `blenda` and take all channels of the colors involved into account, including the alpha channel. I think it would make more sense if `blend` did what `blenda` is currently specified to do and `blenda` was dropped. Authors would still be able to use the current functionality of `blend`, with the `a` adjuster.

contrast adjuster
=================

As specified, the contrast adjuster [3] is based on a target contrast of 4.5. However, WCAG AA permits a contrast ratio as low as 3, for bold text above 14pt or text above 18pt [4]. If the contrast adjuster allowed for a <number> parameter to specify target contrast, it could cover this use case as well. I'm still not sure about whether this covers most use cases. I've extensively experimented with trying to find sufficient contrast ratios for color combinations (I've even built a tool about this [5]) and in many cases I knew whether I wanted a lighter or darker color and just adjusted the lightness until it passed WCAG. With the contrast adjuster as it stands, this is not possible to control.


[1]: http://dev.w3.org/csswg/css-color/#modifying-colors
[2]: http://dev.w3.org/csswg/css-color/#blend-adjuster
[3]: http://dev.w3.org/csswg/css-color/#contrast-adjuster
[4]: http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
[5]: http://leaverou.github.io/contrast-ratio/

Lea Verou ✿ http://lea.verou.me ✿ @leaverou

Received on Monday, 10 March 2014 15:58:06 UTC