Draft PR: Working on issue #7824

[Arup-Chauhan]

Working on issue #7824

[cla-checker-service]

💚 CLA has been signed

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[Arup-Chauhan]

Hi @cee-chen, I have made this PR

Will be starting with the direction @daniel-rhoades mentioned to use the makeHighContrastColor function in the code.

Would it be a good start?

[cee-chen]

@Arup-Chauhan My preference would be to skip makeHighContrastColor and custom text color support. To be frank, it's not something I want to support in EuiBadge or EuiAvatar right now.

I think the simplest path forward would be to DRY out the shared color contrast logic between EuiAvatar and EuiBadge to an exported utility (which we can locate in src/services/). This will enable EuiAvatar to also throw a console warning if color contrast is insufficient.

[Arup-Chauhan]

@Arup-Chauhan My preference would be to skip makeHighContrastColor and custom text color support. To be frank, it's not something I want to support in EuiBadge or EuiAvatar right now.

I think the simplest path forward would be to DRY out the shared color contrast logic between EuiAvatar and EuiBadge to an exported utility (which we can locate in src/services/). This will enable EuiAvatar to also throw a console warning if color contrast is insufficient.

so we are looking at a shared utility for the color contrast logic and place it in src/services/. This will eliminate duplicate implementations in EuiAvatar and EuiBadge. By using this utility, EuiAvatar can also throw a console warning if the color contrast is insufficient.

Is this a correct way?

[cee-chen]

That's correct!

[Arup-Chauhan]

That's correct!

Cool, thanks for the feedback, I will start doing it and let you know how it goes, have a good day!

[Arup-Chauhan]

@cee-chen Hi, just wanted to update you that I am in the middle of some summer break commitments from college, will resume working on this soon asap.

Hope that works!

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[Arup-Chauhan]

@cee-chen Hi Cee, wanted to share that I have kind of coded a logic using the constrst utility, will push the changes in this draft repo for your review by the end of this week.

Thanks for the patience, the college semester course load is a little tough this time so spending my major amount there!

[cee-chen]

No worries at all. This isn't a high priority task, so take your time!

[Arup-Chauhan]

No worries at all. This isn't a high priority task, so take your time!

Hi @cee-chen , I hope you're doing well. I noticed that the issue is marked as closed. I wasn’t able to update you earlier due to some urgent academic commitments. If it’s still possible, I would love to continue working on this.

I've made some progress on creating the shared color contrast utility to eliminate duplicate implementations in components like EuiAvatar and EuiBadge. Below is a snippet showing the approach for calculating the color contrast ratio:

/**
 * Calculates the contrast ratio between two colors.
 * @param {string} foreground - The foreground color in hexadecimal format.
 * @param {string} background - The background color in hexadecimal format.
 * @returns {number} - The contrast ratio between the two colors.
 */
function calculateContrast(foreground: string, background: string): number {
    const lum1 = getLuminance(foreground);
    const lum2 = getLuminance(background);
    const brightest = Math.max(lum1, lum2);
    const darkest = Math.min(lum1, lum2);
    return (brightest + 0.05) / (darkest + 0.05);
}

This utility will help ensure the colors meet accessibility standards. Let me know if I can proceed with further refinements or if there are any changes you'd like me to incorporate.

Looking forward to your response!

[cee-chen]

There isn't a need for a custom calculateContrast function - we already have this via our chroma.js library:

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

Lines 68 to 70 in 5c40315

	export const getColorContrast = (textColor: string, color: string) => {
	return chroma.contrast(textColor, color);
	};

You should be able to simply re-use the existing util and EuiBadge's logic to throw an error when color contrast is too low:

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

Lines 145 to 153 in 7fac1ce

	// 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}.`
	);
	}

My preferred approach would be moving the getColorContrast from EuiBadge's color utils to packages/eui/src/services/color/contrast.ts, and adding a new warnIfContrastBelowMin() util.

[Arup-Chauhan]

Hi @cee-chen, thanks for being patient as work through on this issue and thanks for your feedback

I have made the following changes and pushed it in the draft PR too.

Replaced the existing contrast-checking logic in EuiBadge with calls to the centralized utility functions as suggested.

1. Created the centralized getColorContrast and warnIfContrastBelowMin() utilities in packages/eui/src/services/color/contrast.ts:

import chroma from 'chroma-js';

export const getColorContrast = (textColor: string, backgroundColor: string): number => {
  return chroma.contrast(textColor, backgroundColor);
};

export const warnIfContrastBelowMin = (textColor: string, backgroundColor: string, wcagContrastMin: number): void => {
  const contrastRatio = getColorContrast(textColor, backgroundColor);
  if (contrastRatio < wcagContrastMin) {
    console.warn(
      `Warning: ${backgroundColor} background with ${textColor} text has a low contrast ratio of ${contrastRatio.toFixed(
        2
      )}. Should be above ${wcagContrastMin}.`
    );
  }
};

2. Replaced the existing logic in EuiBadge:

Original code:

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}.`
  );
}

Replaced with:

import { warnIfContrastBelowMin } from '../../../services/color/contrast';

warnIfContrastBelowMin(textColor, color, wcagContrastMin);

This change centralizes the contrast-checking logic, leveraging chroma.js as recommended for improved consistency and maintainability. Please let me know if there are any further adjustments or feedback!

Also, I would like to know how to check the changes and verify them

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?