Dynamically darken the default yiq-text-dark HEX value if it does not pass a11y contrast ratio requirements

[adamstankiewicz]

Description

The colorYiq Sass helper function helps determine what the foreground color should be (e.g., text color) given an input color to ensure an accessible contrast ratio.

If the computed yiq value exceeds the contrastThreshold, it'll return the dark color specified in tokens/src/global/other.json via the yiq-text-dark property which is a static HEX value color:

paragon/tokens/sass-helpers.js

Lines 33 to 38 in 577ac74

	if (yiq >= contrastThreshold) {
	return chroma(darkColor);
	}
	return chroma(lightColor);
	}

Given that, there is currently no guarantee the static HEX value for yiq-text-dark has a suitable contrast ratio given the dynamic input color.

Consider adding validation to dynamically modify the yiq-text-dark value if the HEX value specified in other.json by using ChromaJS's darken functions to compute an a11y-friendly foreground color based on the default HEX value should the default HEX value not have a sufficient contrast ratio already.

For example, we may use ChromaJS to detect the contrast between the dynamic color and the yiq-text-dark, and if it's smaller than 4:5:1, run .darken() or some other helper function to attempt to darken it to a sufficient contrast ratio.

Acceptance Criteria

Beta Give feedback

1. Ensure we attempt to dynamically darken the default value of yiq-text-dark if we deem its contrast ratio with color below 4:5:1 to ensure an accessible contrast between the background and foreground colors.
2. Consider whether we should have a similar solution for yiq-text-white (in case the default value isn't already #FFFFFF).