1568053 - Calculate contrast for text against complex bg similar to a11y panel

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[:Harald Kirschner :digitarald]

Attachment: Bad contrast on text that should have proper contrast

What were you doing?

1. Open Inspector on mozilla.com
2. Select the white on purple text .section-title "Seriously Private Browsing"
   3a. Add a color attribute to the rule .page-section h2.section-title and edit it
   3b: Edit the color attribute that makes the text white

What happened?

Initial contrast value is 1.00, changing the color to worse contrast makes the number better.

What should have happened?

Use the purple background of the selected element as contrast reference.

Comment 1

[:Harald Kirschner :digitarald]

Attachment: Worse contrast shows good rating

Comment 2

[Maliha Islam [:mislam]]

Hi Harald,

Thanks for filing this. I know this is a bit misleading, but all contrast ratios in the inspector panel are calculated against a white background (if you hover over the contrast ratio itself, a tooltip should mention that). So technically, a darker text color against white background will have a higher ratio compared to white text on white background. If you want the contrast ratio to be calculated against the actual background color, you need to use the element picker in the accessibility panel unfortunately.

That said, I realize it's not intuitive at all, so maybe Victoria can point us in the right direction.

Comment 3

[Victoria Wang [:victoria]]

Oh, I'm sad to hear of this limitation! Can we know if the text is indeed against a white background? If so, we could show the contrast ratio information only when it has a white background. If we can't know the background at all, I worry that this feature is too risky due to the high possibility of false negatives/positives.

In Inspector, could there be some MVP for a background-referencing contrast ratio that just detects the most descendant background color? (E.g. avoiding complicated situations with images, as Chrome's does.)

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

There is no way to accurately get the background without a mouse picker. While we could traverse the DOM tree from JS to get the nearest node and get its background color, if the element is positioned absolutely or there is a background gradient, we would still have the incorrect background color.

3 years ago when we were working on the color picker redesign along with the color contrast in Bug 1332090, we took the closest background color and displayed the background color which the text color was calculated against. I would suggest that as the best solution going forward. This seems to be also done in the audit panel.

https://searchfox.org/mozilla-central/source/devtools/server/actors/inspector/utils.js#330

Comment 5

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

What about allowing users to choose background colour with an eye dropeer with white as the default ?

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Yura Zenevich [:yzen] from comment #5)

What about allowing users to choose background colour with an eye dropeer with white as the default ?

I think we already have a good enough solution with getClosestBackgroundColor. If we are okay with adding an eye dropper, I would prefer to see the ability to also view and edit the background colour since we shouldn't have to let the user guess what the background colour is being used to calculate the contrast ratio.

https://contrast-ratio.com/ to me would be the standard we want to aim for.

Comment 7

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

Talked to Victoria, lets go with getClosestBackgroundColor approach.

Comment 8

[Maliha Islam [:mislam]]

Attachment: Bug 1568053 - Calculate contrast for text against the closest background color, r=yzen,gl

Comment 9

[Maliha Islam [:mislam]]

Attachment: contrast-against-closest-bg

Update: Contrast calculation must be similar to the accessibility panel. This means, we need to account for complex backgrounds such as gradients, images, etc. In the case that the contrast calculation fails, try to calculate it against the closest background color.

Comment 10

[Maliha Islam [:mislam]]

Attachment: Bug 1568053 - Create node actor method for getting complex bg color data for text nodes and refactor existing contrast calculation methods, r=yzen,gl

Comment 11

[Maliha Islam [:mislam]]

Attachment: Bug 1568053 - Redesign contrast info in color picker (front-end), r=yzen,gl

Depends on D40086

Comment 12

[Maliha Islam [:mislam]]

Attachment: contrast-range

Hi Victoria! I have attached the updated contrast section screenshots for this bug. Let me know your thoughts :)

Comment 13

[Maliha Islam [:mislam]]

Attachment: contrast-single

Comment 14

[Victoria Wang [:victoria]]

This is glorious!!!

For the dash between the range of colors, we can use the slightly longer en-dash

Great job :D

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d9a83f0385d5
Create node actor method for getting complex bg color data for text nodes and refactor existing contrast calculation methods, r=yzen,gl
https://hg.mozilla.org/integration/autoland/rev/c009e486b4c2
Redesign contrast info in color picker (front-end), r=yzen,gl

Comment 16

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/d9a83f0385d5
https://hg.mozilla.org/mozilla-central/rev/c009e486b4c2