Red .diffchange text in the green 'added' area may be hard to read for color-blind users
Closed, ResolvedPublic

Description

Author: rene.kijewski

Description:
For red-green color blinds the changes on the diffs are difficult to find. For not red-green color blinds red highlights the changes, but for persons like me can not see them skimming. About 8 % of the males have this deficiency, so a big amount of users is discriminated.

In the German Wikipedia a user found the solution to give changes a blue highlight. It would be easy the see for "normal seeing" persons and for red-green color blinds as well.

Have a look at: http://de.wikipedia.org/wiki/Benutzer:Matze6587/monobook.css


Version: unspecified
Severity: enhancement

bzimport set Reference to bz11374.
bzimport created this task.Via LegacySep 17 2007, 4:42 PM
bzimport added a comment.Via ConduitSep 17 2007, 8:04 PM

rene.kijewski wrote:

red to blue

attachment diff.css.diff ignored as obsolete

bzimport added a comment.Via ConduitSep 19 2007, 3:34 AM

rene.kijewski wrote:

correct patch file for skins/common/diff.css

The first attachment has a wrong header.

Attached: a.diff

bzimport added a comment.Via ConduitSep 19 2007, 3:53 AM

rene.kijewski wrote:

You may have a look on

to see, what the patch would change (the colored lines).

aaron added a comment.Via ConduitSep 19 2007, 6:08 AM

You can also edit your own CSS files. Perhaps some userscripts for this should be posted in a nice easy to find place.

bzimport added a comment.Via ConduitSep 19 2007, 1:55 PM

rene.kijewski wrote:

I have it in my monobook.css. My intention was to help more people than myself. I mean, it does nothing bad to no one. Anon users cannot change "their" user-CSS as well. I thought it would be nice to minimize this discrimitation in all-project and to help the overall accessibility.

I do not want to keep secret, that about 0.001 % of men and 0.03 % of women are blue-yellow color blind, and would be discriminated either. But it are far less than the 5 % now.

bzimport added a comment.Via ConduitApr 2 2008, 1:35 AM

oysterguitarist wrote:

Another idea would be to make this configurable in your preferences, that way users could have it either way.

brion added a comment.Via ConduitMar 2 2009, 7:29 PM
  • Bug 17763 has been marked as a duplicate of this bug. ***
bzimport added a comment.Via ConduitMar 2 2009, 7:41 PM

michael.daly wrote:

