Problemas de Accesibilidad Web
Me he encontrado con una situación en el modo oscuro de Stack Overflow. Se trata de un problema serio de contraste de acuerdo a la siguiente vista previa:
Es demasiado costoso distinguir el texto del fondo, por lo que se dificulta seriamente la revisión de ediciones sugeridas de otros usuarios, tal y como se puede observar en la siguiente tabla comparativa:
Código fuente del autor | Cambio propuesto por otro usuario |
---|---|
![]() |
![]() |
Se puede observar en la tabla anterior la dificultad que puede provocar la revisión de las ediciones sugeridas debido a problemas de contraste.
Propuesta
Una propuesta de cambio sería:
- Eliminar la línea que atraviesa el código (
text-decoration: line-through;
). - Aumentar la intensidad del rojo y establecer una opacidad adecuada (podría ser 20% de opacidad) para que se pueda visualizar mejor.
Es decir, tal como se ilustraría en la siguiente imagen:
Esto ayudaría a visualizar mejor el código fuente del autor con el propuesto por otro usuario. El objetivo es verificar si hubo simplemente formateo de código o cambios en él con relativa facilidad.
Por lo que nuestra regla CSS podría quedar así:
span.diff-delete {
color: var(--red-700);
background-color: rgba(255, 0, 0, 0.2);
}
Si se considera la propuesta anterior podríamos tener algo parecido a la siguiente tabla comparativa:
Código fuente del autor | Cambio propuesto por otro usuario |
---|---|
![]() |
![]() |
Allí, se puede notar que se hace más fácil comparar código.
Pueden visitar este enlace para que puedan observar el ejemplo mencionado en esta publicación en el modo oscuro.