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

I've made an attempt to contrast against another color in a branch of
css-color-function:

https://github.com/thetalecrafter/css-color-function/tree/contrast-against

If no contrast color is provided, then the base color is the contrast color.
If no percentage is provided, then the percentage is 100%.
If the contrast color's relative luminance is < .5, then the maximum
contrast color is hwb(base hue, 100%, 0%), otherwise hwb(base hue, 0%,
100%).
If the maximum contrast color has a contrast ratio <= 4.5 against
contrast color, or the percentage is 100%, return the maximum contrast
color.
Determine the minimum contrast color as follows:
If the base color has a contrast ratio > 4.5 against contrast color,
then base color is the minimum
Determine the minimum luminance as follows: (these are algebraically
derived from the contrast ratio definition)
If max is white, ((lum + 0.05) * minRatio - 0.05)
otherwise ((lum + 0.05) * minRatio - 0.05)
where lum is contrast color's luminance, and minRatio is 4.5
interpolate between base color and maximum contrast color until the
base color's luminance is between minimum luminance and max color's
luminance (since the change is monotonic you can binary search)
blend minimum with maximum according to the percentage. (0% is just
the minimum, 100% is just the maximum)

Here's what I think is the key: Knowing the direction of maximum
color, we can calculate the minimum contrast color's luminosity, and
as we move toward the maximum color, the luminosity of base color
changes monotonically. We also know which luminosity will be larger
when contrast ratio is calculated.

That does mean that in the contrast curve between the base color and
the background color, the colors where contrast decreases are
unreachable.

For the #808080 problem, perhaps a better way to determine the
direction of the maximum is which provides a better contrast ratio,
instead of lum < .5. Then the maximum color will be black instead of
white. I haven't tried that yet though.

I still feel like I might be missing something though. Let me know if
you see anything that doesn't look right.

-Andy

Received on Saturday, 14 March 2015 05:01:57 UTC