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.

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

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.

👋 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.

@JasonStoltz if no one is working on this issue, I would like to take it, I am new contributor to this repo, thanks!

@Arup-Chauhan if an issue has not been assigned to an EUI team member, it's free to pick up by any open source contributor - simply open a PR against our repo. Please see our contributing guidelines for more! https://github.com/elastic/eui/tree/main/wiki/contributing-to-eui

Hi @cee-chen , sure, so would you be assigning me this issue to work upon?

Also, can I raise a draft PR to work on this issue? I have some initial questions on how to do it and also, I can get a feedback on my work underway.

No, we do not assign issues to non-EUI contributors. Please see our linked wiki above again:

In general, once on Github, any issue can be worked on by the community. If you find an issue that is not assigned, assume that you are welcome to work on it and can submit a pull request. We recommend that you leave us a comment indicating your intent before starting work to avoid potential conflict. We do not, as a policy, assign issues to community members and we usually reserve larger projects or ones that are core to our roadmap or design to be done internally.

It also answers your question about draft PRs - they are very welcome. You will want to @ mention us in a comment for questions and requests for early feedback.

No, we do not assign issues to non-EUI contributors. Please see our linked wiki above again:

In general, once on Github, any issue can be worked on by the community. If you find an issue that is not assigned, assume that you are welcome to work on it and can submit a pull request. We recommend that you leave us a comment indicating your intent before starting work to avoid potential conflict. We do not, as a policy, assign issues to community members and we usually reserve larger projects or ones that are core to our roadmap or design to be done internally.

It also answers your question about draft PRs - they are very welcome. You will want to @ mention us in a comment for questions and requests for early feedback.

Oh, sure no problem, I will make a draft PR and get started, will ask questions there only, thanks!

@cee-chen I have added a comment in the draft PR for to this, can you please check it once?

Please disregard the noise/issue closure - stalebot went rogue due to misconfiguration.

Thanks @cee-chen , I will continue work on this

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.