EUI High Contrast Support

[daveyholler]

Let's discuss adding high-contrast support to EUI. These explorations will allow us to:

1. Push the envelope with APCA (WCAG3) specifications without risking our compliance in WCAG2
2. Provide a better experience for Windows' "high contrast" mode

---

Resources:

• WCAG 🥊 APACA
• The Guide To Windows High Contrast Mode
• Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties
• WHCM and System Colors

[1Copenut]

So a year on, this conversation has come back around again. I've got a customer who's reported several views that don't render the UI well when users turn on Windows high contrast mode. I'll link the screenshots here (okay, screenshots of screenshots) to restart the discussion.

---

---

[craig-abbott]

We should be able to solve these things fairly easily with media queries.

For example:

/* Users who prefer more contrast */
@media (prefers-contrast: more) { … }

/* Windows High Contrast Mode */
@media screen and (-ms-high-contrast: active) { … }

/* Users who prefer less contrast */
@media (prefers-contrast: less) { … }

Or is the question more around how should it look / be designed, rather than feasibility @daveyholler @1Copenut?

[1Copenut]

Great question @craig-abbott. I think my original ask wasn't clear and actually two questions in one:

1. How could we handle this from a technical perspective? Media queries seem a great way to do so.
2. Do we have time, bandwidth, desire, to take this on as a near-term project? Mid-term? Long-term?
3. Who will make the calls for what and how to change items we discover that need improvement?

I see this being a project where 1-2 people with access to Windows machines use a Kibana instance with high-contrast mode enabled, and make a content audit of things that need improved. That audit would be reviewed and relevant stakeholders identified (IE, modal frame should be added to EuiModal component), and issues created to prioritize the work.

It feels like a mid-effort project, probably 2 people (designer, engineer), 2-3 weeks to audit, log, and fix.

[craig-abbott]

Makes sense @1Copenut.

In terms of testing Windows High Contrast mode, as a 'path of least resistance', I've had success in the past booting up a Windows VM on a Mac using UTM. It's open source, so it's free. You can use a bridged connection, making each machine show up as a separate device on the network, so you can spin up your local dev environment on the Mac and provided the ports and firewall settings are set up correctly you can navigate to it in the browser on the Windows VM to test it.

This is also useful for testing with the NVDA screen reader!

I'm obviously not an Elastic DevOps engineer though, so I have no idea if this would allowed or would work for Kibana given it's complexity. But it works for basic ExpressJS sites etc, so I imagine it would.

My experience is also based on organisations refusing to buy additional devices, so perhaps I'm overcomplicating this if Elastic are just prepared to give you Windows devices haha.

[1Copenut]

I've actually got a Windows machine; it's more about time and competing priorities for me. I'm hoping to drive the project forward, but am going to have to ask charity and goodwill from the UX and EUI teams to get this done. I appreciate you outlining how you've accomplished this using VMs. I think we'll need such a strategy because there's not a lot of Windows devices available for our teams to use.

[craig-abbott]

As a separate note, but something to be aware of when you take on this work.

Versions of Google Chrome and Microsoft Edge from 124 onwards no longer apply the expected override colours to pseudo-elements in Windows High Contrast Mode.

So if EUI does any overriding of basic components like list item bullets, checkbox/radio button styles, or expand/collapse indicators on details components etc, and they use ::before or ::after you might find them rendered black in High Contrast Mode.

I also just found Microsoft are deprecating the -ms-high-contrast media query in favour of the standard forced-colors query: https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contrast/

[1Copenut]

Much appreciated. I thought I remembered hearing something about the -ms-high-contrast deprecation.