Insufficient color contrast in EuiCodeBlock

[ryankeairns]

In addressing a separate a11y issue within Kibana's 'Add data' section, we noticed axe warnings for insufficient color contrast related to the pink accent colored used in EuiClodeBlock. It's SO close but falls just short, and the same value can be seen in the EUI docs examples.

Kibana tutorial

EUI docs

A quick scan traces back to here (we may want to check other colors here as well):

eui/src/global_styling/variables/_colors.scss

Lines 121 to 147 in b5752fc

	// Code
	$euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
	$euiCodeBlockColor: $euiTextColor !default;
	$euiCodeBlockSelectedBackgroundColor: inherit !default;
	$euiCodeBlockCommentColor: #998 !default;
	$euiCodeBlockSelectorTagColor: inherit !default;
	$euiCodeBlockStringColor: #DD0A73 !default;
	$euiCodeBlockNumberColor: #00A69B !default;
	$euiCodeBlockKeywordColor: #333 !default;
	$euiCodeBlockFunctionTitleColor: inherit !default;
	$euiCodeBlockTagColor: #0079A5 !default;
	$euiCodeBlockNameColor: inherit !default;
	$euiCodeBlockTypeColor: #0079A5 !default;
	$euiCodeBlockAttributeColor: inherit !default;
	$euiCodeBlockSymbolColor: #990073 !default;
	$euiCodeBlockParamsColor: inherit !default;
	$euiCodeBlockMetaColor: #999 !default;
	$euiCodeBlockTitleColor: #900 !default;
	$euiCodeBlockRegexpColor: #009926 !default;
	$euiCodeBlockBuiltInColor: #0086B3 !default;
	$euiCodeBlockSectionColor: #FFC66D !default;
	$euiCodeBlockAdditionBackgroundColor: #DFD !default;
	$euiCodeBlockAdditionColor: inherit !default;
	$euiCodeBlockDeletionBackgroundColor: #FDD !default;
	$euiCodeBlockDeletionColor: inherit !default;
	$euiCodeBlockSelectorClassColor: inherit !default;
	$euiCodeBlockSelectorIdColor: inherit !default;

[ryankeairns]

While our base text colors pass the 4.5 contrast on $euiPageColorBackground, EuiCodeBlock uses $euiColorLightestShade which is slightly darker. This results in several of the code block colors not meeting the 4.5 contrast level.

Two initial options come to mind:

1. we could futz with the text color values in EuiCodeBlock or
2. we could consider using $euIPageColorBackground as the bg color for code blocks

A potential downside for option 2 is that it would blend into the page background color if it were to be used directly. I browsed a few Kibana examples and each appeared on a panel style (white) background. That said, I can't 100% say it couldn't happen.

We could do something else like add a 1px border, or just live with the blended state and let implementors decide whether to sort that out (e.g. override bg color, add a panel/white container, etc.).

Thoughts?

After (left), Before (right)

[cchaos]

My concern with changing the background color of the codeblock is in case the consumer has placed it not within a panel and so it resides on top of the page background color. Then there wouldn't be any visible boundary.

I would honestly opt for taking a better look into our color scheme for code blocks. We have the makeHighContrast mixin that would allow us to ensure that all the hex colors we use has a strong ratio.