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 de WCAG para 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. 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, mix-blend-mode, un filter 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, opacidad de un ancestro, un fondo raíz que nunca llega a ser opaco, o un color que no se puede analizar), 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.

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.

Ver código fuente