Español
Menú del sitio

contrast-computable

Debe ser posible calcular el contraste del texto renderizado

automaticWCAG 1.4.3, 1.4.6 (AAA)confianza: highgravedad: seriousperceivable

Determina si hay información suficiente para calcular el contraste de color del el texto visible (por ejemplo, sin degradados/imágenes/modos de fusión que hagan indeterminado el fondo).

Ámbito de aplicación. Se aplica a cada nodo de texto visible dentro del alcance, además de la etiqueta de <input type="button">/[type="submit"]/[type="reset"], que se renderiza a partir del atributo value y por tanto es invisible a un recorrido de nodos de texto, y el texto que muestra un campo de formulario: el valor actual de un <textarea> o de un <input> que muestra texto (text, search, email, url, tel, password, number, los tipos de fecha y hora) o, mientras el valor está vacío, su placeholder, con el color, la fuente, la opacidad y el fondo de ::placeholder (solo donde el navegador calcula ese estilo; jsdom no lo hace). El texto de un <select> desplegable (sin multiple, con un size de 1 o sin él, y sin appearance: base-select) cuenta como el del select, dibujado por el control cerrado con sus colores, su fuente y su fondo: su opción mostrada, y cualquier otra opción con los colores del select. En un navegador, también lo es el texto que genera el content de un ::before o ::after (cadenas, attr() tal como lo resuelve el navegador, contadores), y el texto del ::marker de un elemento de lista (un número o una letra, o una cadena; una viñeta o una imagen no son texto), cada uno juzgado en el color y la fuente del pseudoelemento, sobre su elemento; jsdom no calcula estilos de pseudoelementos, así que allí se deja fuera. El texto cuenta solo cuando su elemento es visible en el DOM según el modo de visibilidad de la ejecución, no está recortado fuera de la vista mediante la técnica sr-only (clip o clip-path), y no pertenece ni a un control deshabilitado ni a la etiqueta de uno, la excepción de WCAG para componentes de interfaz de usuario inactivos. Los subárboles excluidos mediante engineOptions.excludeSelectors se omiten, y los shadow roots abiertos se recorren como raíces por derecho propio.

Resultado esperado. Ambos lados del cálculo de contraste pueden establecerse a partir de CSS para cada nodo de texto aplicable: un fondo efectivo que resuelve a un color opaco, y un color de primer plano analizable. Cuando alguno de los dos no puede establecerse (una imagen de fondo o degradado (un degradado de un solo color es ese color, y una capa que no pinta nada bajo el texto, como un subrayado de 1px, se excluye), mix-blend-mode, un filter (que no sea solo drop-shadow() sobre un fondo opaco bajo todo el texto, que oculta la sombra) o backdrop-filter, un text-shadow que puede añadir contraste que este motor no tiene ningún modelo de renderizado de glifos para tener en cuenta, un contorno -webkit-text-stroke (dibujado en su propio color, a menudo la mayor parte del glifo), un ::first-line o ::first-letter con un color propio (el texto que pinta depende de los saltos de línea), una opacidad en un ancestro, o en el propio elemento del texto sobre un fondo propio, que no se puede resolver frente a lo que hay detrás, un fondo raíz que nunca llega a ser opaco donde no se puede conocer el lienzo de la página (en un marco, con colores forzados; en los demás casos el texto se mide sobre el lienzo, véase contrast-minimum), un color que no se puede analizar, o una opción de un <select> desplegable, distinta de la mostrada, con un color, un fondo o una opacidad propios (SELECT_OPTION_COLOR: solo se muestra en la lista que abre el select, que la plataforma dibuja en esos colores o en los suyos propios), o, en un emulador como jsdom, un color de texto que no se puede determinar en el esquema de color con el que se dibuja la página (COLOR_SCHEME_NOT_RENDERED)), el resultado es cantTell, nombrando el bloqueo. Esta regla es la que informa de esa incertidumbre, lo que permite que contrast-minimum y contrast-enhanced permanezcan en silencio sobre el mismo texto en lugar de adivinar una proporción. Una excepción: el texto dibujado por un trazo o una sombra cuyos colores, incluido su relleno cuando se ve, están todos por debajo de la proporción AA frente a un fondo plano, falla contrast-minimum y contrast-enhanced, y aquí no se pregunta por él.

