Closed Bug 1568053 Opened 4 months ago Closed 3 months ago

Calculate contrast for text against complex bg similar to a11y panel

Categories

(DevTools :: Inspector, defect, P2)

defect

Tracking

(firefox70 fixed)

RESOLVED FIXED
Firefox 70
Tracking Status
firefox70 --- fixed

People

(Reporter: Harald, Assigned: mislam)

Details

Attachments

(6 files, 2 obsolete files)

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.

Flags: needinfo?(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.

Flags: needinfo?(mislam) → needinfo?(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.)

Flags: needinfo?(victoria)

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

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

(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.

Talked to Victoria, lets go with getClosestBackgroundColor approach.

Assignee: nobody → mislam
Summary: Contrast calculation shows incorrect values → Calculate contrast for text against the closest background color
Attachment #9080399 - Attachment description: Bug 1568053 - Calculate contrast for text against the closest background color → Bug 1568053 - Calculate contrast for text against the closest background color, r=yzen,gl
Priority: -- → P2
Attached image contrast-against-closest-bg (obsolete) —

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.

Flags: needinfo?(victoria)
Attachment #9080918 - Attachment is obsolete: true
Flags: needinfo?(victoria)
Summary: Calculate contrast for text against the closest background color → Calculate contrast for text against complex bg similar to a11y panel
Attachment #9082032 - Attachment description: Bug 1568053 - Create node actor method for calculating color contrast against complex bg → Bug 1568053 - Create node actor method for calculating color contrast against complex bg, r=yzen
Attachment #9080399 - Attachment is obsolete: true
Attachment #9082032 - Attachment description: Bug 1568053 - Create node actor method for calculating color contrast against complex bg, r=yzen → Bug 1568053 - Create node actor method getting complex bg color data for text nodes, r=yzen
Attached image contrast-range

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

Flags: needinfo?(victoria)
Attached image contrast-single
Attachment #9082032 - Attachment description: Bug 1568053 - Create node actor method getting complex bg color data for text nodes, r=yzen → Bug 1568053 - Create node actor method for getting complex bg color data for text nodes and refactor existing contrast calculation methods, r=yzen

This is glorious!!!

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

Great job :D

Flags: needinfo?(victoria)
Attachment #9082032 - Attachment description: Bug 1568053 - Create node actor method for getting complex bg color data for text nodes and refactor existing contrast calculation methods, r=yzen → Bug 1568053 - Create node actor method for getting complex bg color data for text nodes and refactor existing contrast calculation methods, r=yzen,gl
Attachment #9083539 - Attachment description: Bug 1568053 - Redesign contrast info in color picker (front-end), r=yzen → Bug 1568053 - Redesign contrast info in color picker (front-end), r=yzen,gl
Pushed by yura.zenevich@gmail.com:
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
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70
QA Whiteboard: [qa-70b-p2]
You need to log in before you can comment on or make changes to this bug.