Comprender las WCAG 2.0

Ir al Contenido (Presione Entrar)

-

Contraste (mejorado):
Comprender CC 1.4.6

1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos: (Nivel AAA)

  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1;

  • Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.

  • Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Proposito de este Criterio de Conformidad

La intención de este Criterio de Conformidad es proporcionar suficiente contraste entre el fondo y el texto de modo que las personas con visión moderadamente reducida (que no utilizan ayudas técnicas para realzar el contraste) puedan leer con facilidad. Para las personas sin deficiencias en la percepción del color, el tono y la saturación tienen un efecto mínimo o nulo en su legibilidad según la evaluación del rendimiento en la lectura (Knoblauch et al., 1991). Las deficiencias de color pueden afectar un poco el contraste de luminosidad. Por lo tanto, se recomienda que el contraste se calcule de forma tal que el color no sea un factor clave, para que las personas con deficiencias visuales tengan también un contraste adecuado entre el fondo y el texto.

Se excluyen los textos que no transmiten ninguna información o son simplemente decorativos. Por ejemplo, si se utilizan palabras al azar para crear un fondo y su orden se puede cambiar sin alterar el significado, entonces serán consideradas decorativas y no tendrán que cumplir con este criterio.

Los textos de gran tamaño y con trazos gruesos son más fáciles de leer con poco contraste, por eso los requisitos de contraste para los textos de gran tamaño son menores. Esto le permite a los autores utilizar un rango mayor de colores para los textos grandes, en particular los títulos, lo cual resulta práctico a la hora de diseñar páginas web. Los textos con un tamaño de 18 puntos o de 14 puntos en negrita se consideran lo suficientemente grandes como para requerir poco contraste. (Véase The American Printing House for the Blind Guidelines for Large Printing y The Library of Congress Guidelines for Large Print en Recursos). A pesar de que "18 puntos" y "negritas" tienen diferentes significados según la fuente, excepto en aquellas fuentes muy delgadas o inusuales, deben resultar suficientes. Debido a que existen demasiadas fuentes distintas, se usan las medidas generales y se incluye un aviso acerca de las fuentes delgadas o decorativas.

Nota 1: Cuando a las fuentes se le aplican procesos de antialiasing con el fin de que se vean más suaves, pueden perder oscuridad o luminosidad. Así, el contraste real se puede ver reducido. Los trazos más gruesos reducirán este efecto (en las fuentes delgadas se podría ver aclarado el trazo completo y no sólo sus extremos). Se recomienda el uso de fuentes de mayor tamaño y hacer pruebas de legibilidad en las aplicaciones de usuario con el suavizado de las fuentes activado.

Nota 2: Debido a que las distintas aplicaciones de edición de imágenes establecen por defecto distintas densidades de píxeles (e.g. 72 PPI o 96 PPI), especificar en puntos las medidas para las fuentes desde una aplicación de edición de imágenes puede ser poco fiable para presentar un texto en un tamaño específico. Al crear imagenes de texto a gran tamaño, los autores tienen que asegurarse de que el texto de la imagen sea aproximadamente equivalente a 1.2 o 1.5 ems o a 120% o 150% del tamaño por defecto del texto en el cuerpo del documento. Por ejemplo, para una imagen en 72 PPI, un autor necesitaría usar fuentes de aproximadamente 19 puntos y 24 puntos para presentar correctamente al usuario imagenes a gran tamaño.

Los ya mencionados requisitos de contraste para el texto también se aplican a las imágenes de texto (texto que ha sido transformado en pixeles y luego almacenado en una formato gráfico) como se indica en el Criterio de Conformidad 1.4.5.

Estos requisitos se aplican a las situaciones en las que las imágenes de texto tienen la intención de ser entendidas como texto. No se incluyen los textos que aparecen incidentalmente; por ejemplo, no se incluye el texto de un cartel cuando aparece por casualidad en una fotografía. Tampoco se incluye el texto que por alguna razón está diseñado para ser invisible para los usuarios. Los textos estilizados, como el de los logotipos, deben ser tratados en término de su función dentro de la página, que puede o no justificar la inclusión del contenido en la alternativa textual. Las pautas visuales de una empresa más allá del logotipo no se incluyen en esta excepción.

En esta disposición hay una excepción que dice "que forman parte de una imagen que contiene otros elementos visuales significativos". Esta excepción está destinada a diferenciar las imágenes que contienen un texto de las imágenes de texto que se usan para reemplazar texto con el fin de conseguir un estilo particular.

