[Designer] Change icon and error background colors for contrast

[paulcam206]

Related Issue

Fixes VSO #24094745

Description

The blue color we use for icons (and the error background) is a bit too light to contrast well with a white background (or white text on the blue color's background in the case of the error banner). Fix is to use a darker blue in CSS.

Before (icons)

After (icons)

Before (error banner)

After (error banner)

How Verified

• local build, devtools color tooling

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @paulcam206. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.

[dclaux]

Given that the tree view icons are for presentation only, there really shouldn't be any accessibility requirement as to their color. That being said I don't see a problem with the updated color.

You haven't included a screenshot of the error pane though, it would helpful.

[paulcam206]

Given that the tree view icons are for presentation only, there really shouldn't be any accessibility requirement as to their color. That being said I don't see a problem with the updated color.

It's not specific to the color so much as the contrast of that color to the background color. This is an accessibility issue in that proper contrast helps folks with visual impairments (but not complete blindness) successfully interact with our stuff. Indeed, it is in aid of folks without any visual impairments in that it reduces eye strain and increases impact and recognition of text. If the icons weren't in some way helpful, we probably wouldn't have included them in the design

You haven't included a screenshot of the error pane though, it would helpful.

Fair enough -- updating the description...

[dclaux]

I don't want to beat a dead horse, but no, it isn't an accessibility issue. It would be if there was no text next to the icon. The icon might as well not exist in the tree view, it would be just as functional. Plus, I believe you added some code recently to mark the icon with aria-role: presentation which means it will be skipped by screen readers, further emphasizing the fact that it is not necessary, and really is only eye candy.

[paulcam206]

I don't want to beat a dead horse, but no, it isn't an accessibility issue. It would be if there was no text next to the icon. The icon might as well not exist in the tree view, it would be just as functional. Plus, I believe you added some code recently to mark the icon with aria-role: presentation which means it will be skipped by screen readers, further emphasizing the fact that it is not necessary, and really is only eye candy.

Accessibility in this context doesn't mean just people that rely on screenreaders. As you point out, we don't expose these icons to screenreaders because they have text labels next to them. However, the icons can serve to reduce cognitive load for users in that they can skim through the icons to find a particular card element (screenreader users would probably use their screenreader's built-in search function to do the same). Appropriate contrast ratios can help with recognition.

[ghost]

🎉[email protected] has been released which fixes this issue.:tada:

Handy links:

• Release Notes
• AdaptiveCards Website
• Official NPM Designer Release
• Official NPM Templating Release
• Official NPM Renderer Release
• Official Nuget Templating Release
• Official Nuget Renderer Release
• Official Maven Renderer Release
• Official CocoaPod Renderer Release