Agencia de Gobierno Electrónico y Sociedad de la Información y del Conocimiento

Color y contraste en contenidos

Criterios que contemplan

• Criterio 1.4.1: Uso del color (Nivel A)
• Criterio 1.4.3: Contraste (mínimo) (Nivel AA) y Criterio número 1.4.6: Contraste aumentado (Nivel AAA)
• Criterio 1.4.11: Contraste no textual (Nivel AA)

Objetivo

1. El color no es la única forma de distinguir información. Incorporar una alternativa para comprender la información transmitida con colores, por ejemplo, una forma o un texto. Es fundamental para personas con discapacidades visuales relacionadas a la percepción del color.
2. El texto puede ser visto por personas que necesitan un fuerte contraste: el texto y las imágenes de texto deben tener una relación de contraste de al menos 7:1, excepto en los siguientes casos:

• Textos grandes (+24px o 19px en negrita): contraste mínimo 4.5:1.
• Elementos inactivos, decorativos o invisibles: sin requisito de contraste.
• Textos en logotipos o marcas: sin requisito de contraste.

3. La información visual importante cumple con el mismo contraste mínimo requerido para texto más grande (4.5:1). Comprende los componentes de la interfaz de usuario y objetos gráficos: las áreas interactivas y el indicador de la posición del foco con respecto al fondo interno y externo, los estados “marcado y no marcado” con su color adyacente, los enlaces deben distinguirse de los elementos y texto que les rodean. 

Método o herramienta sugerida para su evaluación

1. Hasta el momento, no existe una herramienta que permita verificar que no se usa solo el color para transmitir información, por lo que se necesita realizar una revisión manual. Verificar que ninguna información necesaria para percibir el contenido se comunica exclusivamente a través del color. A modo de ejemplo: los enlaces dentro de bloques de texto no sólo tienen un color distinto del texto, sino que están subrayados. En la validación se usa la palabra “error”, además de marcar los errores en rojo, entre otras.
2. Colour Contrast Analyser.
3. Los validadores automáticos pueden detectar algunos de estos errores. Se sugiere hacer una primera revisión con Wave y luego usar C.C.A. para revisar manualmente los elementos que no detecta Wave.