El cartel que nadie lee
Un cartel con letras amarillas sobre fondo blanco es bonito en el móvil del diseñador.
Pero a la luz del sol no se lee nada. Y una persona mayor ni lo intenta.
Elegir bien los colores y el tamaño es parte del trabajo. Hoy aprendes a hacerlo con números.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Contraste | La diferencia entre el color de la letra y el del fondo. | |
| Legible | Que se puede leer sin esfuerzo. | |
| Hexadecimal | Una forma de escribir un color con seis cifras detrás de una almohadilla. | #0b3d91 |
| Fuente | El tipo de letra de un texto. | font-family: Arial; |
| Interlineado | El espacio entre una línea de texto y la siguiente. | line-height: 1.5; |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Tres formas de decir un color
La primera es el nombre: tomato, navy, gold.
La segunda es el hexadecimal: una almohadilla y seis cifras, como #0b3d91. Son tres pares: rojo, verde y azul.
La tercera es rgb(0, 128, 0): tres números de 0 a 255, también de rojo, verde y azul.
Pruébalo: un color de tres formas
<p class="a">Con nombre: tomato</p>
<p class="b">Con hexadecimal: #0b3d91</p>
<p class="c">Con rgb: verde</p>
Seis colores en hexadecimal
| Color | Hexadecimal | Rojo | Verde | Azul |
|---|---|---|---|---|
| Rojo | #ff0000 | todo | nada | nada |
| Verde | #00ff00 | nada | todo | nada |
| Azul | #0000ff | nada | nada | todo |
| Amarillo | #ffff00 | todo | todo | nada |
| Negro | #000000 | nada | nada | nada |
| Blanco | #ffffff | todo | todo | todo |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
El contraste se mide
Los programas dan al contraste un número. Cuanto más alto, mejor se lee.
El número va de 1 a 21. Para un texto normal, el mínimo recomendado es 4,5.
En la tabla de abajo, todas las letras están sobre fondo blanco, salvo la última fila.
Ejemplo resuelto: contrastes medidos
| Letra y fondo | Contraste | ¿Llega a 4,5? |
|---|---|---|
| Negro #000000 sobre blanco | 21,0 | Sí |
| Gris oscuro #333333 sobre blanco | 12,6 | Sí |
| Gris #767676 sobre blanco | 4,5 | Sí, justo |
| Gris #888888 sobre blanco | 3,5 | No |
| Gris claro #aaaaaa sobre blanco | 2,3 | No |
| Amarillo #ffff00 sobre blanco | 1,1 | No |
| Blanco sobre azul oscuro #0b3d91 | 10,0 | Sí |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Pruébalo: mala y buena lectura
<p class="bad">Gris claro: se lee mal.</p>
<p class="good">Gris oscuro: se lee bien.</p>
<p class="banner">Blanco sobre azul oscuro.</p>
Repaso rápido: colores
Inténtalo
Repaso rápido: colores
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.