Aunque este Criterio de Conformidad se aplica solamente al texto, se deben aplicar criterios similares a la información presentada en esquemas y gráficos estadísticos. También se debe proporcionar un buen contraste del color para estas formas de presentación.

Justificación de las relaciones elegidas

Una relación de contraste de 3:1 es el nivel mínimo recomendado por [ISO-9241-3] y [ANSI-HFES-100-1988] para el texto estándar y la visión. La relación de 4.5:1 se utiliza en esta disposición para tener en cuenta la pérdida de contraste que resulta de la agudeza visual moderadamente baja, las deficiencias de color congénitas o adquiridas, o la pérdida de la sensibilidad al contraste que normalmente acompaña al envejecimiento.

La razón se basa en a) la adopción de la relación de contraste de 3:1 como contraste mínimo aceptable para los observadores normales, en el estándar ANSI, y b) la constatación empírica de que en la población, la agudeza visual de 20/40 se asocia con una pérdida de sensibilidad al contraste de alrededor de 1.5 [ARDITI-FAYE]. Un usuario con 20/40 entonces requeriría una relación de contraste de 3 * 1.5 = 4.5 a 1. Siguiendo los resultados empíricos análogos y la misma lógica, el usuario con 20/80 de agudeza visual requiere un contraste de aproximadamente 7:1.

Los tonos son percibidos de manera diferente por los usuarios con deficiencias en la visión del color (tanto congénitas como adquiridas) resultando en diferentes colores y contrastes de luminosidad relativa que para por los usuarios con visión normal. Debido a esto, el contraste y la legibilidad eficaces son diferentes para esta población. Sin embargo, las deficiencias de color son tan diversos que la prescripción eficaz de pares de colores de uso general (para contraste) basado en datos cuantitativos no es factible. Requiriendo un buen contraste de luminosidad resuelve esto al requerir un contraste que resulta independiente de la percepción del color. Afortunadamente, la mayoría de la contribución de la luminosidad es de los receptores de onda media y larga, que se superponen en gran medida en sus respuestas al espectro. El resultado es que el contraste de luminosidad efectiva se puede calcular sin tener en cuenta la deficiencia de un color específico, excepto para el uso de colores con predominancia de longitud de onda larga en contra de los colores más oscuros (por lo general aparece negro) para aquellos que tienen protanopia. (Ofrecemos una técnica recomendable sobre evitar el rojo sobre negro por esa razón). Para obtener más información, véase [ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI].

La relación de contraste de 4.5:1 fue elegido para el nivel AA ya que compensa la pérdida de sensibilidad al contraste que por lo general experimentan los usuarios con pérdida de visión equivalente a aproximadamente una visión de 20/40. (20/40 se calcula en alrededor de 4.5:1.) 20/40 es comúnmente reportada como la agudeza visual típico de los ancianos de aproximadamente 80 años. [GITTINGS-FOZARD]

La relación de contraste de 7:1 fue elegido para el nivel AAA ya que compensa la pérdida de sensibilidad al contraste por lo general experimentan los usuarios con pérdida de visión equivalente a aproximadamente 20/80 visión. Las personas con más de este grado de pérdida de visión general, generalmente usan ayudas técnicas para acceder a su contenido (y las ayudas técnicas suelen tener incorporado un contraste mejorado, así como posibilidades de amplificación). Por lo tanto, el nivel 7:1 proporciona generalmente una compensación para la pérdida de sensibilidad al contraste experimentada por los usuarios con baja visión que no utilizan ayudas técnicas y también proporciona realce de contraste para la deficiencia de color.

Nota: Los cálculos en [ISO-9241-3] y [ANSI-HFES-100-1988] son para el texto del cuerpo. Se proporciona una relación de contraste más flexible para el texto que es mucho más grande.

Notas sobre la fórmula

La conversión de los valores RGB no lineales a lineales se basa en IEC/4WD 61966-2-1 [IEC-4WD] y en "A Standard Default Color Space for the Internet - sRGB" [sRGB].

La fómula (L1/L2) para el contraste se basa en los estándares [ISO-9241-3] y [ANSI-HFES-100-1988].

El estándar ANSI/HFS 100-1988 pide contribuciones de la luz ambiente para se incluirán en el cálculo de L1 y L2. El valor .05 se usa en Typical Viewing Flare de los artículos [IEC-4WD] y [sRGB] de M. Stokes et al.

