Skip to main content

useAccessibleColor

useAccessibleColor is a custom hook to get the most accessible foreground color value based on a provided background color. For instance, it is used under-the-hood in the Avatar component when displaying a name fallback.

Import#

import { useAccessibleColor } from "pearl-ui";

Return value#

The useAccessibleColor hook returns the most accessible color as a string

Usage#

const accessibleTextColor = useAccessibleColor("red", {  light: "neutral.50",  dark: "neutral.900",});

Parameters#

NameRequiredTypeDefaultDescription
backgroundColortruePearlTheme['palette']The color value of the background color.
foregroundChoicesfalse{ light: PearlTheme['palette'], dark: PearlTheme['palette'] }{ light: "white", dark: "black" }The foreground color values to choose from. It expects an object which a 'light' key (for the lighter color) and a 'dark' key (for the darker color)