Improve colors

[unional]

Currently, some color combinations make the text hard to read. Need to optimize it a bit.

Here are some ideas:

• if the background color is light (e.g. two of rgb > 200) then turn the text to a dark color

[yajurvendrasinh]

• To add on to the already added point of having darker text color to lighter background - the contrast ratio for the smaller text can be kept as 4:5 against the background and for larger text it can be kept as 3:1 against the background color - This might provide an accurate range of colors for text and background color for the application.
• Some other points will be for considering a proper text font and font size, font embellishment for context of the data (such as adding bold effect to any important part using HTML5 tags). Considering the alignment of text according to the screen size - for example reading whole page on a smaller window is easy when each line contain 30-40 characters rather than like that on bigger window that might contain 60-70 characters per line.

[unional]

@yajurvendrasinh I like the contrast idea a lot. How can we generate the right color based on the background color?

i.e.:

function createContrastColor(/* background */ color: Color, contrast: number) {
  // ...
}

[unional]

Info about contrast ratio: https://www.w3.org/TR/WCAG/#contrast-ratiodef https://www.w3.org/TR/WCAG/#relativeluminancedef

And video on contrast ratio: https://youtu.be/LBmLspdAtxM thanks @yajurvendrasinh

[srshah19]

Some great points added. One way to find the contrast color based on the background would be to calculate the luminance (L = 0.2126*R + 0.7152 * G + 0.0722 * B). If the luminance is lower than 200 (darker background, we make the text lighter). I will create a PR to demonstrate. We could also possibly calculate the contrast ratio of foreground/background based on the standards and generate text colors whose ratio is higher than 4.5:1.

[unional]

Closed by #4