Otras ocurrencias — Contraste de color en texto
Cuando el mismo problema de contraste de texto aparece muchas veces en una página, el reporte publica un hallazgo representativo y lista el resto debajo como otras ocurrencias. Esta página explica qué tiene que coincidir para que dos hallazgos se traten como el mismo problema.
Qué hace que dos hallazgos sean el mismo
Cada hallazgo de contraste de color se archiva bajo una clave formada por exactamente tres cosas:
- la familia de color del primer plano (el texto),
- la familia de color del fondo,
- la categoría de tamaño del texto, que es Normal o Grande.
El primer plano y el fondo no se comparan por su valor hexadecimal exacto. Cada uno se clasifica en una familia de color normalizada (ver la tabla más abajo). Dos colores de la misma familia se consideran equivalentes a efectos de agrupación.
Si alguno de esos tres valores difiere, es un problema distinto y le corresponde su propio grupo.
Los dos colores
Ambos colores se leen del elemento tal como el navegador lo dibuja finalmente, y se reescriben en una única notación estándar antes de usarse. Así, rgb(255,255,255), #FFF y #ffffff se resuelven al mismo valor y se reconocen correctamente como idénticos. La transparencia se descarta: no es un factor de diferenciación para agrupar.
La categoría de tamaño del texto
Cada elemento se clasifica usando los umbrales de WCAG:
- Grande: 18pt (24px) o más con cualquier grosor, o 14pt (18.67px) o más en negrita (peso 700 o superior).
- Normal: todo lo demás.
Dos elementos con el mismo par de colores pero distinta categoría de tamaño no se agrupan juntos, porque se les exigen requisitos de contraste diferentes: 4.5:1 para texto normal, 3:1 para texto grande.
Dónde encajan hover y focus
Los estados de interacción —normal, hover y focus— no forman parte de la clave de agrupación. Se resuelven antes de que la agrupación ocurra:
- Para cada elemento, la herramienta comprueba si pasar el cursor o enfocar cambia sus colores respecto al estado por defecto.
- Si un estado introduce una combinación de colores distinta, se convierte en un hallazgo propio, con su propia clave de primer plano, fondo y tamaño — que puede coincidir o no con un grupo existente.
- Si hover y focus producen la misma combinación de colores entre sí, o que el estado normal, se fusionan en un solo hallazgo antes de agrupar. Las etiquetas de estado ("on hover", "on focus") se conservan en la descripción del hallazgo, pero no influyen en el grupo al que va a parar.
El resultado práctico: un cambio de estado solo crea un grupo nuevo cuando genuinamente introduce colores nuevos.
Ejemplo. Un enlace cuyo estado normal falla, y cuyos estados hover y focus comparten una misma combinación fallida, produce dos issues: uno para Normal, y un issue agrupado que cubre hover y focus juntos.
Cómo se arma el grupo
Una vez que cada hallazgo tiene su clave:
- El primer hallazgo de una clave dada se convierte en el issue principal. Aporta el título, la descripción y el elemento representativo del reporte.
- Cada hallazgo posterior con la misma clave se adjunta a ese issue principal como una ocurrencia adicional, conservando su propia ubicación en la página y su propia descripción, de modo que cada instancia se puede seguir localizando individualmente.
Las familias de color
Antes de agrupar, cada valor de primer plano y de fondo se convierte a tono, saturación y luminosidad, y se clasifica en una de estas 12 familias. Dos valores hexadecimales distintos que caen en la misma familia se consideran equivalentes.
| Familia | Rango de tono | Saturación | Luminosidad | Ejemplos representativos |
|---|---|---|---|---|
| negro | cualquiera | cualquiera | < 0.12 | #000000, #1a1a1a |
| blanco | cualquiera | cualquiera | > 0.90 | #ffffff, #f5f5f5 |
| gris | cualquiera | < 0.12 | 0.12 – 0.90 | #808080, #a0a0a0, #555555 |
| marrón | 10 – 45° | ≥ 0.12 | 0.12 – 0.42 (*) | #8b4513, #a0522d |
| rojo | 0 – 10° y 345 – 360° | ≥ 0.12 | 0.12 – 0.90 | #ff0000, #cc3333, #e60026 |
| naranja | 10 – 45° | ≥ 0.12 | 0.42 – 0.90 | #ff8c00, #e67e22, #f39c12 |
| amarillo | 45 – 70° | ≥ 0.12 | 0.12 – 0.90 | #ffff00, #ffd700, #f1c40f |
| verde | 70 – 165° | ≥ 0.12 | 0.12 – 0.90 | #00ff00, #2ecc71, #228b22 |
| cian | 165 – 195° | ≥ 0.12 | 0.12 – 0.90 | #00ffff, #00ced1, #20b2aa |
| azul | 195 – 265° | ≥ 0.12 | 0.12 – 0.90 | #0000ff, #3498db, #1e90ff |
| morado | 265 – 310° | ≥ 0.12 | 0.12 – 0.90 | #800080, #9b59b6, #8e44ad |
| rosa | 310 – 345° | ≥ 0.12 | 0.12 – 0.90 | #ff69b4, #e91e90, #ff1493 |
(*) El marrón comparte rango de tono con el naranja (10–45°) y se distingue por su baja luminosidad. Por debajo de 0.42 es marrón; en 0.42 o por encima es naranja.
Orden de evaluación
- Luminosidad extrema: por debajo de 0.12 → negro. Por encima de 0.90 → blanco.
- Saturación baja: por debajo de 0.12 → gris.
- Marrón frente a naranja: tono 10–45° con luminosidad por debajo de 0.42 → marrón; 0.42 o más → naranja.
- Todo lo demás: la familia se asigna según los rangos de tono de la tabla.
Por qué esto importa
Con esta normalización, la clave de agrupación pasa de exigir una coincidencia exacta de color a exigir una coincidencia de familia. Los elementos con colores visualmente parecidos pero escritos con valores hexadecimales ligeramente distintos —#cc3333 y #e60026, ambos rojos— se agrupan en el mismo issue en lugar de producir dos hallazgos casi idénticos.