[A11y] [VPAT] 1.4.1 Use of Color - Home page - Buttons do not have sufficient color contrast

[dave-gus]

Steps to Reproduce:

Create a Search project and go to the Search project homepage (ex: https://my-elasticsearch-project-eca3d1.kb.eu-west-1.aws.qa.elastic.cloud/app/elasticsearch)

Scroll down to the buttons below the 'Language Client' section

Issue: The 'Create a Connector' and 'Upload a File' buttons do not have sufficient color contrast between the color of the button and the background. Color is the indicator that it is a button and the contrast ratio must be at least 3:1.

The color of each button – rbg(204, 228, 245) -- and their light blue background – rgb(230, 241, 250) -- have a color contrast of only 1.1:1. To indicate that it is a button, there should be a contrast ratio of at least 3:1 or there should be a border around the button with a contrast ratio of at least 3:1 against the light blue background.

[daveyholler]

@1Copenut We probably need to look at fixing this at the EUI level, yeah? I'm gonna verify that we don't have any custom styling, but I suspect that this might be stemming from the fact that the button backgrounds are transparent colors so when they're stacked on top of a colored panel, the button background color is darker than it should be, thereby reducing contrast in the button: https://github.com/elastic/eui/blob/d795367f7b604a44778af626c3c1f35713e9775e/packages/eui/src/themes/amsterdam/global_styling/mixins/button.ts#L49C3-L51C4

cc: @JasonStoltz

[JasonStoltz]

@daveyholler The contrast of secondary buttons on callout backgrounds is quite bad.

I think it's always been bad, but at some point it does appear that it has gotten worse.

Jumping back to v60, it looks a bit better than it does in current.

It looks like sometime around v66 or v67 something changed which caused it to get worse. It looks like we were at 1.09, and we're now at 1.05. (Looks like this was the change)

In either case, we still don't pass contrast requirements.

Short term

• We could use primary buttons instead of secondary buttons in callouts. I think that's the only thing we could that actually gets us to a point where we meet these requirements.
• We could also look at what happened in 66/67 to see if we could get at least slightly better

Long term - We've been discussing the idea of a high-contrast mode for EUI. Implementing this may be the only way to solve this issue across the board for Kibana. The issue is not just limited to this input, it's for many inputs across the UI.

[daveyholler]

@JasonStoltz I'm basing this off memory, which may be flawed, but IIRC our buttons use a transparent background. Theoretically, changing them to use a full shade would allow the text contrast functions to calculate better. Right now, I think they're getting mucked up here because its a transparent blue, overlaid on top of another blue, which then screws up the contrast.

[JasonStoltz]

@daveyholler That's quite possible.