search

Tatoeba / tatoeba2

Tatoeba is a platform whose purpose is to create a collaborative and open dataset of sentences and their translations.
https://tatoeba.org
GNU Affero General Public License v3.0
707 stars 132 forks source link

Update colors to something with easier-to-read, higher-contrast colors #1164

Open ckjpn opened 8 years ago

ckjpn commented 8 years ago

Problem

Green for fonts is a bad choice for people who are color blind.

Additionally some places on the website have a very low contrast between the font and the background the font is on.

As you are moving toward a more mobile-friendly UI, more people will be affected by some of these colors as they are using their small-screen devices in bright environments which will mean that the low contrast between fonts and backgrounds also makes reading more difficult even for people with good eyesight.

Solution

Read about "web accessibility" if you don't already know some of the key points. https://www.google.com/search?q=%22web%20accessibility%22

If you have no ideas on what some good color combinations are, copy what major websites like Google are doing. They've put a lot of research into this. The default colors of Bootstrap have likely been chosen after a lot of research, but I don't know that for a fact.

ghost commented 8 years ago

If you have no ideas on what some good color combinations are, copy what major websites like Google are doing. They've put a lot of research into this.

We don't need to copy them. There's a website that helps you choose colors combinations with high contrast: http://webaim.org/resources/contrastchecker/

I think we will use one of these colors palette in the future: https://www.google.com/design/spec/style/color.html

trang commented 8 years ago

@ckjpn you should mention your suggestions/screenshots on the Wall.

trang commented 8 years ago

You can use the browser "Inspect" tool in order to find out the CSS you can override. Simply right-click on the desired element, and select "Inspect" (in Chrome) or "Inspect Element" (in Firefox). At the bottom of the window, a panel will open where you can see the HTML structure and the CSS.

In this panel, make sure you select the HTML for which you want to modify the CSS. Then in the right-side column, you can see what CSS is applied to this element. You can also see the CSS selector. You can even test modifications of the CSS directly from this Inspect tool.

https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/

In your case, the CSS selectors you want to override are possibly:

  1. md-button.md-primary
  2. #annexe_content .md-button

Here's a screenshot for #annexe_content .md-button.

screenshot_24

trang commented 6 years ago

@ckjpn There's an alternative: https://add0n.com/stylus.html

trang commented 6 years ago

No sorry, I'm not an iOS user.

trang commented 6 years ago

I think I've explained this before. This is not that I'm hesitant. It's not as easy as you think.

You are only viewing the practical aspect here. But there's an aesthetic aspect that cannot be neglected.

Yes, it's very easy to change the colors of the links. But it's not easy to do that while maintaining a nice look and feel.

jiru commented 4 years ago

Let’s not antagonize ourselves. It’s no use to try making a point here. We all understand the problem for visually-impaired people. There is work to be done on this issue and let’s be honest none of us are very skilled designers.

Whoever wants to see progress on this issue is welcome to submit a pull request. You don’t even need to be knowledgeable about programming to setup a ready-to-use local instance of Tatoeba.