Detector Docs

Español

English

Español

English

Appearance

Implementación de Color Contrast ​

En este documento se describe la implementación de la primera parte de Color Contrast, su alcance y sus limitaciones.

Alcance ​

En un primer momento nos centramos en los elementos con texto. Se deben reportar issues de contraste de elementos con texto en sus diferentes estados:

  1. Normal
  2. Activado
  3. On Hover
  4. On Focus

Solamente estamos considerando los estados normal, hover y focus. Para analizar activaciones de controles más complejas necesitamos avanzar en la navegación inteligente de la página.

Ya cubierto ​

Dos casos que estaban fuera de alcance en la primera fase ya se analizan:

  • Fondos que no son un color sólido. Cuando el background es una imagen o un degradado no hay un valor único con el que comparar, así que el elemento se resuelve mediante análisis visual del elemento renderizado en lugar de una comparación simple de colores.
  • Texto dentro de shadow DOM y contenido generado por ::before / ::after. Ambos se detectan y se analizan.

Fuera de Alcance ​

Cuando un fondo se construye con varias capas superpuestas —imagen más overlay más modo de mezcla o filtro, o un fondo fijado al viewport— el elemento se analiza igualmente, pero el color resultante es una aproximación y no un valor exacto. Ver Límites de gradiente.

Implementación ​

Recolección de elementos ​

Lo primero es recopilar todos los elementos con texto de la página. Estos elementos son los que cumplen:

  1. Son visibles
  2. Tienen un texto visible o un placeholder
  3. No son imágenes
  4. Son un control de tipo input, textarea o select; o no tienen hijos a menos que sean nodos de texto puro o de tipo b, strong, etc.

Análisis de elementos ​

A cada elemento seleccionado en el paso anterior se le realiza el análisis del contraste de color.

Cálculo del foreground color ​

El foreground color se obtiene de computar el estilo color.

Cálculo del background color ​

El background color se obtiene en dos pasos:

  1. Background inicial es el background color del primer ancestro que no tenga background color transparente
  2. Mientras la opacidad del background color sea menor que 1, se mezcla el background color actual con el background color del ancestro más cercano con background color no transparente.

El proceso termina cuando obtenemos un BG color con opacidad igual a 1 o cuando ya no hay más ancestros.

Una vez se obtienen los dos colores se calcula la luminosidad de ambos y el contraste de color. Entonces se determina si existe una violación del constraste de color de acuerdo con las reglas establecidas que consideran el tamaño y el peso de la fuente del texto.

Caso Especial: Hover con box-shadow tipo inset ​

En ciertos diseños:

  • El inset box-shadow tiene un spread alto (ej. 20px) y blur grande (ej. 10px).
  • El resultado es que cubre completamente el background, actuando como un fondo sólido.

Comportamiento implementado

Para resolverlo:

  • Cuando se detecta un box-shadow de tipo inset que cubre visualmente el área, el detector: → prioriza el color derivado del box-shadow → en lugar del background tradicional o la imagen.

Esto permite reportar el contraste correctamente incluso cuando el color visible final proviene del shadow.

Limitación

Debido a la variación en:

  • intensidad,
  • blur,
  • spread,
  • composiciones múltiples,

pueden existir pequeñas discrepancias entre el color calculado y el render real del navegador. No obstante, esto permite una representación más fiel que la aproximación previa basada solo en la imagen de fondo.