Contrast ratios should account for alpha transparency

[mirisuzanne]

Scope

• add alert beside ratio letting people know that it is an estimate

Mockups

Background Alpha Alert + Color Issue Info
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=112-2&mode=design&t=lOyosYvXrteuMN5Z-0

Foreground Alpha Alert
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=12%3A348&mode=design&t=4CwzTDrU2fakSiQ4-1

Mobile Alerts + Color Issue Info
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=83%3A10&mode=design&t=4CwzTDrU2fakSiQ4-1

Mobile Alerts + Color Issue Info 2
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=83%3A11&mode=design&t=4CwzTDrU2fakSiQ4-1

Requested on social media:

• https://c.im/@cwilcox808/110833633913519185
• https://bne.social/@james/110839978330469012

Look at contrast-ratio, originally made by Lea Verou. It handles foreground and background colors with alpha. When the background color has alpha, the contrast value has "error bars;" I think what it does is calculate what the resulting background color would be if there was black behind it, what it would be with white behind it, then calculate the contrast of those vs. the foreground color. The +- number represents those black/white extremes and the main number is the middle point between them.

• Example: https://www.siegemedia.com/contrast-ratio#white-on-hsl%280deg%200%25%200%25%20%2F%200.1%29
• Source: https://github.com/siege-media/contrast-ratio

[patrickhlauke]

Similarly, CCAe does alpha (but only for the foreground, since if you start doing it for background as well, you have to always make an assumption (generally, white) for what's behind that particular colour https://github.com/ThePacielloGroup/CCAe

[jamesnw]

Because #106 will handle background colors with alpha, this will just be limited to addressing alpha in the foreground color.

In essence, contrast is a measure of the difference between two displayed colors. Foreground colors with alpha are not displayed as transparent, but rather as a third color mixed with the background color. Ideally, we would want to get the contrast between the background and the mixed color, which requires us to compute a mixed color.

In practice, that mixed color is computed at display time, based on the display's settings. If we calculate the mixed color in the space that the other colors are defined in, we're not doing a similar calculation. This can lead to a range of results, even between monitors on the same computer.

Because color mixing for monitors is done in an RGB space, we'll do all the mixing in srgb. This matches the current behavior of both CCAe and contrast-ratio.

Despite the fuzziness that comes into play when alpha is involved, it is useful for designers to see an approximation of what the mixed color will be and what its contrast is, so that they can see approximately what level of transparency still passes.

[mirisuzanne]

We may just want to mark this as approximate in some way?

[SondraE]

@mirisuzanne @stacyk
Here are the alpha warning-related Figma file links.
Note: I don't know why Figma is suddenly displaying green lines around various bits of the mockups, and I haven't found the way to turn that view off yet.

Background Alpha Alert + Color Issue Info
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=112-2&mode=design&t=lOyosYvXrteuMN5Z-0

Foreground Alpha Alert
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=12%3A348&mode=design&t=4CwzTDrU2fakSiQ4-1

Mobile Alerts + Color Issue Info
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=83%3A10&mode=design&t=4CwzTDrU2fakSiQ4-1

Mobile Alerts + Color Issue Info 2
https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=83%3A11&mode=design&t=4CwzTDrU2fakSiQ4-1

[stacyk]

@SondraE I think the first and last link are the same, no? Is that the intention?

[stacyk]

https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=5-146&mode=design&t=fz0z6iKhkUnjtRs7-4 this might be the link for the first one

[mirisuzanne]

This is the same set of issues and links provided in the other story, right? I guess we don't need to break out individual stories - but it might be helpful to clarify which designs are related to which issue :)