Browser extension for Accessibility Insights icon is not visible in high contrast "High Contrast Black" mode

[sahithikkss-zz]

Describe the bug

Browser extension for Accessibility Insights icon is not visible in high contrast "High Contrast Black" mode

To Reproduce Steps to reproduce the behavior:

1. Go to Edge browser with Accessibility Insights installed
2. Change Windows High contrast settings to "High Contrast Black"
3. Icon visibility is less and does not meet contrast ratio

Expected behavior

Clear visibility of Accessibility Insights Extension Icon in all high contrast modes

Screenshots

Context (please complete the following information)

• OS Name & Version:
• AI-Web Version & Environment:
• Browser Version: Edge/Chrome
• Target Page:

Are you willing to submit a PR?

No

Did you search for similar existing issues?

No

Additional context

N/A

[AhmedAbdoOrtiga]

I see the issue but I think it needs more investigation to see if we can can programmatically change extension icon when HC mode is on/off

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[DaveTryon]

@ferBonnin, our solution in the Windows app was to request new icons that include an internally contrasting border, so that we have correct contrast no matter what the background color happens to be. The same approach might also be viable in the extension.

[ferBonnin]

@DaveTryon thanks for sharing! this might be a good option instead of having to change the icons' colors

[ferBonnin]

per conversation with @peterdur lets try to make the background of the icon a white circle. Please let us know if a new image from design is needed.

[peterdur]

@ferBonnin Looking into the images, we'll need new versions of:

• https://github.com/microsoft/accessibility-insights-web/blob/main/src/icons/brand/blue/brand-blue-16px.png
• https://github.com/microsoft/accessibility-insights-web/blob/main/src/icons/brand/blue/brand-blue-48px.png
• https://github.com/microsoft/accessibility-insights-web/blob/main/src/icons/brand/blue/brand-blue-128px.png

Something to think about: The heart icon in the existing images approaches the edges of the image (the grey box in the image below); to add the circle would require making the heart much smaller. We may want to consider adding a white border to the heart instead.

[ferBonnin]

@peterdur got it, let me check with design.

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[ferBonnin]

@peterdur, we met with the design team. I am attaching a file with the 3 sizes and an 8px white border. Ok to mark this as ready for work?

new icons (2).zip

[peterdur]

we met with the design team. I am attaching a file with the 3 sizes and an 8px white border. Ok to mark this as ready for work?

@ferBonnin Looks like we need some tweaks; there's no 16px icon, and the 128px icon is a white heart rather than blue (or is that expected?)

[ferBonnin]

@ferBonnin Looks like we need some tweaks; there's no 16px icon, and the 128px icon is a white heart rather than blue (or is that expected?)

Ops, my bad! all icons should be blue. I will request a 16px icon, doesn't look like we have it in the Figma yet

[ferBonnin]

updated the icons file above

[ferBonnin]

@peterdur I think this can now be moved to Ready for work?

[peterdur]

Holding this for a warm-up project

[ferBonnin]

This has been resolved in the Production icon.