Update default hostconfigs for color contrast

[paulcam206]

Related Issue

Fixes VSO #23940361
Fixes VSO #24096212
Partially fixes VSO #24094745

Description

Some of our default colors fail to meet WCAG's color contrast guidelines. In particular:

• the default green color used for "color": "good" (new green is only a bit darker)
• the default red color used for "color": "attention" (new red is only a bit darker)
• the default yellow color used for "color": "warning" (now we use a darker orange color -- yellow is a bad color to use on a white background when it comes to luminosity)
• the default gray for "isSubtle": true (new gray is only a bit darker)
• the default background gray for Container's "style": "emphasis" (new gray is a bit lighter to enhance foreground contrast)

TextBlock sample (before):

TextBlock sample (after):

ColumnSet sample (before):

ColumnSet sample (after):

isSubtle sample (before):

isSubtle sample (after):

How Verified

• local build, devtools color testing

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.

[paulcam206]

updated description with screenshots to aid in the discussion :)

[ghost]

🎉AdaptiveCards@2020.06 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