1567249 - Update color contrast calculation in the a11y panel so that it works with simulation mode

Status: RESOLVED FIXED

(DevTools :: Accessibility Tools, enhancement)

Description

[Maliha Islam [:mislam]]

We would like to be able to use the color contrast feature in the accessibility and inspector panels when a simulation filter is applied. When a color matrix is set, color contrast ratio should be calculated based on the transformed colors for text and/or background (https://searchfox.org/mozilla-central/source/devtools/shared/css/color.js#1374).

The color matrices can be found here: https://github.com/eeejay/NoCoffee/blob/master/popup.js#L3-L13

Comment 1

[Maliha Islam [:mislam]]

Attachment: Bug 1567249 - Update a11y contrast calculation to make it work with applied simulation matrices, r=yzen,nchevobbe

Comment 2

[Maliha Islam [:mislam]]

Hi Victoria!

We need your opinion on whether or not we should make contrast calculation in the Inspector work with simulations enabled. Making contrast calculation work with simulations involves transforming the original RGB color to a different RGB color (depending on the color blindness simulation matrix applied). The concern is that the inspector panel could have multiple CSS color properties (such as background-color, border-color, etc). So, we have a couple of options:

1. Leave contrast calculation as is in the Inspector (calculated using original RGB colors). When simulations are enabled, only the contrast calculation in the accessibility panel works properly (calculated using transformed RGB colors). This would lead to some inconsistency in the way contrast is calculated in the inspector and accessibility panels and lead to different contrast values.

2. Since contrast calculation only happens for the "color" CSS property, we could only show the transformed RGB colors within the color picker tooltip. However, if we don't also change the circular color swatch (beside the "color" label in the CSS styles panel in the inspector), there would be some inconsistency with the transformed RGB colors used for contrast calculation inside the tooltip vs. outside the tooltip. BUT, changing the color swatch for the "color" property and not the other CSS color properties would introduce another layer of inconsistency.

• If we decide to go with this approach anyways, should we also transform the color in the circular color preview inside the tooltip?

3. Change all CSS color properties/colors that appear in the Inspector to show transformed colors. This would make everything consistent. Only downside is this requires a bunch of sweeping changes and gets complicated.

Please feel free to make an alternative suggestion. As always, your suggestions are greatly appreciated!
Thanks :)

Comment 3

[Maliha Islam [:mislam]]

If changes in contrast calculation in the Inspector are requested, we will file a different bug :) This one should only handle contrast calculation in the accessibility panel.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/48b2e9346da3
Update a11y contrast calculation to make it work with applied simulation matrices, r=yzen,nchevobbe

Comment 5

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 9086232 [details]
Bug 1567249 - Update a11y contrast calculation to make it work with applied simulation matrices, r=yzen,nchevobbe

Beta/Release Uplift Approval Request

• User impact if declined: If declined, colour contrast checks will not include color deficiency simulation into account which would be confusing because visually they the values and colours will not match.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Not yet (in integration right now)
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Simply modified the colour contrast value in case when the color deficiency simulation is ON.
• String changes made/needed: None

Comment 6

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/48b2e9346da3

Comment 7

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 9086232 [details]
Bug 1567249 - Update a11y contrast calculation to make it work with applied simulation matrices, r=yzen,nchevobbe

Improved color accessibility checking tools, sounds worth uplifting to beta 4.

Comment 8

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/releases/mozilla-beta/rev/d71c526dad67

Comment 9

[Victoria Wang [:victoria]]

Sorry for the delay in responding to this! Sounds like you went with option 1? That seems good to me.