[EuiAvatar] Calculate high-contrast text against background

[daniel-rhoades]

Summary

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

eui/packages/eui/src/components/avatar/avatar.tsx

Lines 164 to 168 in 8e35923

	const assignedColor =
	color || visColors[Math.floor(name.length % visColors.length)];
	const textColor = isColorDark(...hexToRgb(assignedColor))
	? '#FFFFFF'
	: '#000000';

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:

eui/packages/eui/src/components/badge/color_utils.ts

Lines 60 to 66 in 7fac1ce

	export const getTextColor = ({ euiTheme }: UseEuiTheme, bgColor: string) => {
	const textColor = isColorDark(...chroma(bgColor).rgb())
	? euiTheme.colors.ghost
	: euiTheme.colors.ink;
	return textColor;
	};

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

eui/packages/eui/src/components/badge/badge.tsx

Lines 142 to 153 in 7fac1ce

	// Set dark or light text color based upon best contrast
	const textColor = getTextColor(euiTheme, color);
	// Check the contrast ratio. If it's low contrast, emit a console awrning
	const contrastRatio = getColorContrast(textColor, color);
	if (contrastRatio < wcagContrastMin) {
	console.warn(
	`Warning: ${color} badge has a low contrast of ${contrastRatio.toFixed(
	2
	)}. Should be above ${wcagContrastMin}.`
	);
	}

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]

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

[JasonStoltz]

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]

👋 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

[Arup-Chauhan]

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

[cee-chen]

@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

[Arup-Chauhan]

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.

[cee-chen]

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.

[Arup-Chauhan]

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!