Add or Adjust background color for text readability
Moderator: Forum Moderators
Forum rules
Before posting critique in this forum, you must read the following thread:
Before posting critique in this forum, you must read the following thread:
Add or Adjust background color for text readability
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
If anyone has questions, clarifications, and suggestions about this topic, feel free to post!
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!
Re: Add or Adjust background color for text readability
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.
Re: Add or Adjust background color for text readability
It could be incomplete, but here is the screenshot. I added some tiles other than tooltips, I guess they might cause problems?
Re: Add or Adjust background color for text readability
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)
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)
Spoiler:
Re: Add or Adjust background color for text readability
From my observations the shade of green depends on OS. Windows shows #0f0, linux shows something darker.
Re: Add or Adjust background color for text readability
Interesting, thanks.
The source code uses pango color names
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)
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)
Re: Add or Adjust background color for text readability
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.)
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.)
Re: Add or Adjust background color for text readability
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!
Re: Add or Adjust background color for text readability
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.
@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.