Skip to main content


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 { useAccessibleColor } from "pearl-ui";

Return value#

The useAccessibleColor hook returns the most accessible color as a string


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


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)