Last modified: 2012-04-13 10:21:50 UTC

Wikimedia Bugzilla is closed!

Wikimedia has migrated from Bugzilla to Phabricator. Bug reports should be created and updated in Wikimedia Phabricator instead. Please create an account in Phabricator and add your Bugzilla email address to it.
Wikimedia Bugzilla is read-only. If you try to edit or create any bug report in Bugzilla you will be shown an intentional error message.
In order to access the Phabricator task corresponding to a Bugzilla report, just remove "static-" from its URL.
You could still run searches in Bugzilla or access your list of votes but bug reports will obviously not be up-to-date in Bugzilla.
Bug 11374 - Red .diffchange text in the green 'added' area may be hard to read for color-blind users
Red .diffchange text in the green 'added' area may be hard to read for color-...
Status: RESOLVED FIXED
Product: MediaWiki
Classification: Unclassified
History/Diffs (Other open bugs)
unspecified
All All
: Normal enhancement with 8 votes (vote)
: 1.20.0 release
Assigned To: Jan Paul Posma
: accessibility
: 3540 17763 33139 33335 (view as bug list)
Depends on:
Blocks: 367 css
  Show dependency treegraph
 
Reported: 2007-09-17 16:42 UTC by René Kijewski
Modified: 2012-04-13 10:21 UTC (History)
14 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
red to blue (232 bytes, patch)
2007-09-17 20:04 UTC, René Kijewski
Details
correct patch file for skins/common/diff.css (316 bytes, patch)
2007-09-19 03:34 UTC, René Kijewski
Details
Fix (715 bytes, patch)
2011-04-27 10:39 UTC, Jan Paul Posma
Details
French fix (715 bytes, patch)
2011-04-27 10:59 UTC, Jan Paul Posma
Details
Simulation how a red-green blind user would see the currently used scheme (10.55 KB, image/png)
2011-07-27 17:33 UTC, DieBuche
Details
Simulation how a red-green blind user would see the proposed scheme (38.27 KB, image/png)
2011-07-27 17:42 UTC, DieBuche
Details
Screenshot of problem in Google Chrome (39.98 KB, image/png)
2011-10-28 10:47 UTC, Nikola Kovacs
Details
Screenshot of improved diff view. Satisfies accessibility guidelines and is highly resilient to nearly all forms of color blindness. (95.07 KB, image/png)
2012-03-01 21:25 UTC, Trevor Parscal
Details
Patch to apply new diff styles (1.77 KB, patch)
2012-03-01 21:26 UTC, Trevor Parscal
Details
New diff style color codes (4.41 KB, image/png)
2012-03-01 21:26 UTC, Trevor Parscal
Details
Updated diff view example (74.09 KB, image/png)
2012-03-02 00:09 UTC, Trevor Parscal
Details
Variety of diff view screenshots as of r113071 (422.72 KB, application/pdf)
2012-03-05 19:47 UTC, Trevor Parscal
Details
Diff colors used in r113071 (3.31 KB, image/png)
2012-03-05 19:52 UTC, Trevor Parscal
Details
Patch with final tweaks and small fixes (2.54 KB, patch)
2012-03-31 09:20 UTC, Erwin Dokter
Details

Description René Kijewski 2007-09-17 16:42:40 UTC
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
Comment 1 René Kijewski 2007-09-17 20:04:36 UTC
Created attachment 4124 [details]
red to blue
Comment 2 René Kijewski 2007-09-19 03:34:05 UTC
Created attachment 4132 [details]
correct patch file for skins/common/diff.css

The first attachment has a wrong header.
Comment 3 René Kijewski 2007-09-19 03:53:08 UTC
You may have a look on
- http://de.wikipedia.org/wiki/Wikipedia_Diskussion:BIENE/Farbenfehlsichtigkeit#Was_zu_tun.3F
to see, what the patch would change (the colored lines).
Comment 4 Aaron Schulz 2007-09-19 06:08:12 UTC
You can also edit your own CSS files. Perhaps some userscripts for this should be posted in a nice easy to find place.
Comment 5 René Kijewski 2007-09-19 13:55:38 UTC
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.
Comment 6 oysterguitarist 2008-04-02 01:35:03 UTC
Another idea would be to make this configurable in your preferences, that way users could have it either way.
Comment 7 Brion Vibber 2009-03-02 19:29:41 UTC
*** Bug 17763 has been marked as a duplicate of this bug. ***
Comment 8 Michael Daly 2009-03-02 19:41:41 UTC
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
Comment 9 Niklas Laxström 2009-08-13 08:40:11 UTC
*** Bug 3540 has been marked as a duplicate of this bug. ***
Comment 10 Jan Paul Posma 2011-04-27 10:39:06 UTC
Created attachment 8466 [details]
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.
Comment 11 Jan Paul Posma 2011-04-27 10:59:59 UTC
Created attachment 8467 [details]
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.
Comment 12 p858snake 2011-04-30 00:09:59 UTC
*Bulk BZ Change: +Patch to open bugs with patches attached that are missing the keyword*
Comment 13 Krinkle 2011-06-01 20:05:56 UTC
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.
Comment 14 Brion Vibber 2011-06-01 20:11:18 UTC
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.
Comment 15 Krinkle 2011-06-01 20:21:25 UTC
(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
Comment 16 Krinkle 2011-06-01 20:23:50 UTC
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
Comment 17 Krinkle 2011-06-01 20:55:43 UTC
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
Comment 18 Krinkle 2011-06-01 22:30:21 UTC
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
Comment 19 DieBuche 2011-07-11 11:39:58 UTC
(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
Comment 20 Brandon Harris 2011-07-27 16:57:15 UTC
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.
Comment 21 DieBuche 2011-07-27 17:32:04 UTC
(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
Comment 22 DieBuche 2011-07-27 17:33:25 UTC
Created attachment 8828 [details]
Simulation how a red-green blind user would see the currently used scheme
Comment 23 DieBuche 2011-07-27 17:42:09 UTC
Created attachment 8829 [details]
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.
Comment 24 Brandon Harris 2011-07-27 17:51:38 UTC
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.
Comment 25 DieBuche 2011-07-27 18:22:28 UTC
(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.

2. 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.
Comment 26 Brandon Harris 2011-07-27 18:45:51 UTC
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.
Comment 27 DieBuche 2011-07-27 19:10:00 UTC
(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
Comment 28 Brandon Harris 2011-07-27 19:21:33 UTC
I like that one (diffRedGreen4.css), but can we put the lines back around the text?
Comment 29 Brandon Harris 2011-07-27 23:21:54 UTC
Actually, thinking about it more, I think we should go with green/blue and not red/blue.
Comment 30 DieBuche 2011-07-28 15:48:20 UTC
(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.
Comment 31 Max Semenik 2011-08-13 21:06:28 UTC
Fixed in r94429.
Comment 32 Nikola Kovacs 2011-10-28 10:47:56 UTC
Created attachment 9311 [details]
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.
Comment 33 Krinkle 2012-03-01 01:10:19 UTC

*** This bug has been marked as a duplicate of bug 33335 ***
Comment 34 Krinkle 2012-03-01 01:11:17 UTC
*** Bug 33139 has been marked as a duplicate of this bug. ***
Comment 35 Krinkle 2012-03-01 01:11:32 UTC
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
Comment 36 Krinkle 2012-03-01 01:11:51 UTC
*** Bug 33335 has been marked as a duplicate of this bug. ***
Comment 37 Trevor Parscal 2012-03-01 18:10:10 UTC
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/
Comment 38 Aaron Schulz 2012-03-01 18:19:47 UTC
What was relying on color alone?
Comment 39 Trevor Parscal 2012-03-01 18:26:34 UTC
(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.
Comment 40 Trevor Parscal 2012-03-01 21:25:57 UTC
Created attachment 10148 [details]
Screenshot of improved diff view. Satisfies accessibility guidelines and is highly resilient to nearly all forms of color blindness.
Comment 41 Trevor Parscal 2012-03-01 21:26:28 UTC
Created attachment 10149 [details]
Patch to apply new diff styles
Comment 42 Trevor Parscal 2012-03-01 21:26:52 UTC
Created attachment 10150 [details]
New diff style color codes
Comment 43 Trevor Parscal 2012-03-01 21:35:29 UTC
Resolved in r112836.
Comment 44 Trevor Parscal 2012-03-02 00:09:51 UTC
Created attachment 10151 [details]
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.
Comment 45 Trevor Parscal 2012-03-05 19:47:32 UTC
Created attachment 10177 [details]
Variety of diff view screenshots as of r113071
Comment 46 Trevor Parscal 2012-03-05 19:52:46 UTC
Created attachment 10178 [details]
Diff colors used in r113071
Comment 47 Erwin Dokter 2012-03-31 09:20:31 UTC
Created attachment 10355 [details]
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.
Comment 48 Erwin Dokter 2012-04-11 16:35:05 UTC
Forgot to reopen.
Comment 49 Krinkle 2012-04-12 14:58:57 UTC
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.
Comment 50 Erwin Dokter 2012-04-12 19:08:10 UTC
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.
Comment 51 Nemo 2012-04-13 08:15:21 UTC
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.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links