Qué informa un hallazgo.

  • blockerProperty, blockerValue (un efecto CSS que lo impide): la propiedad CSS que bloquea el cálculo y su valor, por ejemplo mix-blend-mode, filter, text-shadow, -webkit-text-stroke u opacity.
  • blockerSelector (un efecto CSS que lo impide): un selector del elemento que lo tiene, que puede ser un ancestro del texto.
  • backgroundFillType (una imagen o un degradado de fondo): image, gradient, imageAndGradient o unknown.
  • background, backgroundAlpha (un fondo que nunca llega a ser opaco, o un color que no se puede interpretar): el color de fondo hasta donde se pudo determinar, como cadena rgba(), y su opacidad de 0 a 1.
  • eligibleTextCount (el pass): cuántos nodos de texto se comprobaron.
  • assumptionsCount, assumptionsApplied (el pass): cuántos nodos de texto necesitaron una suposición para obtener un fondo, y cuáles se hicieron. Cada elemento es un código; ROOT_CANVAS_FALLBACK significa que se supuso que un fondo de página que nunca llega a ser opaco se asienta sobre el color de lienzo que indica el análisis (contrast.rootCanvasFallback) o, con el modo auditorAssist donde no se puede conocer el lienzo propio de la página (en un marco, con colores forzados), sobre ese color, blanco por defecto. El texto medido sobre el lienzo que le da el esquema de color de la página no necesita ninguna.
  • generatedBy (texto generado que no se puede medir): ::before, ::after o ::marker, el pseudoelemento por cuyo texto se pregunta; el selector nombra su elemento. GENERATED_TEXT_UNREADABLE es contenido cuyo texto no se puede leer (un contador con un estilo propio de la página), y GENERATED_TEXT_POSITIONED, un pseudoelemento sacado del flujo sin fondo opaco propio.
  • typography.fontSizePx, typography.fontSizePt (cada texto por el que se pregunta): el tamaño de fuente tal como se dibuja, en píxeles CSS y en puntos, como lo informa contrast-minimum: el tamaño calculado multiplicado por el zoom de CSS, una escala de SVG o font-size-adjust. typography.declaredFontSizePx y typography.sizeScaledBy cuando se dibuja con un tamaño distinto de su font-size.
  • typography.fontWeight, typography.fontWeightLabel: el peso de fuente calculado como número (400, 700) y tal como está escrito.
  • typography.isBold, typography.isLargeText: si el texto cuenta como negrita (700 o más), y como texto grande según la definición de core (24px, o 14pt y negrita), el tamaño que solo necesita 3:1. El texto generado tiene la fuente de su pseudoelemento, con su tamaño calculado.
  • Los campos de tipografía son un contrato estable, como en contrast-minimum, a diferencia del resto de data.details.
  • forcedColors (cada ocurrencia, cuando los colores medidos eran forzados): true, y la sugerencia (hint) indica que se vuelva a comprobar la página con los colores forzados desactivados. Un análisis con colores forzados mide los colores propios de la página, así que esto solo aparece donde no pudo mantener la página en ellos.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

pass
<p style="background:#ffffff; color:#999999;">Body text</p>

El primer plano y el fondo son ambos colores planos y opacos, por lo que se puede calcular una proporción (independientemente de que luego pase AA/AAA).

can't tell
<p style="background-image:url(texture.png); color:#000000;">Body text</p>

Un background-image detrás del texto no es un color plano, por lo que no se puede calcular ninguna proporción de contraste.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

ANCESTOR_OPACITY

  1. Localizar el texto que indica el informe y anotar el ancestro con una opacidad inferior a 1.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el texto y el fondo tal como se ven en pantalla (atenuados), con un cuentagotas sobre la página representada.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Los colores atenuados en pantalla alcanzan el umbral, o el texto atenuado es un control inactivo (deshabilitado), que está exento.

