Use of color Digital Accessibility

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Other sites
Logo Digital Accessibility   Digital Accessibility
Digital Accessibility

Use of color

Contrast of luminosity

There is a percentage of the population with problems to perceive colors, either when differentiating certain colors or because they suffer from some form of blindness that only allows them to perceive a reduced spectrum of colors. Because of this, it is very difficult to determine which color options are the most suitable to use.

The brightness contrast between the color of the background and the color of the text should be enough to guarantee a good legibility of the text in unfavorable situations of high light, screens with little contrast or brightness and for people with vision problems.

The accessibility guidelines of the web content establish in their AA level the enough contrast ratios of 4.5 for texts smaller than 18 points and of 3 for texts larger than 18 points.

We can say that the greater the contrast, the easier it gets reading the text, regardless of the combination of colors. In most situations, the most recommended is black text on a white background or colors very close to them, such as dark gray and sepia tones.

Let's see some examples of sentences with different color combinations and their contrast:

  1. Hello, I am a green tex on a red background. Ratio 1.3.
  2. Hi, I'm a light blue text on white background. Ratio 1.3.
  3. Hello, I'm an orange text on a yellow background. Ratio 1.8.
  4. Hello, I am a green text on white blackground. Ratio 5.1.
  5. Hi, I'm a dark gray text on a light gray background. Ratio 11.7.

As we can see, combinations 1, 2 and 3 are terrible and difficult to read. Combination 4 would be the minimum recommended contrast and 5 is the easiest combination to read thanks to its high contrast.

In the case of brochures, posters and other documents we must pay special attention to the use of color and ensure a contrast that facilitates their understanding. This material is created with the aim of being visually attractive and drawing attention, so it is easy to forget these important recommendations.

On the other hand, it is not advisable to use color gradient backgrounds or with wefts since the changes of color tone could make it difficult for some people to access the information of the document, especially if the text is placed on the color gradient.


Knowing the contrast of luminosity between colors

The online tool  ContrastRatio  allows us to insert the background and text colors, with and automatically preview of the combination, furthermore, it also shows the contrast of luminosity.

There are three ways of adding color:

  1. Writing the color in English: white, black, orange, red, etc.
  2. Writing the color in hexadecimal format: # 000000 (black), #FFFFFF (white), etc.
  3. Writing the color in RGB format: rgb (0,0,0) (black), rgb (255,255,255) (white), etc.

  Use of colour - luminosity contrast

Get RGB color code in Word

The colors in Microsoft Office are represented in the RGB format (Red, Green, Blue). To know the exact values of the colors used and to be able to carry out contrast checks, we follow these steps in Word:

  1. We select the Home tab.
  2. In the toolbar we display the font color options.
  3. We select More colors ... Use of colour to obtain colour RGB
  4. In the new Colors window we select the Custom tabUse of colour to obtain colour RGB .
  5. Now we can see the numerical values for each value (Red, Green, Blue) that represent the color in RGB format.

Semantic use of color

It is advisable not to use only the color to transmit information. This information should always be included through another alternative system, in addition to the use of color.

Let's see an example. We must correct a test exam, and we write as follows:

Note: The correct answer is in green.

Question 1: We must transmit information only through color.

  1. True
  2. False

In this example, a blind person will be unable to know which are the correct answers since their screen reader cannot interpret the colors. The same would happen to a person with difficulties in distinguishing colors.

Let's look at the same example now but using an alternative way of transmitting the information:

Note: The correct answer is marked with an X.

Question 1: We must transmit information only through color.

  1. True
  2. X False

In this example, a blind person will know the correct answers when their reader reads the letter x.

If you wish, you can consult the section on the use of color in charts for more information and examples.

 

Movement and flickers

We must avoid flashing images or with more than three flashes per second, as they can affect people suffering from photosensitive epilepsy.

In addition, if images with animations are used as GIF files for example, they should not last more than 5 seconds as they can make reading the content of the document difficult for people with cognitive problems or with attention deficit hyperactivity disorders.

 

 

Forms     Links