Since fixing this universally would improve usability for all persons, recommending a personal CSS solution is not the best. Personally, I think the solution on fr.wikipedia is superior - a single colour background with different shades to identify the changes - light/dark blue for new. Coupled with bold text as on fr.wikipedia may be overkill but it is certainly functional. The advantage of black text with a varying background is that it avoids all colourblindness issues (since I'm not aware of any black-whatever colourblindness).

Example from fr.wikipedia: http://fr.wikipedia.org/w/index.php?title=Ac%C3%A9die&diff=37604705&oldid=31661742

Nikerabbit added a comment.Via ConduitAug 13 2009, 8:40 AM
  • Bug 3540 has been marked as a duplicate of this bug. ***
bzimport added a comment.Via ConduitApr 27 2011, 10:39 AM

jp.posma wrote:

Fix

This patch uses the nice colour scheme from the French Wikipedia, but instead of green/blue it uses red/blue, to stay closer to the original colours (red/green). Red/blue still contrasts for colourblind people.

Apply patch to trunk/phase3/skins/common.

attachment 11374 ignored as obsolete

bzimport added a comment.Via ConduitApr 27 2011, 10:59 AM

jp.posma wrote:

French fix

Hm, red/blue obviously doesn't work for red/green colourblindness, oops. Tried orange/blue, but that doesn't really look good. I think we can just use the French style, which is also a great improvement for non-colourblind users, see the link in comment #8.

Attached: 11374b

Peachey88 added a comment.Via ConduitApr 30 2011, 12:09 AM

*Bulk BZ Change: +Patch to open bugs with patches attached that are missing the keyword*

Krinkle added a comment.Via ConduitJun 1 2011, 8:05 PM

The CSS hooks MediaWiki provides are flexible enough to change this entirely to your liking.

There are numerous mini Gadgets in the wiki land to change it to yellow-blue for example. Check [[Special:Preferences]] -> Gadgets and see if it's listed.

Otherwise, modify your User:Accountname/common.css wiki page and add css rules to your liking.

I think the latter isn't very attractive for non-tech users, but it's a way to experiment with the css. Once you're done ask an administrator on your wiki to create a gadget that anyone can enable with a single click.

ie.

  • MediaWiki:Gadget-diffGreenBlue

Change the difference view highlighting to green-blue colouring (instead of red/green)

  • MediaWiki:Gadget-diffGreenBlue.css

td.diff-addedline { background: #d8e4f6; }
td.diff-deletedline { background: #e4f6d8; }
.diffchange { color: inherit; }
td.diff-addedline .diffchange { background: #b0c0f0; }
td.diff-deletedline .diffchange { background: #b0e897; }

  • MediaWiki:Gadgets-definition

*diffGreenBlue|diffGreenBlue.css

And that's it. I've enabled it on Wikimedia Commons and Meta-Wiki for now. Feel free to export/import, enable or embed this as you like.

I'm marking this WONTFIX per BugTriage meeting. We probably don't want to change the default green/red which is too known and grown into the interwebs.

brion added a comment.Via ConduitJun 1 2011, 8:11 PM

The problem isn't that yellow and green are hard to tell apart, but that the red text is hard to see against the yellow and green backgrounds.

A sane default should be *legible* for all readers.

Krinkle added a comment.Via ConduitJun 1 2011, 8:21 PM

(In reply to comment #13)

The CSS hooks MediaWiki provides are flexible enough to change this entirely to
your liking.

There are numerous mini Gadgets in the wiki land to change it to yellow-blue
for example. Check [[Special:Preferences]] -> Gadgets and see if it's listed.

Otherwise, modify your User:Accountname/common.css wiki page and add css rules
to your liking.

I think the latter isn't very attractive for non-tech users, but it's a way to
experiment with the css. Once you're done ask an administrator on your wiki to
create a gadget that anyone can enable with a single click.

ie.

  • MediaWiki:Gadget-diffGreenBlue Change the difference view highlighting to green-blue colouring (instead of red/green)
  • MediaWiki:Gadget-diffGreenBlue.css td.diff-addedline { background: #d8e4f6; } td.diff-deletedline { background: #e4f6d8; } .diffchange { color: inherit; } td.diff-addedline .diffchange { background: #b0c0f0; } td.diff-deletedline .diffchange { background: #b0e897; }
  • MediaWiki:Gadgets-definition *diffGreenBlue|diffGreenBlue.css

    And that's it. I've enabled it on Wikimedia Commons and Meta-Wiki for now. Feel free to export/import, enable or embed this as you like.

    I'm marking this WONTFIX per BugTriage meeting. We probably don't want to change the default green/red which is too known and grown into the interwebs.

http://commons.wikimedia.org/w/index.php?curid=9692858&diff=55008419&withCSS=MediaWiki:Gadget-diffGreenBlue.css

Krinkle added a comment.Via ConduitJun 1 2011, 8:23 PM

How about we make the .diffchange bold black (like the french fix[1] does) but keep the yellow/green backgrounds. Would that solve the issue ?

[1] http://commons.wikimedia.org/w/index.php?curid=9692858&diff=55008419&withCSS=MediaWiki:Gadget-diffGreenBlue.css

Krinkle added a comment.Via ConduitJun 1 2011, 8:55 PM

Hm.. that doesn't look very pretty with bold black on yellow/green:

http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffWithoutRed.css

Krinkle added a comment.Via ConduitJun 1 2011, 10:30 PM

Alternatively:

  • Red diffchange -> black (for colorblinded and in general for all audiences to better visually tell apart the colors)
  • Background colors to red/green -ish (diff style)

http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen.css

DieBuche added a comment.Via ConduitJul 11 2011, 11:39 AM

(In reply to comment #18)

Alternatively:

  • Red diffchange -> black (for colorblinded and in general for all audiences to better visually tell apart the colors)
  • Background colors to red/green -ish (diff style)

This looks like the best proposal yet. I like the overall background color, since it's the most common diff style. Two tweaks:

I added a padding: 2px 1px; to .diffchange, this makes the "marked" area extend to the top/bottom of the line.
I'd say the marked portions could use a bit more saturation, I increased it from 30 to 45 (HSL model)

http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen.css

Jorm added a comment.Via ConduitJul 27 2011, 4:57 PM

Can I see a version where we add an underline to the changed words? Color alone should never be our only indicator, and the bold tends to get lost.

We can also try adding "over" lines as well.

DieBuche added a comment.Via ConduitJul 27 2011, 5:32 PM

(In reply to comment #19)

I added a padding: 2px 1px; to .diffchange, this makes the "marked" area extend
to the top/bottom of the line.
I'd say the marked portions could use a bit more saturation, I increased it
from 30 to 45 (HSL model)

http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen.css

This link was meant to be http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen2.css

DieBuche added a comment.Via ConduitJul 27 2011, 5:33 PM

Simulation how a red-green blind user would see the currently used scheme

Attached:

DieBuche added a comment.Via ConduitJul 27 2011, 5:42 PM

Simulation how a red-green blind user would see the proposed scheme

(In reply to comment #20)

Can I see a version where we add an underline to the changed words? Color
alone should never be our only indicator, and the bold tends to get lost.

We can also try adding "over" lines as well.

Sure, here you go: http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen3.css

Also see the new screen, color is not the only indicator but darkness as well, so they actually stick out nicely for red-green blind users.

Attached:

Jorm added a comment.Via ConduitJul 27 2011, 5:51 PM

When I run the different types through my magic "this is what it looks like to color blind people" filters, I think we need to go with red/blue for the color sequences and not red/green (I'm talking the backgrounds).

The reason is that when viewed with Deuteranopia filters, both the red *and* the green highlights turn into a very similar "orange/brown" color problem (light orange/brown vs. dark orange/brown), while a red/blue version leaves us with "light orange/brown vs. blue".

The boxing done is great, I think. That's a strong indicator. I like it.

DieBuche added a comment.Via ConduitJul 27 2011, 6:22 PM

(In reply to comment #24)

When I run the different types through my magic "this is what it looks like to
color blind people" filters, I think we need to go with red/blue for the color
sequences and not red/green (I'm talking the backgrounds).

I thought about that as well, and came to this:

  1. Left / right, don't strictly need colors, you can easily distinguish them with, well, left and right.
  1. If we are to use colored backgrounds, make them something meaningful. Red / Green is a widely used diff scheme and easily recognizable as before / after.

So, 3. from the point of a new wikipedia user: If he sees red / green, he might get "it" immediately; if he sees red / blue, it's much less clear, and he might have to look at the header to understand what is what.
For a deuteranopia user, neither light-orange/dark-orange nor light-orange/blue is going to be immidiately understandable as old/new, so he'll most likely need to look at the table headers to understand what is what, anyway.

Jorm added a comment.Via ConduitJul 27 2011, 6:45 PM

I see your points but I want to point out something that we are saying with the choice of "red/green":

People immediately assume "red = bad", "green = good". (red = blood, green = life). So by using red/green, we are *implying* a moral judgement about the diff, when that simply isn't the case. Revisions are revisions; no one is inherently better than another.

DieBuche added a comment.Via ConduitJul 27 2011, 7:10 PM

(In reply to comment #26)

People immediately assume "red = bad", "green = good". (red = blood, green =
life). So by using red/green, we are *implying* a moral judgement about the
diff, when that simply isn't the case. Revisions are revisions; no one is
inherently better than another.

Yes, that's true as well. Blue doesn't look to bad either imo, so personally I'm fine with either red/green or re/blue: http://commons.wikimedia.org/?debug=true&diff=55008419&withCSS=MediaWiki:Gadget-diffRedGreen4.css

Jorm added a comment.Via ConduitJul 27 2011, 7:21 PM

I like that one (diffRedGreen4.css), but can we put the lines back around the text?

Jorm added a comment.Via ConduitJul 27 2011, 11:21 PM

Actually, thinking about it more, I think we should go with green/blue and not red/blue.

DieBuche added a comment.Via ConduitJul 28 2011, 3:48 PM

(In reply to comment #29)

Actually, thinking about it more, I think we should go with green/blue and not
red/blue.

How come? Accessibility or aesthetics? If there aren't any accessibility reasons, I'd really prefer the red-blue. I think they make a rather nice contrast ( actually they are exactly opposites on a typical color wheel )

(In reply to comment #28)

I like that one (diffRedGreen4.css), but can we put the lines back around the
text?

Done under the same url.

MaxSem added a comment.Via ConduitAug 13 2011, 9:06 PM

Fixed in r94429.

bzimport added a comment.Via ConduitOct 28 2011, 10:47 AM

Nx.devnull wrote:

Screenshot of problem in Google Chrome

On Chrome 16 the diff lines all have a scrollbar. It seems this is a result of the 1px border around the words that have been changed.

Attached:

Krinkle added a comment.Via ConduitMar 1 2012, 1:10 AM
  • This bug has been marked as a duplicate of bug 33335 ***
Krinkle added a comment.Via ConduitMar 1 2012, 1:11 AM
  • Bug 33139 has been marked as a duplicate of this bug. ***
Krinkle added a comment.Via ConduitMar 1 2012, 1:11 AM

Diff style reverted back to status que as of 1.18.0 in r112750.

Bug is still valid and needs a solution, see r112750 commit-msg for details

Krinkle added a comment.Via ConduitMar 1 2012, 1:11 AM
  • Bug 33335 has been marked as a duplicate of this bug. ***
TrevorParscal added a comment.Via ConduitMar 1 2012, 6:10 PM

A new patch that follows W3C Accessiblity guidelines will follow (authored by Timo and I)

The reasons these changes need to be reverted are because of violations of guidelines.

  1. Don't rely on color along
  2. Contrast ratio between background and foreground colors on the changed text portion of a diff is not high enough

See: http://www.w3.org/TR/WCAG10/

aaron added a comment.Via ConduitMar 1 2012, 6:19 PM

What was relying on color alone?

TrevorParscal added a comment.Via ConduitMar 1 2012, 6:26 PM

(In reply to comment #38)

What was relying on color alone?

For example, a bold period is not noticeable, so you are relying on color alone to show it's been changed. If you can't distinguish the difference between the background colors (insufficient contrast), it may as well be invisible. I've seen some approaches which solve this problem well, we will take them into account.

I will note that this was also true of using a bold red foreground as well. The new patch will solve this too.

TrevorParscal added a comment.Via ConduitMar 1 2012, 9:25 PM

Created attachment 10148
Screenshot of improved diff view. Satisfies accessibility guidelines and is highly resilient to nearly all forms of color blindness.

Attached:

TrevorParscal added a comment.Via ConduitMar 1 2012, 9:26 PM

Created attachment 10149
Patch to apply new diff styles

Attached: mediawiki.action.history.css

TrevorParscal added a comment.Via ConduitMar 1 2012, 9:26 PM

Created attachment 10150
New diff style color codes

Attached:

TrevorParscal added a comment.Via ConduitMar 1 2012, 9:35 PM

Resolved in r112836.

TrevorParscal added a comment.Via ConduitMar 2 2012, 12:09 AM

Created attachment 10151
Updated diff view example

Changes to long parts of the text were rendering pretty badly. r112853 helps a lot by only using left and right borders.

Attached:

TrevorParscal added a comment.Via ConduitMar 5 2012, 7:47 PM

Created attachment 10177
Variety of diff view screenshots as of r113071

Attached: DiffView.pdf

TrevorParscal added a comment.Via ConduitMar 5 2012, 7:52 PM

Created attachment 10178
Diff colors used in r113071

Attached:

Edokter added a comment.Via ConduitMar 31 2012, 9:20 AM

Created attachment 10355
Patch with final tweaks and small fixes

This patch has some fixes and final tweaks for the code currently in trunk.

  • Reorganized the CSS to specificallity.
  • Changed table width to 100%, and added zero margin for table, so no horizontal scrollbars.
  • Changed horizontal padding in table.diff td from 0.66em to 0.5em, making max use of expensive horizontal real estate.
  • Override default vertical 0.33em padding in td.diff-marker with 0.25em to compensate for increased fontsize of the marker (+ and -), which caused unwanted padding at the bottom in one-line diff rules.
  • Changed the background for td.diff-context to #f9f9f9, which is the same as the background for wikitables. (BTW, the default background for Vector is #f6f6f6, not the current #f3f3f3 as stated on wikitech-l).

The NewDiff gadget on enwiki has all these fixes implemented, so you can evaluate this code.

Attached: mediawiki.action.history.diff.css.patch

Edokter added a comment.Via ConduitApr 11 2012, 4:35 PM

Forgot to reopen.

Krinkle added a comment.Via ConduitApr 12 2012, 2:58 PM

This bug has been fixed as no red stuff is in the diffs anymore, an earlier patch got accepted and is now in master and live in wmf/1.20wmf1 on mediawiki.org and test2.wikipedia.org.

I'm not sure if the code was changed between now and the patch proposal on BugZilla but either way, if you could create a new bug for this with a patch or a merge request in Gerrit, that'd be nice.

Edokter added a comment.Via ConduitApr 12 2012, 7:08 PM

My patch applies to r113561 in SVN, and as far as I can tell, that revision is live in 1.20. I haven't set up access to Gerrit yet.

Followed up in bug 35923.

Nemo_bis added a comment.Via ConduitApr 13 2012, 8:15 AM

While we're on it, now that colours etc. have been sorted out, it would be nice to improve the underlying diffs, which are often wrong or completely useless and make some of the style changes pointless. In particular bug 13462, also bug 13466.

Quiddity added a subscriber: Quiddity.Via WebMar 2 2015, 9:11 PM
DieBuche removed a subscriber: DieBuche.Via EmailMar 27 2015, 9:36 AM

Add Comment