Appearance

getContrastingTextColor ​

A util for determining an accessible, predefined contrasting text color based on a provided color value.

If the provided color is

  • dark, the returned text color will be #FFFFFF (white);
  • light, the returned text color will be #27282A (ice-900).

Import ​

ts
import getContrastingTextColor from '@leaflink/stash/utils/getContrastingTextColor';

Usage ​

Providing a hex value ​

ts
getContrastingTextColor('#C801CC');
getContrastingTextColor('f0f');

Providing a Stash color ​

ts
getContrastingTextColor('seafoam-700');
getContrastingTextColor('purple-100');
getContrastingTextColor('purple'); // equal to `purple-500`

TIP

When providing a primary color group name without a shade included, it will always map to its 500 shade variant.

Fallback ​

If an invalid color value is provided, it will return dark text #27282A (ice-900).

Playground ​

Select a Stash Color, or input a valid Hex Value
(Hex Value will take priority)

Note: Playground fields are listed in priority order.

INFO

Based on https://wunnle.com/dynamic-text-color-based-on-background, which adheres to WCAG guidelines.