[EuiSitewideSearch] Increase Color Contrast on Meta Labels to Meet WCAG 4.5 Contrast Ratio #6761
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rch meta item labels on hover. The color calculations were using a white background to create a contrasting shade instead of the light blue focus background.
…es for demo purposes
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6761/ |
breehall
commented
May 9, 2023
Comment on lines
+1
to
+4
| // The $euiFocusBackgroundColor without the alpha channel in light and dark mode | ||
| $euiSelectableTemplateFocusBackgroundLight: rgb(232, 241, 250); | ||
| $euiSelectableTemplateFocusBackgroundDark: rgb(35,56,77); | ||
|
|
There was a problem hiding this comment.
I added these instead of using $euiFocusBackgeoundColor is because the alpha channel in the color was causing makeHighContrastColor to calculate a very light (near white color).
I also specified light and dark colors because $euiFocusBackgeoundColor is being used in both light and dark mode.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6761/ |
…arch types for demo purposes" This reverts commit 36e38fb. Remove changes made to sitewide search example used for testing
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6761/ |
tkajtoch
added a commit
to elastic/kibana
that referenced
this pull request
May 18, 2023
## Summary `@elastic/[email protected]` ⏩ `@elastic/[email protected]` --- ## [`80.0.0`](https://github.com/elastic/eui/tree/v80.0.0) - Improved the contrast ratio of meta labels within `EuiSelectableTemplateSitewide` to meet WCAG AA guidelines. ([#6761](elastic/eui#6761)) - Added `vulnerabilityManagementApp` glyph to `EuiIcon` ([#6762](elastic/eui#6762)) - Added `logoVulnerabilityManagement` icon to `EuiIcon` ([#6763](elastic/eui#6763)) - Added `onPanelChange` callback to `EuiContextMenu` to provide consumer access to `panelId` and `direction`. ([#6767](elastic/eui#6767)) **Bug fixes** - Fixed `EuiComboBox` so `append` and `prepend` icon buttons are full height and vertically centered. ([#6766](elastic/eui#6766)) - Improved the uniformity of dropdown components by hiding the dropdown icon of disabled `EuiComboBox`s. ([#6768](elastic/eui#6768)) **Breaking changes** - `EuiFieldNumber` now defaults the `step` prop to `"any"` ([#6760](elastic/eui#6760)) - EUI now globally resets a default Chromium browser style that was decreasing the opacity of disabled `select` items. ([#6768](elastic/eui#6768)) --------- Co-authored-by: Kibana Machine <[email protected]>
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
May 25, 2023
## Summary `@elastic/[email protected]` ⏩ `@elastic/[email protected]` --- ## [`80.0.0`](https://github.com/elastic/eui/tree/v80.0.0) - Improved the contrast ratio of meta labels within `EuiSelectableTemplateSitewide` to meet WCAG AA guidelines. ([elastic#6761](elastic/eui#6761)) - Added `vulnerabilityManagementApp` glyph to `EuiIcon` ([elastic#6762](elastic/eui#6762)) - Added `logoVulnerabilityManagement` icon to `EuiIcon` ([elastic#6763](elastic/eui#6763)) - Added `onPanelChange` callback to `EuiContextMenu` to provide consumer access to `panelId` and `direction`. ([elastic#6767](elastic/eui#6767)) **Bug fixes** - Fixed `EuiComboBox` so `append` and `prepend` icon buttons are full height and vertically centered. ([elastic#6766](elastic/eui#6766)) - Improved the uniformity of dropdown components by hiding the dropdown icon of disabled `EuiComboBox`s. ([elastic#6768](elastic/eui#6768)) **Breaking changes** - `EuiFieldNumber` now defaults the `step` prop to `"any"` ([elastic#6760](elastic/eui#6760)) - EUI now globally resets a default Chromium browser style that was decreasing the opacity of disabled `select` items. ([elastic#6768](elastic/eui#6768)) --------- Co-authored-by: Kibana Machine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #6623
Summary
✅ Increased the color contrast on
EuiSitewideSearchitem meta labels to meet WCAG 4.5 contrast ratio requirement in both light mode and dark mode.These colors are calculated using the
makeHighContrastColorcolor function, but they did not take a background color into account. This means the color was being calculated with the assumption that the background was white. On hover, these items have a light blue background. These colors will now be calculated with the hover background color in mind.🎨 Color Details & Changes
Light Mode Difference
Dark Mode Difference
Application#4e779c#4a7194#7ea6ccDeployment#3b7d6a#387765#54B399Article#8365a6#7c609e#ae96cbCase#bc533e#aa4b38#eb836ePlatform#807234#7a6c31#D6BF57QA
Basic Setupexample. Select the search box and hover over list items. You may want to use the developer tools to activate the hover state for the drop down items. Confirm that the meta labels below the links are in high contrast in comparison to the background.General checklist