Add or Adjust background color for text readability

[Mawmoocn]

Greetings,

In this image, dark background color obscures dark colored text.

The font color for these percentages (+50 to +80% and -50% to -100%) have slight problems on visual adjustment.





Text colors that blend well with background color, are hard to read.

Font size and style, affects readability because it alters visual representation.



Suggestions

1. Toggle for changing the current font color.
2. Add semi-translucent colored(black/white) background, behind the colored font, to adjust brightness of the main background. Adjusting the background color would help emphasize texts that have different colors.
3. Have 2-3 separate font profiles for light and dark background. Color adjustments rely on detecting the best font color, for the current background.


If we improve and use them harmoniously, visual accessibility can be better, for people who have visual impairments.

Source

When choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content.

If anyone has questions, clarifications, and suggestions about this topic, feel free to post!

[josteph]

That screenshot is from my local branch. In vanilla wesnoth the tooltip looks different, it uses fewer colors. Does the bug exist in vanilla wesnoth? If so please show a screenshot of that.

[Mawmoocn]

It could be incomplete, but here is the screenshot. I added some tiles other than tooltips, I guess they might cause problems?

tileandtooltipproblem.png (201.01 KiB) Viewed 5101 times

[josteph]

I just now saw the notification for this thread...

I think the green in the two bottom screenshots (tod and trait) is hard to read. Would either of these be better? (the XP line shows the proposed color, the HP lines show the current color)

2019-09-14-100008_133x90_scrot.png (18.86 KiB) Viewed 4845 times

2019-09-14-100253_136x83_scrot.png (17.99 KiB) Viewed 4845 times

Spoiler:

(the first one is GOOD_COLOR, the second one is #00ff00, in unit::describe_builtin_effect)

[Ravana]

From my observations the shade of green depends on OS. Windows shows #0f0, linux shows something darker.

[josteph]

Interesting, thanks.

The source code uses pango color names red and green, so perhaps those names have different values on different platforms.

My second screenshot uses #0f0, if windows uses that I guess there won't be a problem in using that color across the board. #4348

What color value does the trait tooltips use for red on windows? (for example, on goblins, with their negative traits)

[gnombat]

The keyword "green" has historically been particularly unreliable to use because there are two versions of "green" in common use: "X11 Green" and "Web Green". Sometimes you'll get one, sometimes the other.

https://en.wikipedia.org/wiki/X11_color ... lor_scheme

(I'm not sure if that's what's going on here, but I would recommend using hexadecimal color values instead of keywords for more consistent results.)

[josteph]

(I'm not sure if that's what's going on here, but I would recommend using hexadecimal color values instead of keywords for more consistent results.)

That's actually exactly what happened here. pango changed their definition of green from X11 Green to Web Green back in 2012. See the issue for details. Thanks for the hint!

[Mawmoocn]

Sorry for the delay.

@josteph
I prefer a lighter color but I think the 2nd option is fine.

As long as they compliment and blend the main font color with the background, It would probably help.