Skip to content

Conversation

JasonStoltz
Copy link
Member

@JasonStoltz JasonStoltz commented Sep 15, 2025

Testing new template....

Hypothetical rewrite of #8800

Summary #

This PR adds high contrast mode color values for data visualization and severity color tokens.

Changes

Accessibility check (Required if applicable) #

Each color in this palette was checked against these background colors (some hypothetical list of colors here) with a contrast ratio checker plugin for the Chrome Browser.

Changelog context (Required if changelog included)

Why are we making this change? #

We made this change because our current data visualization and severity colors did not meet 3:1 contrast ratios in light mode. This change solves that by adding high-contrast variants to the data visualization and severity color palettes, but ONLY high-contrast mode is enabled.

Related EUI issues or initiatives:

Related issues or initiatives from other Elastic products (Kibana, Cloud, etc.):

API Changes #

Color tokens (when light mode and high contrast mode are enabled):
- colors.vis.euiColorVis0 #16C5C0 -> #065B58
- colors.vis.euiColorVis1	#A6EDEA -> #009E99
- colors.vis.euiColorVis2	#61A2FF -> #154399
- colors.vis.euiColorVis3	#BFDBFF -> #2476F0
- colors.vis.euiColorVis4	#EE72A6 -> #831652
- colors.vis.euiColorVis5	#FFC7DB -> #D13680
- colors.vis.euiColorVis6	#F6726A -> #7F1F27
- colors.vis.euiColorVis7	#FFC9C2 -> #DA3737
- colors.vis.euiColorVis8	#EAAE01 -> #6A4906
- colors.vis.euiColorVis9	#FCD883 -> #AD7E00

- colors.severity.unknown	#E3E8F2 -> #798EAF
- colors.severity.neutral	#B5E5F2 -> #0dA1C9
- colors.severity.success	#24C292 -> #00996B
- colors.severity.warning	#FCD883 -> #AD7E00
- colors.severity.risk	#FF995E -> #ED6723
- colors.severity.danger	#EE4C48 -> #EE4C48

Functional changes #

This PR has no functional changes that users should be aware of

Visual changes #

Since the color tokens have been changed, that means that existing usages of the colors tokens list above will visually change for users when light mode and high-contrast mode are enabled.

Doc updates (How to contribute docs) #

EUI library Figma updates #

  • Updates were already made to Figma, they can be found here: <TODO: I actually don't know how to tell whether or not these changes were made in Figma to even provide a link below>
  • Updates will be made to Figma, a link to the issue to capture that work is here: {Provide a link}
  • This behavior does not need to be reflected in Figma. The most relevant Figma file is here: {Provide a link}

(Figma issues can be filed : here (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

Screenshots #

high contrast mode LIGHT DARK
false Screenshot 2025-06-16 at 15 01 46 Screenshot 2025-06-16 at 15 01 50
true / 'preferred' Screenshot 2025-06-16 at 15 01 59 Screenshot 2025-06-16 at 15 01 55
'forced' Screenshot 2025-06-16 at 15 25 15 Screenshot 2025-06-16 at 15 25 08

Reproduction instructions #

Navigate to the Data Vis colors or Severity colors pages and use the Light / Dark mode and High-Contrast mode toggles in the top right-hand corner of the docs site to toggle on light mode and high-contrast mode, and observe that the colors in both of these sections have changed.

Impact assessment #

  • 🔴 This is a breaking change. I've added the breaking change label to this issue and the migration instructions are as follows:
  • 🟡 This change is not technically breaking, but could break tests, affect code that applies custom css, or requires extra testing or attention:
    • While no action is required by consumers, note that the color values have changed, so it is worth testing your usage to ensure everything still looks as expected.
  • 🟢 No impact to existing usage

Scope of impact in Elastic products:

  • Approximately how many relevant usages are there in Kibana or other Elastic products?:
    • There are 344 references to euiColorVis colors in Kibana.
    • There are 35 references to euiColorVis colors in Cloud UI.

Rollout / adoption #

No rollout required.

Note: While this change updates all data vis colors and severity colors in EUI to have a 3:1 ratio, it will not immediately affect Kibana, as those colors come from elastic-charts. The elastic-charts team will need to make those changes separately.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[HCM] Implement high contrast dataVis colors

2 participants