Open majkl-zumberi opened 2 years ago
@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
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.
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
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.
polished
version: ^4.2.2JSS-in_CSS
library and version: styled-components ^5.1.1Mixin/Helper/Shorthand Usage
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