Check themes for accessibility before making them available for download

[GeekyPeas]

Discussed in https://github.com/Gogh-Co/Gogh/discussions/60

^{Originally posted by **agauniyal** March 13, 2017} Some themes like Tomorrow Bright, Monokai and others produce color combinations which are hard/impossible to distinguish things/text on terminals. Try it yourself, choose Tomorrow Bright and open `htop` which is a widely used system monitor kind of cli application, the portion where cpu usage is shown like - ``` 1 [ 0.0%] ``` The 0.0% part and similarly other texts won't be visible to you because the background is black and text color is also black there. Several themes make them dark grey on black which is also harder to distinguish. I have tried all themes and there were several which were acting strange with all kinds of cli applications. So I propose to try the themes in atleast these cli applications before releasing them - `ranger` `htop` `top` `vim` `nano`.

================================

In many of the themes the problem is that COLOR_1 is same as/ similar to BACKGROUND_COLOR. I don't see any design philosophy/ policy for this project. I wish to suggest the following design rule, that:

no other colors should be same as/ similar to `BACKGROUND_COLOR`.

This should completely eliminate all readability issue.

Originally posted by @GeekyPeas in https://github.com/Gogh-Co/Gogh/discussions/60#discussioncomment-3497858

================================

I suggest we should run each color (that is COLOR_1, COLOR_2 etc.) against the BACKGROUND_COLOR via the following method in a stackoverflow answer on "Given a background color, how to get a foreground color that makes it readable on that background color?".

So according to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.0 we must have:

1. contrast ratio of at least 4.5:1 for regular text (12 pt or smaller), and

2. contrast ratio of at least 3.0:1 for large text

Then for every (color, BACKGROUND_COLOR) pair that fails the test, we must replace the color.

Originally posted by @GeekyPeas in https://github.com/Gogh-Co/Gogh/discussions/60#discussioncomment-3498425

[Mgldvd]

You are absolutely right, and I apologize for not responding earlier. It was very difficult to do so before due to the disorganization in the repository and themes.

Now, with the adjustments that have been made, I believe it will be much easier.

This JSON file has all the themes organized and standardized, so many things can be done from it and all the necessary tests can be run to achieve this.

I agree that this is of great importance, and in fact, I want to create ratings for each theme related to this matter and add the results to the website for each theme.

For now, I can't promise that I'll be able to do it myself, but I'll be keeping a close eye on it and try to find time to work on it.

As always, pull requests are more than welcome.

Ref:

• https://webaim.org/resources/contrastchecker/
• https://www.npmjs.com/package/color-contrast-checker
• https://www.npmjs.com/package/wcag-contrast

[Mgldvd]

These tests were run in comparison with the background

First approach


[Mgldvd]

https://gogh-co.github.io/Gogh/wcag/