From 2b1f12b9caaff8f7fe514325de344bc709532c35 Mon Sep 17 00:00:00 2001 From: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com> Date: Thu, 28 Nov 2024 16:14:10 +0100 Subject: [PATCH] [Vega] Improve contrast ratio for vega visualizations tooltip key text (#200208) ## Summary Closes https://github.com/elastic/kibana/issues/151923 We need to improve the contrast ratio in vega kibana tooltip key text. The current contrast ratio between the background (#404040) and the text color (#98A2B3) is below 4.5:1 and fails WCAG SC 1.4.3 Contrast (Minimum). In order to solve this issue, we have updated the color used for the **key value** the to use `colors.lightShade` (#D3DAE6). With this change, we have increased the contrast ratio from 4.02 to 7.37. You can see the available shades [here](https://eui.elastic.co/#/theming/colors/values#shades). ### Screenshots #### Before - contrast ratio 4.02 ![Screenshot 2024-11-14 at 16 46 13](https://github.com/user-attachments/assets/19c22538-6540-4e6a-909d-8abd58facbbc) #### After - contrast ratio 7.37 ![Screenshot 2024-11-14 at 16 44 43](https://github.com/user-attachments/assets/a3ca319f-0cfa-4e79-a4ae-fddd64fc2e42) ### Checklist Check the PR satisfies following conditions. - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_node:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) Co-authored-by: Elastic Machine --- .../vis_types/vega/public/vega_view/vega_tooltip.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts index 51150cd658733..450238142b236 100644 --- a/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts +++ b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts @@ -53,7 +53,7 @@ export const vegaVisTooltipStyles = (euiThemeContext: UseEuiTheme) => { 'max-width', mathWithUnits(euiTheme.size.base, (x) => x * 10) )} - color: ${euiTheme.colors.mediumShade}; + color: ${euiTheme.colors.lightShade}; ${logicalTextAlignCSS('right')} ${logicalCSS('padding-right', euiTheme.size.xs)} }