Web design accessible to color blind people - 5 tips
design should always be well thought out

Web Design

Did you know that 4.5% of the world population suffers from some type of color blindness? When creating a website it is easy to forget this detail, since most designers are not color blind. As there are different types of color blindness these tips may not be applicable to all situations.

Here are 5 tips on how to make our site accessible to color blind people.

 

1. Beware of color combinations

The colors on our website should be well chosen, as people with different types of color blindness see different colors. We should avoid these combinations when possible.

  • green / red
  • green / brown
  • blue / purple
  • green / Blue
  • light green / yellow
  • blue / gray
  • green / gray
  • green / black

 

2. Use images with contrast

When you overlay an image, where the image has text on top, increase the opacity of the image, making it easier to read the text.

3. Add descriptions to photos

Especialmente se tem um site de comércio, junto das fotografias alusivas aos produtos, acrescente uma descrição escrita das cores em que o produto existe e seja preciso. A cor “camel” é amarela ou castanha?

4. Highlight links

Links com cores são ótimos, para quem os percebe. Opte por links com logótipos  ou imagens, ou então com sublinhados. Assim destaca todos os links da sua página do resto do texto, com facilidade.

5. Pay attention to forms

On registration forms, make headings corresponding to each box and preferably use an asterisk in mandatory fields instead of colors.

Remember that your website, in addition to looking beautiful, must be accessible. At Mailayout we hear what you want and propose what you need, in web design and beyond.

The top image should read the numbers 12, 8, 42, 74 and 6, from left to right.
Category: Curiosities
Tags: design & web design

Leave a Reply

Your email address will not be published. Required fields are marked *

Looking for something like this? Talk with us!

    Name *

    Email *

    Contact *

    Tell us what goes on your mind! *

    * this only means that you must write something

    MAIDOT website CSS Reel Award for Winner and Site Of The Day
    MAIDOT website CSS Winner Award for Nominee and Site Of The Day