Readable color returnIfDarkColor isn't working

[majkl-zumberi]

• polished version: ^4.2.2
• JSS-in_CSS library and version: styled-components ^5.1.1
• Any relevant JS library and version: React 17.0.2, nextjs 12.1.0

Mixin/Helper/Shorthand Usage

export const WelcomeContentTitle = styled.h1`
  color: ${(props) =>
    readableColor(
      props.theme.colors.secondary,
      props.theme.colors.white,
      props.theme.colors.tertiary
    )};
`

What You Are Seeing

i provide #f4d449 as secondary #FFF as white and #2b3399 as tertiary

returns the default color returnIfDarkColor

What You Expected To See

returns #000 instead of #2b3399

[WillKoste]

@majkl-zumberi I was running into this issue as well, you can pass in false as the fourth parameter to prevent the result from being strict. I also just noticed this issue is from May 4th so my service may be of no use. lol

[jmhouzz]

This is still and issue and disabling the strict mode will not help necessarily. I think if returnIfLightColor and returnIfDarkColor are provided, they should be used with preference if any of them has sufficient contrast instead of falling back to the default colors.

I have found this use case:

readableColor('#DB335D', '#222', '#fff')
// output: #000
// strict = false output: #222
// expected: #fff

I have not looked at the implementation yet, I see that falling back to #000 has better contrast ratio than #fff but #fff does pass AA and it's a preferred option. Disabling strict will end up still selecting a dark color #222 which does not pass AA.

[jmhouzz]

Hmm after looking at the implementation, I guess I'd like this behavior but not sure if that wouldn't cause some unintended side effects.

const isColorLight = getLuminance(color) > 0.179
const preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor
const preferredFallbackReturnColor = isColorLight ? returnIfDarkColor : returnIfLightColor

if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {
    return preferredReturnColor
// [NEW]: try if the other preferred color would not pass the contrast check
} else if (!strict || getContrast(color, preferredFallbackReturnColor) >= 4.5) {
    return preferredFallbackReturnColor
}

return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor

[AX-LLaidley]

I'm running into this issue on Redocly, which uses Polished. No matter what I do, I can't get the search background to #FFFFFF and now I have a problem where I've had to choose a lighter grey for the text (#999999) which allows the search results to show up, but it looks washed out on the white background I have everywhere else, and weird when there's other text on the page that's black (#000000).

I've tried reverting to an older version of Polished, but that's not working either. This was working before. Not sure what changed, but I'd love it if they'd put it back the way it was.