Skip to main content


The useAccessibleColor hook is a powerful utility in Pearl UI that allows you to determine the most accessible foreground color based on a given background color. This hook is particularly useful in components like the Avatar where a name fallback is displayed against a variable background color.


import { useAccessibleColor } from "pearl-ui";

Return value#

The useAccessibleColor hook returns a string representing the most accessible color based on the provided background color.


Here's an example of how you can use useAccessibleColor to determine the most accessible text color for a given background color:

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


backgroundColorYesPearlTheme['palette']The color value of the background against which the text will be displayed.
foregroundChoicesNo{ light: PearlTheme['palette'], dark: PearlTheme['palette'] }{ light: "white", dark: "black" }An object containing potential foreground colors. It should have a 'light' key for the lighter color and a 'dark' key for the darker color.