search

utk09-NCL / color-palette-generator

Color Conjure - Color Palette Generator
https://color-conjure.netlify.app
MIT License
16 stars 10 forks source link

Bug: 24 - Button Text Becomes Invisible on Light Background Colors (e.g., White) #47

Open obi-sammy opened 2 days ago

obi-sammy commented 2 days ago

Describe the Bug

When a user selects a lighter color, particularly white (#FFF), the background of the 'Generate Color' button becomes white while the text becomes invisible because it is set to white by default. This affects visibility and usability for any lighter color selections.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Go to 'color conjure website'
  2. Add a hex value of '#FFF'
  3. Scroll down to the 'Generate Color button'

Expected Behavior

When the button background color is a light color (e.g., white or any other light hex color), the text color should automatically change to a darker color (e.g., black) to maintain contrast and readability. This ensures users can always see the text, regardless of the background color.

Screenshots

Screenshot (134)_LI

Environment

Additional Context

This issue also applies to any lighter background colors that cause poor contrast with the white text. The text color should dynamically adjust based on the brightness of the selected background color to ensure visibility.

obi-sammy commented 2 days ago

I would like to be assigned to this issue after it has been reviewed, Thank you.

utk09-NCL commented 1 day ago

Thanks for finding this @obi-sammy Before we get into developing it, how would you suggest this to be solved?

obi-sammy commented 21 hours ago

Good day @utk09-NCL,

After researching the issue, I would suggest setting the button’s text color to either black or white based on the brightness of the button’s background color. To achieve this, we can calculate the brightness of the button's background color, and I found the package tinycolor2, which offers a simple method isLight() to determine whether a color is light or dark. This can help us adjust the text color dynamically.

If you need any further clarifications on this approach, I’d be happy to explain in more detail or explore any other ideas. I’m excited to collaborate further on this!

Thanks for considering my suggestion!

utk09-NCL commented 21 hours ago

We are already using chroma-js, so probably just use that. Maybe you can check the luminance of the button background colour and then decide the text colour based on that?

obi-sammy commented 20 hours ago

@utk09-NCL. Since we're already using chroma.js, we can leverage the luminance() method, which calculates the brightness of a color. I suggest we use this to determine the brightness of the button's background color, and based on the result, set the text color to either black or white to ensure readability.

I'd be happy to be assigned to this issue and start implementing the solution. If you need any further clarifications, feel free to reach out, and I'd be glad to explain or discuss the approach further.

utk09-NCL commented 3 hours ago

Assigning this to you @obi-sammy