0

Okay so let's say I have a group-chat and the owner is able to change the background color of the chat-bubbles. The usernames on top of the bubble have different colors which are assigned to them from a list with 10 colors when the group chat gets generated. That means some of the 10 colors in the list would fit with the background, some wouldn't and would need an adjustment so the readability is good again. And since the background color is not always the same, the text color of the usernames sometimes don't have a good readability.

What I'm doing now is to calculate the contrast ratio of the background- and the username text color and if it's below a certain value I generate a new random text color for that user until the contrast ratio reaches the threshhold again. This is for sure not really efficient since I have to run a loop to generate a random color and calculate the contrast ratio again until it fits.

I've also looked into just adjusting the brightness of the color depending on the background but that mostly leads to having the same text color for multiple users because the brightness got changed so much that the original color is not really recognizable anymore.

Does anyone have an idea how to or adjust the current text-color or calculate a new color which fits a specific contrast ratio out of two colors directly?

Tim Langner
  • 357
  • 3
  • 16
  • You should look to color manipulation library such as [color-js](https://github.com/brehaut/color-js) – dbuchet Jan 14 '21 at 08:31
  • Handy styling utility: https://polished.js.org/docs/#readablecolor – Drew Reese Jan 14 '21 at 08:32
  • I would stroe 2 arrays, one for background-colors, and one for text colors and then every time user changes the bg color, the text color will change too according to the bg colro. It will have the same index of the background-color in the array. – YTG Jan 14 '21 at 08:39
  • thanks for your tips! Unfortunately the the function which @DrewReese recommended requires me to pass custom return colors which doesn't really help in my case. I need to calculate a new color or adjust the current one if it doesn't fit my contrast ratio threshhold :/ – Tim Langner Jan 14 '21 at 09:00
  • Does this answer your question? [Determine font color based on background color](https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color) – Peter O. Jan 14 '21 at 10:21
  • Unfortunately it doesnt, since he only uses black or white in the end which I cannot do because the usernames shouldn't all have the same text color @PeterO. – Tim Langner Jan 14 '21 at 10:40

1 Answers1

0

Since you have some colors declared already, why not create an array of objects mapping a background color and a text color instead? Like

const colors = [{
  bgColor: "some hex value",
  txtColor: "some adequately contrasting color"
},
{
  bgColor: "some hex value",
  txtColor: "some adequately contrasting color"
}];

When the user opts to change background color and you've taken hold of an object at a particular index of the above array, you set the background color and text color

const finalColors = colors[index];
wrapperBoxElement.style.backgroundColor = finalColor.bgColor;
wrapperBoxElement.querySelector('#username').style.color = finalColors.txtColor;
Qausim
  • 129
  • 2
  • 5
  • thanks for your help! That would work if I would only use a single text color for all usernames right? But the usernames have different colors which are assigned to them from a list with 10 colors when the group chat gets generated. That means some of the 10 colors in the list would fit with the background, some wouldn't and would need an adjustment so the readability is good again. – Tim Langner Jan 14 '21 at 09:28
  • If I may ask, what happens when a user opts to change his/her background color and another user has that color set already? – Qausim Jan 14 '21 at 10:04
  • The background depends on the color theme from the users site which can only be changed by an admin. – Tim Langner Jan 14 '21 at 10:23