W3C home > Mailing lists > Public > www-style@w3.org > March 2015

Re: [css-color] shifting a color to make adequate contrast with another color

From: Andrew VanWagoner <thetalecrafter@gmail.com>
Date: Mon, 16 Mar 2015 22:35:22 -0600
Message-ID: <CAECGhizhBQJYZkhKfzW=DdmDyo8SCbrG5t6BQDMh+jtEfh9-cQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
I was able to find where the problem got pushed to:

color(white contrast(#c54f4f 50%)) -> rgb(128, 128, 128) (contrast=1.2)

The min and max can be on opposite sides, and combining them can
produce a color with insufficient contrast.

If I remove the shortcut for colors that already provide enough
contrast it stops being able to interpolate to something with not
enough contrast, but now the color can be really really far (which is
exactly what you were saying, but I didn't understand the first time):

color(white contrast(#c54f4f 50%)) -> rgb(3, 3, 3)

white to nearly black is about as far as you can go. It was
surprisingly difficult to find a color pair that did this though.

To be honest, I don't much like the percentage anyway. :) Because
neither 0% nor 100% represent no change, it is difficult to predict
what a given percentage will do. The difference between 0 and 100 can
be really small or really large depending on the color. It seems more
helpful to provide the needed ratio, since the accessibility rating
requires different contrast ratios at different text sizes, and
different users have different needs.

color(white contrast(rgb(196, 79, 79) 4.5)) -> white
color(white contrast(rgb(196, 79, 79) 7)) -> black
color(rgb(196, 79, 79) contrast(white 4.5)) -> rgb(196, 79, 79)
color(rgb(196, 79, 79) contrast(white 7)) -> rgb(148, 61, 61)

-Andy
Received on Tuesday, 17 March 2015 04:35:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC