Liquipedia Color blind mode

Post a Reply

ChapatiyaqPTSM

France1887 Posts

February 12 2014 22:55 GMT

Liquipedia loves its readers, equally

Preamble

Some time ago now, Jessen asked in a thread asked if the colors for Random and Protoss are the same in the racial distribution on Liquipedia, as being colorblind they are unable to tell. Iyerbeth, one of the Liquipedia editors, then relayed this question to the contributors of Liquipedia, asking if a solution could be found.

So I searched for existing solutions on the Internet, and found a Chrome extension: Chrome Daltonize!. This extension is designed to change colors on a page so that colorblind people can distinguish every color. The problem is that this extension only works for images, so it's not really useful to distinguish the colors in our brackets or racial/classes distribution tables, or participant lists.
However, thanks to that extension, I did learn that there are several types of color vision deficiencies:

Monochromacy
Dichromacy
Anomalous Trichromacy (mild forms of dichromacies)
- Protanomaly
- Deuteranomaly
- Tritanomaly

The Wikipedia article on Color blindness is also a good resource.

Liquipedia Color blind mode

Using the code source of the extension, I created several userscripts to add the support for background and text colors.
To show the effects of these scripts, I'll use the Liquipedia logo adorned with a rainbow flag (designed by fusefuse).

Another example with a bracket:

No deficiency

+ Show Spoiler [Results] +

Protanopia before/after

Deuteranopia before/after

Tritanopia before/after

For each deficiency, the result is actually simulated, so I don't know if it's close to the reality. However, the simulated results look good, since colors seem to be a more distinct (even though for deuteranopia, the change is not very noticeable).

The scripts are all in this archive:

LP_Color_blind_mode_v0_3.zip

+ Show Spoiler [Contents] +

Two folders:

Greasemonkey (for Mozilla Firefox)
Tampermonkey (for Google Chrome, or Opera 15+)

The scripts for the Colorblind mode are userscripts. They are to be used with Greasemonkey on Firefox, and Tampermonkey on Chrome. Userscripts also work on Opera 15+ with Tampermonkey: http://my.opera.com/marunkmr/blog/using-user-scripts-with-opera-15 (they also work natively in Opera 12 and previous, just drag and drop the user.js file to the browser).

The contents of each folder are basically the same (except that for Tampermonkey, "user" becomes "tamper"):

Daltonize Deuteranope (with images) v0_3.user.js
Daltonize Deuteranope v0_3.user.js
Daltonize Protanope (with images) v0_3.user.js
Daltonize Protanope v0_3.user.js
Daltonize Tritanope (with images) v0_3.user.js
Daltonize Tritanope v0_3.user.js

Each script has two versions:

Normal, only affects the background color of HTML elements;
with images, also processes the images.

Then, there are three types of dichromacies: Protanopia, Deuteranopia, and Tritanopia.

+ Show Spoiler [For Tampermonkey] +

How to install new scripts to Tampermonkey?
Goto Chrome's extensions page, enable the "Allow access to file URLs" checkbox at the Tampermonkey item. After this select a file with the file ending ".tamper.js" and drag-and-drop it to Chrome.

Notes

If you are colorblind, please give it a try, and tell me what you think about it. If you have some problem using the scripts, ask me in this thread or by PM, and I'll help you.

It's a project I've finished some time ago, but I never took the time to release it. I don't know if it will garner interest, but at least now it's out there. I still have many other projects for Liquipedia.

Cheers!