search

elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
6.05k stars 820 forks source link

[EuiAvatar] Calculate high-contrast text against background #7824

Open daniel-rhoades opened 3 weeks ago

daniel-rhoades commented 3 weeks ago

Summary

Within the Avatar component, for the purposes of rendering initials, the text colour is selected based either the selected or generated background colour:

https://github.com/elastic/eui/blob/8e3592322e4a36f83edcdfc29af9e66dddd91cde/packages/eui/src/components/avatar/avatar.tsx#L164-L168

Currently, the logic simplistically chooses white (for dark backgrounds) or black (for light backgrounds), this won't necessarily provide a sufficient contrast against some background colours. Neither is there support for explicitly setting the text colour.

A similar issue applies to the Badge component:

https://github.com/elastic/eui/blob/7fac1cedcc9f9313c66d358b0437d0b52c990ba8/packages/eui/src/components/badge/color_utils.ts#L60-L66

Albeit inconsistent with Avatar, the Badge component does at least raise a contrast warning:

https://github.com/elastic/eui/blob/7fac1cedcc9f9313c66d358b0437d0b52c990ba8/packages/eui/src/components/badge/badge.tsx#L142-L153

Acceptance Criteria

  1. Calculate an appropriate high-contrasting colour (WCAG AA compliant) based on the background colour
  2. (Optionally) expose an additional property to allow the colour to be overridden

Fortunately, an existing utility function already exists within the EUI component library for calculating an appropriate contrasting colour: makeHighContrastColor.

cee-chen commented 2 weeks ago

@1Copenut Has this come up in any of our accessibility audits of Kibana?

JasonStoltz commented 2 weeks ago

Thank you for bringing it to our attention.

This is a valid accessibility issue, but not one we can prioritize at the moment.

We would accept a PR for this, however, which adds a simple color contrast detection and warning as seen in the Badge.

github-actions[bot] commented 2 weeks ago

👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.

Log | Bot Usage