A new isLightColor helper picks readable text for any brand color

Your app doesn’t choose the accent color. Each customer sets their own in screenly_color_accent, and the same app has to put readable text on a pale yellow brand and on a navy one. isLightColor() tells you which you’re dealing with:

import { isLightColor, setupTheme } from '@screenly/edge-apps'

const { primary } = setupTheme()
document.body.classList.toggle('on-light-brand', isLightColor(primary))

It returns true when a color needs dark text and false when it needs light text. The answer comes from the WCAG relative luminance formula rather than an average of the red, green, and blue values, so it ranks colors the way people see them. Pure yellow and pure blue have similar channel totals and land on opposite sides.

It accepts hex (#abc, #aabbcc, #aabbccdd) and numeric rgb() or rgba() strings, and ignores alpha. Named colors and percentage channels aren’t supported. Anything it can’t read returns false instead of throwing, so a malformed setting can’t stop a screen from rendering.