Simulador de visión
Escribe la dirección de una página y mírala con ocho tipos de visión, con la página sin filtro al lado. Los enlaces, las alertas y los gráficos que dependen solo del color se detectan fácilmente.
Tres sensores y qué pasa cuando falta uno
Tu retina mide el color con tres tipos de conos, cada uno más sensible a una banda distinta de luz: longitudes de onda largas (rojo), medias (verde) y cortas (azul). El cerebro deduce un color comparando las tres señales. Si un tipo falta o está desplazado, algunas de esas comparaciones ya no se pueden hacer, y los colores que solo difieren en ese eje acaban pareciendo iguales.
Los genes de los conos rojo y verde están en el cromosoma X, por eso alrededor de 1 hombre de cada 12 tiene alguna forma de deficiencia rojo-verde, frente a más o menos 1 mujer de cada 200. La mayoría tiene un cono debilitado, no ausente. Lo que ven queda entre la visión normal y la simulación completa que se muestra aquí.
Las ocho vistas
| Vista | Qué modela | Qué suele fallar |
|---|---|---|
| Visión normal | La referencia, sin filtros | |
| Deuteranopía | Sin conos verdes funcionales; con las formas más leves, cerca del 6% de los hombres | Los colores de estado rojo y verde, el naranja junto al verde |
| Protanopía | Sin conos rojos funcionales; cerca del 2% de los hombres con las formas más leves | El texto rojo sobre fondos oscuros, que se vuelve casi negro |
| Tritanopía | Sin conos azules funcionales; menos de 1 persona de cada 10 000 | El azul contra el verde, el amarillo contra el rosa |
| Acromatopsia | Solo brillo. También una página en un lector de libros electrónicos monocromo o en una impresión en blanco y negro | Todo significado transmitido por el tono |
| Baja visión | Nitidez reducida, como leer sin tus gafas | El texto pequeño, las fuentes finas, los iconos sin etiqueta |
| Cataratas | Un cristalino opaco y amarillento, frecuente después de los 60 | El texto gris claro, los enlaces azul claro |
| Pantalla al sol | Un móvil al aire libre a mediodía | Todo lo que tiene un contraste modesto |
Las tres vistas de daltonismo usan las matrices de transformación publicadas por Machado, Oliveira y Fernandes en 2009, con la máxima intensidad, aplicadas en RGB lineal para que el brillo se mantenga fiel. Las demás vistas se construyen con filtros CSS: escala de grises para la acromatopsia, un desenfoque de 2,5 píxeles para la baja visión, desenfoque con un tinte sepia y contraste reducido para las cataratas, y un contraste muy reducido con más brillo para la luz del sol.
Una revisión de cinco minutos
- Deuteranopía, primero los enlaces. Busca los enlaces dentro de un párrafo. Si ya no los distingues del texto que los rodea, añade un subrayado.
- Deuteranopía, luego los estados. Mira los errores de formulario, las etiquetas de existencias, los puntos de “en línea” y las leyendas de los gráficos. Un mensaje rojo y uno verde también deberían diferir por un icono o una palabra.
- Acromatopsia. Comprueba que el botón principal siga destacando frente al secundario. Si ambos se vuelven del mismo gris, el tono era lo único que los diferenciaba.
- Baja visión. Aún deberías poder encontrar el encabezado, la navegación y la acción principal por su forma y su posición.
- Sol, en ancho de móvil. El texto que desaparece aquí es el que hay que oscurecer primero. Mídelo en la calculadora de relación de contraste.
WCAG pone la regla detrás de todo esto en el criterio de éxito 1.4.1: el color no debe ser el único medio visual para transmitir información.
Cómo se hace la vista previa y sus límites
Nuestro servidor descarga el HTML (hasta 2,5 MB), elimina todos los scripts, marcos y controladores de eventos, y envía el resultado a tu navegador, que lo muestra en un marco aislado. El marco no puede ejecutar código ni enviar formularios. Sus imágenes, fuentes y hojas de estilo las pide tu navegador directamente al sitio original.
Eso tiene dos efectos secundarios. El contenido que un sitio construye con JavaScript, como carruseles, secciones de carga diferida o aplicaciones de una sola página enteras, puede faltar o verse inacabado. Y algunas fuentes web se niegan a cargarse fuera de su propio dominio, así que la tipografía puede diferir de la de la página real.
Una simulación es una aproximación, mostrada en tu pantalla a tus propios ojos. Sirve para revelar dónde un diseño depende del color. No puede decirte qué percibe una persona concreta. La opinión de personas con una deficiencia de la visión del color o con baja visión vale más que cualquier filtro.
Preguntas frecuentes
¿Cuál es el tipo de daltonismo más común?
La deuteranomalía, una respuesta debilitada de los conos verdes. Junto con la deuteranopía, su forma completa, afecta a cerca del 6% de los hombres. Por eso esta herramienta se abre con la vista de deuteranopía.
¿Las personas daltónicas ven en blanco y negro?
Casi nunca. La ausencia total de visión del color (acromatopsia) afecta a más o menos 1 persona de cada 30 000. La mayoría de las personas con una deficiencia ven muchos colores y confunden pares concretos, casi siempre en el eje rojo-verde.
¿Qué colores se pueden usar juntos sin problema?
Los pares que difieren claramente en luminosidad se mantienen distintos con todos los filtros, por ejemplo el azul oscuro con amarillo o naranja. El rojo con el verde, el verde con el marrón y el azul con el morado son las combinaciones que conviene evitar cuando los dos colores significan cosas distintas.
¿Por qué mi página se ve rota en la vista previa?
La vista previa funciona sin JavaScript. Si el diseño, el menú o el contenido dependen de scripts, esas partes faltarán. Los filtros se siguen aplicando correctamente a lo que sí se muestra.
¿Puedo probar una página que exige iniciar sesión?
No. Nuestro servidor pide la página como visitante anónimo y no tiene acceso a tu sesión, así que solo obtiene la pantalla de acceso. Para páginas protegidas por un inicio de sesión, usa la emulación de deficiencias visuales integrada en las herramientas de desarrollo de Chrome o Firefox.