(Accessibility) - Home/Tutorial (probably multiple places) Color Contrast Issue

[barlowm]

There are a number of cases of color contrast issues

Steps to reproduce
From the Kibana Home page, in the "Observability" panel, click the "Add APM" button
In Step 2 - Configure the agent section, there is insufficient color contrast

Here is the current screenshot:

The highlighted text has a color contrast of 4.48:1 to the background.
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Not much of a difference but I've been knocked down before because I was off by a small amount like this.
And at the same time I DO have a difficult time distinguishing the highlighted text from the normal text.

This is a result of the folloring class:

.euiCodeBlock .hljs-string, .euiCodeBlock .hljs-subst, .euiCodeBlock .hljs-doctag {
    color: #DD0A73;
}

I would recommend changing the text color from the current value (#DD0A73) to something on the order of #D10A6E which provides a color contrast of: 4.91:1. I would also recommend bolding the text to make it stand out even further

Kibana Version:
7.8.0

OS:
Windows

Browser:
Chrome

Screen reader: [if relevant]
N/A

Relevant WCAG Criteria:
WCAG Criterion - Level A/AA/AAA
1.4.3 Contrast (Minimum) Level AA

Relevant ARIA spec: [](link to https://www.w3.org/TR/wai-aria-practices/)

[myasonik]

This is fixed in 7.9 through an improvement in EUI!

EUI PR: elastic/eui#3309
EUI being merged in Kibana: #68141

[elasticmachine]

Pinging @elastic/kibana-core-ui (Team:Core UI)