Este Criterio de Conformidad y sus definiciones usan los términos "relación de contraste" y "luminosidad relativa" en lugar de "luminosidad" para reflejar el hecho de que el contenido web no emite luz propia. La relación de contraste da una medida de la luminosidad relativa que daría como resultado cuando se muestran. (Debido a que es una relación, es adimensional.)

Nota 1: Consulte los recursos relacionados para obtener una lista de herramientas que utilizan la relación de contraste para analizar el contraste del contenido web.

Nota 2: Véase también Comprender el Criterio de Conformidad 2.4.7 Foco visible por técnicas para indicar el foco de teclado.

Beneficios específicos del Criterio de Conformidad 1.4.6:

  • Las personas con baja visión a menudo tienen dificultades para leer los textos que no constrastan con el fondo. Esto puede empeorar si la persona tiene una deficiencia en la percepción de los colores que disminuye aún más el contraste. Proporcionando un mínimo contraste de luminosidad entre el texto y su fondo puede hacer al texto más legible, aún para las personas que no pueden percibir todo el rango de colores. También funciona para aquellos raros casos de personas que no perciben ningún color.

Ejemplos del Criterio de Conformidad 1.4.6

(ninguno documentado actualmente)

Recursos relacionados

Los recursos tienen un propósito puramente informativo y no implican ningún aval.

Técnicas y Fallos para el Criterio de Conformidad 1.4.6 - Contraste (mejorado)

Cada elemento enumerado en esta sección representa una técnica o una combinación de técnicas que el Grupo de Trabajo WCAG considera suficientes para cumplir con este Criterio de Conformidad. Las técnicas enumeradas sólo satisfacen el Criterio de Conformidad si se cumple con todos los requisitos de conformidad de las WCAG 2.0.

Técnicas adicionales (recomendables) para 1.4.6

Aunque no se requieren para lograr la conformidad, las siguientes técnicas adicionales deben ser consideradas a fin de hacer más accesibles los contenidos. No todas las técnicas podrán ser utilizadas o resultarán eficaces en todas las situaciones.

  • G156: Usar una tecnología que tenga aplicaciones de usuario de uso generalizado que puedan cambiar el fondo y primer plano de los bloques de texto

  • Usar un valor de contraste más alto para el texto que está sobre un fondo estampado (futuro enlace)

  • Usar texto Unicode y hojas de estilo en vez de imágenes de texto (futuro enlace)

  • Usar un valor de contraste mayor para las líneas de los diagramas (futuro enlace)

  • Usar un nivel de contraste mayor para las combinaciones rojo-negro en texto/fondo (futuro enlace)

  • Usar colores compuestos principalmente por componentes medios del espectro para la luz y los extremos del espectro (longitudes de onda de azul y rojo) para la oscuridad (futuro enlace)

  • Usar un fondo pastel claro en vez de fondo blanco para un texto en negro, para crear un contraste suficiente pero extremo (futuro enlace)

  • Hacer los íconos usando dibujos de líneas simples que cumplan con las disposiciones de contraste para el texto (futuro enlace)

  • Proporcionar suficiente contraste de colores en gráficos y cuadros estadísticos (futuro enlace)

  • Usar una relación de contraste de 3:1 o mayor como presentación predeterminada (futuro enlace)

  • Proporcionar un contraste de color suficiente para los campos de texto vacíos (futuro enlace)

Términos clave

componente de la interfaz de usuario

Una parte del contenido que es percibida por los usuarios como un control único para una función en particular.

Nota 1: Múltiples componentes de la interfaz de usuario pueden ser implementados como un único elemento de programación. Aquí, componentes no está vinculado a las técnicas de programación sino a lo que el usuario percibe como controles separados.

Nota 2: Los componentes de la interfaz de usuario incluyen los elementos de formulario y los enlaces, así como los componentes generados por scripts.

Ejemplo: Un applet posee un "control" que permite moverse a través del contenido por línea, por página o por acceso aleatorio. Como cada uno de ellos necesitaría tener un nombre y ser configurado de forma independiente, cada uno sería un "componente de la interfaz de usuario".

gran tamaño (texto)

El texto de al menos 18 puntos o 14 puntos en negritas, o un tamaño que alcanzaría un trazo equivalente para las fuentes en Chino, Japonés y Coreano (CJK).

Nota 1: Las fuentes con trazos muy finos o con características especiales -que reducen la familiaridad de las formas de las letras- son más difíciles de leer, especialmente con bajos niveles de contraste.