No se cumple. Los colores atenuados en pantalla dan una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6), salvo que el texto forme parte de un control inactivo.

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. Localizar el texto que indica el informe y anotar el filter o backdrop-filter que tiene él o un ancestro (en el panel Styles de las herramientas para desarrolladores).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir los colores del texto y del fondo tal como se ven en pantalla con el filtro aplicado, usando un cuentagotas sobre la página representada en lugar de los valores declarados.
  3. En un desenfoque o un backdrop-filter sobre contenido cambiante, desplazarse o esperar para que pase contenido distinto por detrás, y comprobar el peor caso.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Con el filtro aplicado, la relación en pantalla alcanza el umbral.

No se cumple. Con el filtro aplicado, la relación en pantalla queda por debajo del umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

BACKGROUND_IMAGE_OR_GRADIENT

  1. Localizar el texto que indica el informe y observar la imagen o el degradado que hay detrás.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente a las partes más clara y más oscura del fondo situado justo detrás de las letras.
  3. Si la imagen cambia (diapositivas, vídeo, imágenes adaptables), comprobar cada versión y con varios anchos de ventana.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Todas las partes del fondo situadas detrás de las letras dan al menos la relación del umbral.

No se cumple. Alguna parte del fondo situada detrás del texto da una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

BACKGROUND_NOT_COMPUTABLE

  1. Localizar en la página el texto que indica el informe.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente al color que se ve justo detrás de las letras, tomando los puntos más oscuro y más claro si varía.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. La relación alcanza el umbral en todo el fondo situado detrás del texto.

No se cumple. La relación es inferior al umbral en algún punto detrás del texto, lo que incumple WCAG 1.4.3 (o 1.4.6).

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. Localizar el texto que indica el informe; la página no define ningún fondo opaco detrás de él, así que lo que se ve es el lienzo que pinta el navegador o, en un marco, la página que lo rodea.
  2. Visualizar la página donde se muestra: dentro de la página que la inserta, sin colores forzados y en cada esquema de color que admite (claro y oscuro).
  3. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el texto frente al fondo que se ve realmente en cada configuración.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. La relación alcanza el umbral en todas las configuraciones en que se muestra la página.

No se cumple. En alguna configuración en que se muestra la página, la relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

BACKGROUND_OVERLAP

  1. Localizar el texto que indica el informe y comprobar qué elemento se pinta realmente detrás de él (inspeccionarlo y desactivar y reactivar el elemento superpuesto).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente al color que se ve realmente detrás de las letras.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. El color que hay realmente detrás del texto da al menos la relación del umbral.

No se cumple. El color que hay realmente detrás del texto da una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

BACKGROUND_UNPARSABLE

  1. Localizar el texto que indica el informe e inspeccionar el valor del color de fondo en las herramientas para desarrolladores (a menudo con una sintaxis más reciente, como oklch(), lab() o color()).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente al fondo tal como se representa en pantalla.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. La relación alcanza el umbral.

No se cumple. La relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

COLOR_SCHEME_NOT_RENDERED

  1. Abrir la página en un navegador configurado con el esquema de color que indica el informe (blockerValue: light o dark), o emularlo en las herramientas para desarrolladores (Renderizado, prefers-color-scheme).
  2. Localizar el texto que indica el informe y, con el selector de color de las herramientas para desarrolladores del navegador o una calculadora de contraste con colores tomados con un cuentagotas, medirlo frente al fondo que tiene detrás.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. En ese esquema de color la relación alcanza el umbral.

No se cumple. En ese esquema de color la relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

ELEMENT_OPACITY

  1. Localizar el texto que indica el informe y anotar la opacidad inferior a 1 de su elemento.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el texto y el fondo tal como se ven en pantalla (atenuados), con un cuentagotas sobre la página representada.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Los colores atenuados en pantalla alcanzan el umbral, o el texto atenuado es un control inactivo (deshabilitado), que está exento.

No se cumple. Los colores atenuados en pantalla dan una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6), salvo que el texto forme parte de un control inactivo.

ENGINE_EXCEPTION

  1. Localizar el texto que indica el informe (la comprobación se detuvo antes de tiempo, así que no se midió nada).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente al fondo situado justo detrás de las letras.
  3. Anotar el tamaño y el grosor del texto para saber si cuenta como texto grande (al menos 24px, o 18.66px y en negrita).
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. La relación alcanza el umbral correspondiente a su tamaño.

