Reability returns contrast only for solid colours (WCAG) about tinycolor HOT 6 OPEN

@jladbury any idea how alpha values could be taken into account with WCAG?

from tinycolor.

Here's how I went about it...

BG alpha is a no-no, as you cannot know what is behind it. So if this really is a deal-breaker for designers, then the only thing to do is to capture a mock-up screen and take some readings from that.

But most alpha is actually applied to the FG, with a solid colour for the BG.

That means the effective FG can be calculated. And that effective FG, along with the solid BG, is what is passed for contrast analysis. I have tested this extensively, and it works.

from tinycolor.

@cpshanley interesting, how are you calculating the effective FG?

from tinycolor.

It is the same formula, performed three times - once for each of the RGB components. So for the R it is:

outputRed = (foregroundRed * foregroundAlpha) + (backgroundRed * (1.0 - foregroundAlpha));

Do that with the G and B (with the same alpha value, of course) and you get the effective FG.

Off to bed now! ;-)

from tinycolor.

Just to add... You can see from the formula that it accommodates an alpha to the FG, not to the BG.

from tinycolor.

This is very cool, the exact problem I'm having. Will try out your PR thanks @xi

from tinycolor.