Address accessibility for syntax highlighting

[lyndaidaii]

Approach: use our own syntax highlighting css style to have more control over

contrast issue:

• Change color from #d73a49 to #cc3745
• Change from #e36209 to #b74e05
  Test: Ran few packages with code fence readme with FastPass

Addresses #9269

[joelverhagen]

This looks like a "surgical" approach. I presume the goal is to minimize the apparent change in how it looks, as opposed to using one of the accessible CSS stylesheets?

I see a lot more hex colors mentioned than the two in your PR description. What is the intended scope of changes?

What methodology did you use to select the new colors?

Could you provide a representative screenshot showing the difference?

[joelverhagen]

I have some questions about approach. Overall, looks reasonable though.

[lyndaidaii]

This looks like a "surgical" approach. I presume the goal is to minimize the apparent change in how it looks, as opposed to using one of the accessible CSS stylesheets?

I see a lot more hex colors mentioned than the two in your PR description. What is the intended scope of changes?

What methodology did you use to select the new colors?

Could you provide a representative screenshot showing the difference?

I think we want to have our own style so that we could have more customization about how it looks like.
The reason why there is color contrast of original highlight github min style we were using is that we changed background to grey(#f6f8fa) instead of white in the first PR to match with devops code fence style.
The fast pass shows suggest color to avoid color contrast. that how I picked up new color to avoid contrast. Color changes are small, hard to tell the difference with original color and new color.
Before change:

After change:

[joelverhagen]

The "after" looks great still. Thanks for the additional information, and nice work on the rapid fix. Consider testing a sample on each of the top 10-20 syntax highlighting languages. It's not clear to me that different languages use colors consistently so testing a broad set of languages might be prudent (I'm thinking of you, F# 😄)

[lyndaidaii]

The "after" looks great still. Thanks for the additional information, and nice work on the rapid fix. Consider testing a sample on each of the top 10-20 syntax highlighting languages. It's not clear to me that different languages use colors consistently so testing a broad set of languages might be prudent (I'm thinking of you, F# 😄)

I tested all packages that have accessibility issues with FastPass. Thanks for reminder about other languages test!