Reability returns contrast only for solid colours (WCAG)

[ColinLondon]

Hi All,

The TC readability function returns the contrast ratios of two colours. But even is an alpha colour is passed in the param the ratio returned is only for solid colours.

So passing:

"rgba(0, 102, 161, 0.5)", "fff"

and

"rgb(0, 102, 161)", "fff"

yields the same ratio (6.15).

I come up against designers that use alpha an awful lot, and working out the effective contrast ratio to meet with WCAG is a real pain.

Can TC please be made to support alpha colours? A bit like this one:

https://github.com/LeaVerou/contrast-ratio

If anyone knows how to do this, you will be on my Christmas card list!

Cheers

[bgrins]

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

[ColinLondon]

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.

[bgrins]

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

[ColinLondon]

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! ;-)

[ColinLondon]

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

[Noitidart]

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