Page MenuHomePhabricator

Using background-color without setting color is not OK
Closed, ResolvedPublic

Description

Author: nick.white

Description:
Screenshot of unreadable font color when using erudite skin

There are several places in the CSS where background-color is set, without setting the text color. If the text color is set to something other than the default, whether because the user is visually impaired, or because they are using a different skin, it can then be unreadable.

This is the case for example when using the extension with the Erudite skin (see attached screenshot), because the default text colour for the message area is very light (as the background is expected to be dark grey).

The solution is either to remove the background-color settings, or explicitly add the color for the text (and links), if you're sure you want them. I'll attach a patch for both options in a moment.


Version: master
Severity: normal

Attached:

collection-erudite-screenshot.png (463×1 px, 70 KB)

Details

Reference
bz57849

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:37 AM
bzimport added a project: Collection.
bzimport set Reference to bz57849.

nick.white wrote:

Patch specifying standard font colors for places that background-color is set

This is a patch that specifies the standard font colors where the background-color is set.

This isn't my prefered solution, but it improves on the current situation.

Attached:

nick.white wrote:

Patch removing background-color declarations

This patch just removes all background-color declarations from the CSS.

I prefer this option, as it ensures that whatever color scheme is chosen (whether for accessibility or other reasons) it is respected. The disadvantage is that the boxes marked out by the background-color are potentially less clearly delineated.

Attached:

Thanks Nick, I have submitted the second patch as the gerrit change 98549.

Change 98549 had a related patch set uploaded by Bartosz Dziewoński:
Remove background-color statements from CSS

https://gerrit.wikimedia.org/r/98549

Change 98549 merged by jenkins-bot:
Remove background-color statements from CSS

https://gerrit.wikimedia.org/r/98549

I just tested it on my installation and I think it looks even better without background colours!

nick.white wrote:

Great, thanks folks, I'm very happy about this! :)