Nota 2: El tamaño de fuente es la medida con que se presenta el contenido. No incluye la ampliación o reducción que pueda hacer el usuario.

Nota 3: El tamaño de fuente real que ve el usuario depende del tamaño definido por el autor y la pantalla del usuario o la configuración de las aplicaciones de usuario. Para la mayoría de las fuentes comunes, 14 y 18 puntos es aproximadamente el equivalente a 1.2 y 1.5 ems o 120% o 150% del tamaño del texto en el cuerpo del documento (asumiendo que el tamaño de la fuente del cuerpo del documento sea 100%), pero los autores necesitan comprobarlo para las fuentes particulares que empleen. Cuando los tamaños se definen en unidades relativas, el tamaño real en puntos lo calcula la aplicación de usuario para su representación. A la hora de evaluar este criterio, el tamaño en puntos debería obtenerse de la propia aplicación de usuario o calcularse sobre la base de las mediciones que haga la aplicación de usuario para calcular el tamaño de la fuente. Los usuarios que tengan una visión reducida serían responsables de elegir las configuraciones apropiadas a sus necesidades.

Nota 4: Cuando se usa texto sin especificar el tamaño de fuente, será razonable asumir el menor tamaño -utilizado por la mayoría de los navegadores- para tamaños no especificados. Si un título de nivel 1 se muestra en negritas de un tamaño de 14pt o más, entonces será razonable asumir que es texto de gran tamaño. Las escalas relativas se pueden calcular de la misma manera a partir de los tamaños predeterminados.

Nota 5: Los tamaños de 14 y 18 puntos para textos compuestos por caracteres latinos se han tomado de los tamaños más pequeño (14pt) y mayor (18pt) considerados estándares a la hora de hablar de ellos como "a gran escala". Para las fuentes de otros idiomas como CJK el "equivalente" deberían ser los tamaños mínimo y máximo correspondientes.

imágenes de texto

El texto que ha sido presentado en forma no textual (por ejemplo, una imagen) para conseguir un efecto visual determinado.

Nota: Esto no incluye el texto que forma parte de una imagen que contiene otros elementos visuales significativos.

Ejemplo: La etiqueta con el nombre de la persona que aparece en una fotografía.

relación de contraste

(L1 + 0.05) / (L2 + 0.05), donde

Nota 1: Las relaciones de contraste abarcan desde 1 a 21 (normalmente escrito de 1:1 a 21:1).

Nota 2: Dado que los autores no tienen control sobre cómo se verá afectada la presentación del texto a través de las preferencias de usuario (por ejemplo suavizado de fuentes o antialiasing), la relación de contraste para el texto puede evaluarse con el antialiasing desactivado.

Nota 3: A propósito de los criterios de conformidad 1.4.3 y 1.4.6, el contraste se mide con respecto al fondo sobre el cual el texto se representa normalmente. Si no se especifica color de fondo, se asume el blanco.

Nota 4: El color de fondo es el color especificado sobre el cual el texto se representa normalmente. Se considera un fallo si no se especifica color de fondo cuando sí se especifica el del texto, porque el color de fondo por defecto del usuario se desconoce y no se puede evaluar si su contraste es suficiente. Por la misma razón, se considera un fallo no especificar el color de un texto cuando sí se especifica el del fondo.

Nota 5: Cuando existe un borde alrededor de una letra, el borde puede añadir contraste y puede emplearse en el cálculo del contraste entre la letra y el fondo. Un borde estrecho alrededor de la letra puede considerarse como la letra en sí. Un borde ancho alrededor de la letra que rellene la zona interior de la misma actúa como un halo y podría considerarse fondo.

Nota 6: La conformidad con las WCAG debe evaluarse para pares de colores especificados en el contenido que el autor espera que aparezcan adyacentes en la presentación típica. Los autores no necesitan considerar presentaciones inusuales, como cambios de colores realizados por la aplicación de usuario, excepto cuando sean causadas por el código del autor.

simple decoración

Que sólo persigue un propósito estético, no proporciona información y no tiene ninguna funcionalidad.

Nota: Un texto es simplemente decorativo si las palabras pueden ser reorganizadas o sustituidas sin alterar su propósito.

Ejemplo: La portada de un diccionario contiene palabras al azar de colores muy suaves como fondo.

texto

La secuencia de caracteres que puede ser determinada por software, cuando la secuencia está expresando algo en un idioma.