Reasoning about Colors

The WCAG contrast ratio bit is good. People regularly treat the contrast ratio number as an oracle, but it’s actually a pretty poor scale, and not perceptually uniform. As seen here, a contrast ratio of 3 against a white background is almost certainly more distinct than a contrast ratio of 4 against a very dark background, and may even be more distinct than 5, depending on the device (rule of thumb that I just made up on the spot: TN LCD panels, which mostly means cheaper devices, will suffer more from low contrast on dark backgrounds).

For good figures, you need a non-linear perceptual scale, and to consider hue, saturation, ambient lighting (meaning both lighting in the room—good luck on that one!—and on the rest of the surface you control), and the nature of illuminated displays of various kinds. And probably other things too.

https://github.com/w3c/wcag/issues/695 is a good discussion of the issues and possible solutions, with https://www.myndex.com/SAPC/ demonstrating the work in progress. As you can see, it’s very much a research area.

In the short term, if you want to use the WCAG contrast ratio: if you’re using a light background, the 3 and 4.5 recommendations are probably OK, but if you’re using a dark background, bump up your requirements a fair way: go for at least one, probably two (so maybe 4.5 and 6 instead of 3 and 4.5).

One other thing that people routinely completely ignore in colour contrast matters is font weight. If the font is thinner, the contrast needs to be stronger to balance it out. I’m pleased that the SAPC/APCA work that’s happening takes this into account.

I think the most important parameter about color is the GrayScale.

GrayScale = 0.299 * R + 0.587 * G + 0.114 * B

Whenever I need a color-space I make sure to use Grayscale as an axis.

This gives me an easy way to get "the same, but in green", and I can easily choose between background and foreground color.

I don't know if this has an official name, but for color-picking I wouldn't want to use anything else.

This is so great! Many years ago I wrote an article for Digital Web Magazine called "Color Theory for the Color Blind", which up until today, I was mostly proud of. This blows that out of the water.

The goals were the same: How can we logically and programmatically understand color without relying on intuition, taste, and color sightedness?

I don't think either of us managed to solve the part about taste. Neither article has a particularly inspired use of color within it. However, I think this approach allows a color-blind programmer to work derivatively from a designer's initial concept and be confident that we're not butchering the product.