Skip to content

[EuiSitewideSearch] Increase Color Contrast on Meta Labels to Meet WCAG 4.5 Contrast Ratio #6761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
breehall merged 5 commits into from
May 10, 2023
Merged

[EuiSitewideSearch] Increase Color Contrast on Meta Labels to Meet WCAG 4.5 Contrast Ratio #6761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a44c932
[EuiSitewideSearch] Increase the color contrast on the EuiSitewideSea…
breehall May 9, 2023
36e38fb
[REVERT ME] Updated sitewide search example to include all search typ…
breehall May 9, 2023
0331ca7
CHANGELOG
breehall May 9, 2023
325802a
Updated the colors for dark mode as well
breehall May 9, 2023
e8a2281
Revert "[REVERT ME] Updated sitewide search example to include all se…
breehall May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/components/selectable/selectable_templates/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
// The $euiFocusBackgroundColor without the alpha channel in light and dark mode
$euiSelectableTemplateFocusBackgroundLight: rgb(232, 241, 250);
$euiSelectableTemplateFocusBackgroundDark: rgb(35,56,77);

Comment on lines +1 to +4
Copy link
Contributor Author

@breehall breehall May 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

$euiSelectableTemplateSitewideTypes: (
'application': (
'color': makeHighContrastColor($euiColorVis1),
'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis1, $euiSelectableTemplateFocusBackgroundDark)),
'font-weight': $euiFontWeightMedium,
),
'deployment': (
'color': makeHighContrastColor($euiColorVis0),
'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis0, $euiSelectableTemplateFocusBackgroundDark)),
'font-weight': $euiFontWeightMedium,
),
'article': (
'color': makeHighContrastColor($euiColorVis3),
'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis3, $euiSelectableTemplateFocusBackgroundDark)),
'font-weight': $euiFontWeightMedium,
),
'case': (
'color': makeHighContrastColor($euiColorVis9),
'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis9, $euiSelectableTemplateFocusBackgroundDark)),
'font-weight': $euiFontWeightMedium,
),
'platform': (
'color': makeHighContrastColor($euiColorVis5),
'color': lightOrDarkTheme(makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackgroundLight), makeHighContrastColor($euiColorVis5, $euiSelectableTemplateFocusBackgroundDark)),
'font-weight': $euiFontWeightMedium,
),
);
1 change: 1 addition & 0 deletions upcoming_changelogs/6761.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Improved the contrast ratio of meta labels within `EuiSelectableTemplateSitewide` to meet WCAG AA guidelines.