Adjust stat colours based on team colour contrast

Author: jamesmockett

dotcom-rendering/src/components/FootballMatchStat.stories.tsx

@@ -122,8 +122,6 @@ const teams = [
 	},
 ];
 
-console.log(teams);
-
 export const Default = {
 	args: {
 		label: 'Goal Attempts',

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -8,6 +8,7 @@ import {
 	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
+import { getContrast } from '../lib/colour';
 import { palette } from '../palette';
 
 const containerCss = css`
@@ -44,7 +45,7 @@ const labelCss = css`
 	${textSansBold14};
 	grid-area: label;
 	justify-self: center;
-	color: ${palette('--football-match-stat-name')};
+	color: ${palette('--football-match-stat-text')};
 	${from.desktop} {
 		${textSansBold15};
 	}
@@ -62,6 +63,10 @@ const largeNumberCss = css`
 	}
 `;
 
+const numberFixContrastCss = css`
+	color: ${palette('--football-match-stat-text')};
+`;
+
 const awayStatCss = css`
 	grid-area: away-stat;
 	justify-self: end;
@@ -80,6 +85,10 @@ const barCss = css`
 	border-radius: 8px;
 `;
 
+const barFixContrastCss = css`
+	border: 1px solid ${palette('--football-match-stat-text')};
+`;
+
 type MatchStatistic = {
 	teamName: string;
 	teamColour: string;
@@ -109,12 +118,33 @@ export const FootballMatchStat = ({
 	const homePercentage = (home.value / (home.value + away.value)) * 100;
 	const awayPercentage = (away.value / (home.value + away.value)) * 100;
 
+	const minimumContrast = 3.1; // https://www.w3.org/TR/WCAG21/#contrast-minimum
+
+	const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	const backgroundColour = darkMode ? '#1a1a1a' : '#f6f6f6';
+
+	const homeNeedsContrast =
+		getContrast(home.teamColour, backgroundColour) < minimumContrast;
+	const awayNeedsContrast =
+		getContrast(away.teamColour, backgroundColour) < minimumContrast;
+
+	/**
+	 * If either team colour lacks sufficient contrast we adjust both numbers
+	 * so we don't appear to be favouring one team over the other. For the chart
+	 * we keep the team colour and apply a contrasting border colour.
+	 */
+	const numbersNeedContrast = homeNeedsContrast || awayNeedsContrast;
+
 	return (
 		<div css={containerCss}>
 			<div css={[headerCss, raiseLabelOnDesktop && raiseLabelCss]}>
 				<span css={labelCss}>{label}</span>
 				<span
-					css={[numberCss, largeNumbersOnDesktop && largeNumberCss]}
+					css={[
+						numberCss,
+						largeNumbersOnDesktop && largeNumberCss,
+						numbersNeedContrast && numberFixContrastCss,
+					]}
 					style={{ '--match-stat-team-colour': home.teamColour }}
 				>
 					<span
@@ -131,6 +161,7 @@ export const FootballMatchStat = ({
 						numberCss,
 						awayStatCss,
 						largeNumbersOnDesktop && largeNumberCss,
+						numbersNeedContrast && numberFixContrastCss,
 					]}
 					style={{ '--match-stat-team-colour': away.teamColour }}
 				>
@@ -146,14 +177,14 @@ export const FootballMatchStat = ({
 			</div>
 			<div aria-hidden="true" css={chartCss}>
 				<div
-					css={barCss}
+					css={[barCss, homeNeedsContrast && barFixContrastCss]}
 					style={{
 						'--match-stat-percentage': `${homePercentage}%`,
 						'--match-stat-team-colour': home.teamColour,
 					}}
 				></div>
 				<div
-					css={barCss}
+					css={[barCss, awayNeedsContrast && barFixContrastCss]}
 					style={{
 						'--match-stat-percentage': `${awayPercentage}%`,
 						'--match-stat-team-colour': away.teamColour,

dotcom-rendering/src/paletteDeclarations.ts

@@ -7071,7 +7071,7 @@ const paletteColours = {
 		light: () => '#00679E', // replace with Source's `calculateHoverColour` when available
 		dark: () => '#00A1E6',
 	},
-	'--football-match-stat-name': {
+	'--football-match-stat-text': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[86],
 	},