Skip to main content

Edición imágenes Web UCM

Guía de apoyo a la edición Web

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.

 

Círculo cromático

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:

  1. Amarillo: Rojo + Verde
  2. Cian: Verde + Azul
  3. 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 cero 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</p>

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:

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, poque pueden dificultar la lectura del contenido.