No se cumple. La relación es inferior al umbral correspondiente a su tamaño, lo que incumple WCAG 1.4.3 (o 1.4.6).

FOREGROUND_UNPARSABLE

  1. Localizar el texto que indica el informe e inspeccionar su valor de color en las herramientas para desarrolladores (a menudo con una sintaxis más reciente, como oklch(), lab() o color()).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto tal como se representa frente a su fondo.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. La relación alcanza el umbral.

No se cumple. La relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

GENERATED_TEXT_POSITIONED

  1. Localizar el elemento que indica el informe y buscar el texto que su ::before o ::after dibuja en pantalla (está posicionado lejos de su elemento).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color de ese texto frente a lo que se vea detrás de él en su posición real.
  3. Cambiar el tamaño de la ventana y desplazarse para comprobar otras posiciones en las que pueda quedar sobre otro fondo.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Quede donde quede, el texto generado alcanza el umbral.

No se cumple. Donde queda el texto generado, la relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

GENERATED_TEXT_UNREADABLE

  1. Localizar el elemento que indica el informe y observar el texto que dibuja su ::before, ::after o marcador de lista (un número, una viñeta o una etiqueta).
  2. Decidir si es texto que hay que leer (un número, una palabra o una etiqueta) o una forma puramente decorativa.
  3. Si es texto, medir su color frente al fondo que tiene detrás con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. El texto generado alcanza el umbral, o es puramente decorativo.

No se cumple. El texto generado es contenido legible y su relación es inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

MIX_BLEND_MODE

  1. Localizar el texto que indica el informe y anotar el mix-blend-mode que tiene él o su contenedor.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir los colores fusionados del texto y del fondo tal como se ven en pantalla, con un cuentagotas sobre la página representada.
  3. Si detrás puede quedar contenido distinto (desplazamiento, carruseles), comprobar el peor caso.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Los colores fusionados en pantalla alcanzan el umbral.

No se cumple. Los colores fusionados en pantalla dan una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

PSEUDO_ELEMENT_COLOR

  1. Localizar el texto que indica el informe y anotar el color de ::first-line o ::first-letter en el panel Styles.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir frente al fondo tanto el color del texto del elemento como el color de la primera línea o de la primera letra.
  3. Cambiar el tamaño de la ventana para ver que el color de la primera línea se aplica a palabras distintas con anchos distintos.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Ambos colores alcanzan el umbral.

No se cumple. Alguno de los colores da una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

SELECT_OPTION_COLOR

  1. Localizar la lista desplegable que indica el informe y abrirla con el ratón y con Alt+Flecha abajo.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el texto de cada opción frente a su fondo en la lista abierta, incluida la opción resaltada, en cada navegador que admite la página.
  3. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. Todas las opciones de la lista abierta alcanzan el umbral.

No se cumple. Una opción de la lista abierta da una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

TEXT_SHADOW

  1. Localizar el texto que indica el informe y anotar su text-shadow.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color de relleno del texto frente al fondo.
  3. Si el relleno no alcanza el umbral, ampliar y comprobar si la sombra forma un contorno o halo sólido alrededor de cada letra; si es así, medir el color de la sombra frente al fondo y el relleno frente a la sombra.
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. El relleno alcanza el umbral frente al fondo, o un halo sólido rodea cada letra y da la relación del umbral.

No se cumple. Ni el relleno frente al fondo ni un halo sólido alrededor de las letras alcanzan el umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

TEXT_STROKE

  1. Localizar el texto que indica el informe y anotar el ancho y el color de su -webkit-text-stroke.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color de relleno frente al fondo, y el color del trazo frente al fondo.
  3. Ampliar para ver qué color forma la mayor parte de cada letra (un trazo fino cuenta menos que el relleno).
  4. Comparar la relación con 4.5:1 (3:1 para texto grande) para el contraste mínimo, y con 7:1 (4.5:1 para texto grande) para el contraste mejorado.

Se cumple. El relleno y el trazo alcanzan ambos el umbral, o lo alcanza el color que claramente forma las letras.

No se cumple. El color que forma las letras da una relación inferior al umbral, lo que incumple WCAG 1.4.3 (o 1.4.6).

Ver código fuente