Color y Contraste
Colores Web
Los colores web son los colores que muestra cada pixel en una pantalla. Son los colores de la luz y suelen estar basados en modelos de color RGB (Red, Green, Blue) donde los colores primarios son el Rojo, Verde y Azul.
La adición de los tres colores primarios saturados produce el blanco. Se llama síntesis aditiva porque es una suma de colores. El color negro es la ausencia de luz.
Los colores secundarios se obtienen por la adición de los colores lumínicos primarios:
- Amarillo: Rojo + Verde
- Cian: Verde + Azul
- Magenta: Azul + Rojo
Codificación de los colores Web
Podemos representar los colores web usando el modelo RGB, con valores hexadecimales de dos dígitos.
#RRGGBB
Los dos dígitos RR son el valor del componente rojo, los GG el valor del verde y los BB el valor del azul.
Los valores hexadecimales que podemos asignar a cada dígito van desde el 0 hasta la letra f (16 valores). El 0 es ausencia de luz y la f el valor máximo.
Asignando valores a los dígitos correspondientes obtenemos los colores primarios y secundarios de la siguiente manera:
ROJO: #ff0000
VERDE: #00ff00
AZUL: #0000ff
Amarillo: #ffff00
Cyan: #00ffff
Magenta: #ff00ff
Para una mayor accesibilidad no se recomienda el uso de colores puros sino mezclados, es decir, con valores en cada uno de los tres canales: rojo, verde y azul.
Añadir colores a nuestra web
Podemos aplicar el color deseado en nuestra web añadiendo el codigo Hexadecimal a las etiquetas HTML, de la siguiente manera:
<h3 style="color: #990033;">Título de tercer nivel</h3>
En este ejemplo aplicamos el color rojo institucional UCM #990033 al texto de un encabezado: etiqueta h3.
Para aplicar color de fondo tenemos que sustituir la propiedad color por background-color.
En el Manual de estilo Web podemos encontrar los colores y tipografía UCM, cuyo uso sirve para homogeneizar los estilos y mantener la consistencia web UCM.
El color, el formato, el uso de formas e iconos, la tipografía y las imágenes se deben combinan para crear una impresión global de una página como "perteneciente" a la web donde se encuentra.
Contraste
El uso de contraste y color es vital para la accesibilidad.
El contraste es una medida de la diferencia en la "luminancia" o brillo percibido entre dos colores. Esta diferencia de brillo se expresa como una relación que varía de 1:1 a 21:1.
- Relación de contraste mínima 1:1 (Texto blanco sobre fondo blanco)
- Relación de contraste máxima 21:1 (Texto negro sobre fondo blanco)
Contraste mínimo requerido
Nuestra web requiere el cumplimiento del nivel AA de las Pautas de Accesibilidad de Contenido Web, WCAG 2.1 (Web Content Accessibility Guidelines)
Según los criterios de conformidad, para cumplir las Pautas se requieren los siguientes ratios mínimos de contraste:
- Ratio de contraste de al menos 4.5:1 para texto normal.
- Ratio de contraste de al menos 3:1 para texto grande, objetos gráficos y componentes de la interfaz del usuario.
Podemos comprobar si nuestros colores cumplen con los niveles de contraste establecidos introduciendo sus valores hexadecimales en chequeadores de accesibilidad de colores web:
Combinaciones de color de texto y color de fondo
La siguiente tabla muestra el contraste de los tres colores primarios (Rojo Verde Azul) sobre fondos blanco o negro.
| Color fondo | Color fuente | Relación de contraste | Nivel de conformidad. Texto pequeño |
Nivel de conformidad. Texto grande |
|---|---|---|---|---|
| Negro | Rojo | 5.25:1 | AA | AAA |
| Negro | Verde | 15.3:1 | AAA | AAA |
| Negro | Azul | 2.44 :1 | NO | NO |
| Blanco | Rojo | 3.99 :1 | NO | AA |
| Blanco | Verde | 1.37 :1 | NO | NO |
| Blanco | Azul | 8.59 :1 | AAA | AAA |
Tabla 1. Relación de contraste entre fuentes de color rojo, verde y azul sobre fondo blanco o negro.
Combinaciones de colores no accesibles
Texto azul sobre fondo negro: The five boxing wizards jump quickly.
Texto verde sobre fondo blanco: The five boxing wizards jump quickly.
Combinaciones poco accesibles
Texto rojo sobre fondo blanco: The five boxing wizards jump quickly.
Combinaciones accesibles
Texto rojo sobre fondo negro: The five boxing wizards jump quickly.
Combinaciones muy accesibles
Texto verde sobre fondo negro: The five boxing wizards jump quickly.
Texto azul sobre fondo blanco: The five boxing wizards jump quickly.
Color y Accesibilidad
Existe un porcentaje de la población con problemas para percibir los colores (un 8% en los varones y un 1% en las mujeres) y no es tratable. La ceguera al color, el daltonismo y otros trastornos similares, hacen que la persona no perciba ni distinga los colores de la misma manera que la mayor parte de la población. En algunos casos el usuario no puede distinguir cierto grupo de colores, o no es capaz de distinguir los matices y las sombras dentro de un color. En casos más extremos la visión es totalmente monocromática, en blanco y negro.
La principales recomendaciones son:
- Elegir combinaciones de colores que proporcionen el suficiente contraste (nivel AA)
- No utilizar únicamente el color para trasmitir información. Siempre se debe incluir la información mediante otro sistema alternativo, además del uso del color.
- Evitar imágenes parpadeantes o con más de tres destellos por segundo.
- En caso de usar GIF animados no deberían durar más de 5 segundos, porque pueden dificultar la lectura del contenido.