 En la Universidad de la Investigación en temas de visión, hay tracking y percepción del contraste, tema del que nos viene a hablar hoy. Además, se dedica la consultoría y formación en accesibilidad, así como a la divulgación de estos temas en Meetups, Congresos Nacionales o Internacionales. En colaboración con su amigo José Humanes, gestiona el canal de YouTube llamado Equipo AA Digital, donde se abordan cuestiones relacionadas con la accesibilidad digital y diviagan demasiado. Bueno, ustedes, Vicente Sanchis. A ver, me dejo esto aquí. Un momentito, porque Carla me ha enviado un whatsapp y esto tengo que leer algo, no sé qué era. Aviso de la organización. Esta charla puede ser grosera y real, el ponente carece de dotes de modelaje, canto, interpretación. Si permanecen en la sala, no sumimos las consecuencias. Joder, si saben cómo me pongo para que me invitan. Bueno, a ver, hablemos de contraste, ¿os parece? Sí. ¿Empezamos por todo lo alto? Sí. Participad. Y no se confundan, señora y señores, su buen no está ready porque no contrastan esos dos colores. No es sólo una, son tres indicaciones. Y si aún no me creen, pues me toca explicárselo. Los de vídeo, Antexon Notes, que no va a dar tiempo. Aviso. Vale, pero si queréis problemas, escuchad mi lema. No vine aquí para hacer amigos. He venido para espabilaros a nivel de contraste. Y lo repito en inglés, because I'm not here to make friends. He venido a espabilaros, ¿vale? Si os parece bien, bien. Y si no, la queso, la que soporte. Somos visuales y para la visión el contraste es fundamental. Aquí hay un vídeo que no sé si se va a ver, pero bueno, pongo contestó. Agora, Ciudad de les Arts. Aquí delante hay un estanque de dos palmos de agua. Saqué este frame. Un pavimento liso, que bonita la rampa, ¿no? Pues no mis cielas, son escalones. Allí el contraste, sea lo que sea, entre la luz y la sombra, nos permite interpretar el mundo físico. Y de la misma forma que lo que... Perdón, y lo importante para el sistema visual es la información a nivel de luminosidad. El color es solo adorno en estas situaciones. Una mosquita, no sé qué hace ahí. Bueno, pues de la misma forma que para el... Para entender el mundo físico es importante. Percibir el contraste también lo es a la hora de leer en el mundo digital. Porque un texto que no está bien contrastado no se puede leer bien. Y el contraste es una de las medidas de accesibilidad más conocidas. Y estáis aquí es porque ya sabéis algo de qué va el tema. Pero la gente aún me sigue diciendo que el contraste es eso de los colores y se quedan tan panchos. Esta gente es la que piensa en un país multicolor nació una beja bajo el sol y yo siento mucho de estrofar este mundo de fantasía, pero no es exactamente eso. El contraste, lo que sí que es, es una de las medidas más críticas en la fase de diseño. Porque si a la hora de diseñar no se hace una paleta que contraste adecuadamente y después el resto del proyecto va a rastrar ese problema. Y además es el error más frecuente en el top un millón de webs. WebAIM hace un estudio desde 2019 y un 85% de las webs siguen teniendo errores de contraste. Y yo veo eso y qué queréis que os diga. Ay, ay, ay, qué dolor, qué dolor, tanto problema de contraste, qué dolor, qué dolor. A mí me parece esto una soberana caca. ¿De quién es la responsabilidad? Habrá muchas personas y muchos roles, pero hay que reflexionar sobre eso. Pero hablemos de qué es el contraste porque yo estoy asumiendo que lo sabéis y a lo mejor no está claro el todo. Estas dos acepciones de WebAIM me parecen bastante buenas. Relación entre el brillo de las diferentes partes de una imagen o la relación entre la iluminación máxima y mínima de un objeto. Y el manual de accesibilidad de WordPress nos dice que es uno de las cuestiones más importantes que se tienen que solucionar para alcanzar algo que se llama nivel AA de WCAG, que si lo intentas pronunciar, pues, bueno, suena fatal. No se puede. De hecho, las WCAGs son las Web Content Accessibility Guidelines, pero mi amigo José y yo, cuando estamos divagando, hemos cambiado el nombre para pronunciarlas un poquito más fácil, las Wachas. Un poquito más fácil de pronunciar. Pues bien, en estas normas las Wachas sí que hay una norma, la 1-4-3, que nos marca cuál es el contraste mínimo que debe de tener el texto, las imágenes de texto, con la excepción del texto grande, que tendrá un umbral un poquito más bajo, el texto incidental y los logotipos. Texto grande. ¿Qué es, pues, texto de peso normal, tamaño 18 puntos o texto de peso negrita y tamaño 14 puntos? Algo pequeñito, para mí. Esas son las equivalencias en píxeles CSS. Y este es el aspecto que tienen diferentes colores que llegan a esos umbrales de contraste. No sé exactamente cómo lo estáis percibiendo, pero a mí me llama la atención que el rojo parece más oscuro que el resto de colores en la columna. No sé. La siguiente norma, la 1-4-6, de nivel AAA, lo único que hace es subir los umbrales. Es una norma más exigente, tenemos que la norma que deberíamos cumplir de forma voluntaria tiene menos contraste que la norma mejorada, que es la más compleja de cumplir, porque es más exigente. Y aparte tenemos una tercera norma, la 1-4-11, nivel AA, que determina el contraste que deben de tener los elementos gráficos de la UI. Con la excepción de que el componente esté inactivo o que el aspecto del componente venga determinado por parte del navegador. Y en objetos gráficos, cuando ese aspecto sea una parte esencial. Y esto, perdonadme, pero es otra excusa de caca, porque esencial que hace las cosas mal. Esto es un poco lo hacemos, ya vemos y luego podrás decir, estos cuatro iconos cumplen con el mínimo de contraste. ¿De verdad hace falta hacerlo peor aún con menos contraste que eso? Yo creo que no, no lo veo esencial. Y si utilizamos... Uy, este emoticono no salió como yo quería. Si utilizamos gráficos con más colores, todos los colores simultáneamente tienen que contrastar entre ellos. En este caso sería el blanco con el rojo y con el negro simultáneamente. Si lo ponemos con un fondo de color, pues habrá que vigilar que el color del fondo y el color del icono también contrasten. A veces la solución vendrá de poner un borde blanco que no se ve porque está el negro. Fallo mío, lo siento. Tampoco tengo dotes para el diseño gráfico. Estáis pensando todo lo mismo. Esto vibra, ¿verdad? Porque aquí, lo que está llegando al sistema visual básicamente es información de cromaticidad. Si le quito la cromaticidad, es una caca. Al cerebro que le interesa luminosidad, no cromaticidad. Si, en cambio, justo bien los contrastes, oye, ha dejado de vibrar. No es bonito porque lo he hecho yo, pero ha dejado de vibrar. Si le quito el color, se ve bien. Dos contentos, ¿verdad? Ostras. Perdona que... Es que es Carla. No puedo decirle que no la líder. Sí, Carla, sí. Es que estoy en la charla. No, no soy bien. Claro, lo que te dije es que a la señal, esto es como la boda roja. Cerrar las puertas, ponéis a Fernando y a la puerta, y tú dile que aguante el portón. ¡Joldedor! ¡Joldedor! Ya está. Disculpad, ¿por dónde llevamos? Sí, por las neuronas espejo. ¿Vale? Esto es para activar vuestras neuronas espejo. Una carita sonriente, todo sonriendo. No pasa nada, vamos a hacer un poquito de mediación, porque es que viene el momento difícil de la charla. Es como cuando estoy en consulta llega el momento de poner la gota a los niños. Dejamos de ser amigos y aquello es una batalla. Porque vienen las matemáticas. Pero no os asustéis, está la carita. Es muy bonita. Neuronas espejo. Ahora la voy a subir arriba. Neuronas espejo. Yo os guío por todo esto. Vamos a calcular el contraste entre estos dos colores. Un rosa y un blanco puro. El primer paso, hay que hacer eso, dan esos numeritos. No os preocupéis por nada de eso. Segundo paso, normalizar, sea lo que sea, es hacer una división, me da estos numeritos. Tercer paso, boom. No os preocupéis tampoco, lo calcula o yo. Esos numeritos dan estos numeritos. Cuarto paso, calcular la luminación relativa, da ese numerito. Quinto paso, repetimos para el otro color. Como es blanco, su luminancia es relativa es uno. Sexto paso, ordenar los colores por luminancia. El blanco y el rosa. Y el paso siete, calcular la ratio de contraste. Me da 4,99, 29. Para ser más normativo, 2.1. Es una tontería, pero bueno, se expresa así. Todo esto simplemente para razonaros que los valores, si veis todas las ecuaciones con calma, os van a dar resultados que estarán entre 1 y 21. Uno es, no hay contraste, 21 es contraste máximo entre blanco puro y negro puro. Pero, sois afortunados como Melody, porque hay calculadoras de contraste, ya podéis respirar. Sabí la canción de Melody, la calculadora. Si sabes sumar la calculadora, si sabes restar por la calculadora, también sabe calcular contraste sin hacer nada. Hay muchísimas en el mercado, podéis usar la que más os guste. Son todas equivalentes. Pero un tutorial expresa. Ponéis un color y el otro color, da igual el orden. Y os da un numerito. No me he equivocado. 4,99, dan esos dos colores. Pero lo interesante de las calculadoras es que os van a dar una interpretación de los resultados, no os tenéis que saber los valores. Aquí lo que nos dice es que esa combinación me sirve para elementos de la interfaz, para texto grande y para texto normal, solamente en la norma estándar, la norma más exigente, no sería suficiente. Pero tampoco pasa nada. Es una buena elección de colores en este caso. Y podemos invertir el orden. Dan exactamente el mismo valor de contraste. A esto me voy a referir como polaridad del contraste, el orden que tengan. ¿No queréis usar calculadoras? Vamos a WordPress. Meto un h2. Quiero cambiarle el color de texto y de fondo. Me defino este maravilloso rosa caca, porque su código hexadecimal es ffcaca. Y WordPress se da cuenta de que si calcula el contraste está por debajo de la norma y nos lanza aquella ventanita avisándonos de que esta combinación de colores puede ser difícil de leer. Pruebo usar un color de fondo más luminoso o un color de texto más oscuro. Por cierto, ese amarillito no contrasta. Es verdad, ¿eh? Pero todo esto está mal. Y diréis, ¿Joder, we send really? ¿12 minutos para esto? Pues sí, surprise, surprise. Experimentemos. Un momentito que tengo mi atrecho. Un momentito podré desabrochar los botones. Moriré en el intento. Hagan sus apuestas. Tabatas de verdad, ¿eh? La que usaba yo en la facultad cuando hacía las prácticas. Bueno, vamos a hacer unos experimentos perceptuales. Un texto de ejemplo no tiene más importancia. Si le pongo color azul. Bueno, se ve, ¿eh? Si le invierto la polaridad. Se ve, ¿eh? Si probo con el negro. Bueno, no se ve tanto. Si le invierto la polaridad. Los pongo todos juntos. ¿Cuál de las cuatro combinaciones veis mejor? Se lee mejor. En mi monitor, en mi casa, la de arriba a la derecha. Ahora probamos con el naranja. Las mismas combinaciones. ¿Cuál veis mejor? En mi monitor, en mi casa, la de arriba a la derecha. Y en este, pues casi que también. Me voy a la calculadora. ¿Qué combinación estaba viendo yo mejor? ¿Y cuáles son las que no cumplen con el contraste? Las combinaciones con blanco. 7.7.1. Naranja con fondo negro. Los diseñadores de la teleoperadora dijeron, esto contrasta. Vamos a ponerlo. Pues, es una caca también. ¿Qué está pasando? El numerito no coincide con vuestra percepción. Algo tiene que estar pasando. A ver, ahora no es por fardar, pero yo tengo el teléfono de la WhatsApp. No queremos etiquetar la relación, pero hay cierta confianza. Entonces, voy a preguntarle. ¿Lo habéis visto? Ya lo veis, la vida es así. Tú te vas y yo me quedo aquí. Yo verá y ya no seré tuya. Seré la gata bajo la lluvia y mao, qué mierda, mao. ¿No? ¿Pas fuera lo malo? Yo no quiero nada malo. ¿No? Hashtag, pa malo yo. Como ahora ya no hay confianza, voy a alargar los problemas que tiene esta tipa. Como sé que os gusta el chismorreo, un chismecito, pero de aquí que no salga. Problemas que estamos evaluando el contraste relativo, que es un mal sucedanio del contraste real. En aquel momento os pongo contexto. Ciencia ochentera, hace un estándar como puedas y después apañatelas. Eligieron de todas las opciones la menos mala. Y más o menos servía palgo, pero a día de hoy se ha quedado muy corto. ¿Por qué? Porque si nos vamos a un laboratorio donde yo hice el doctorao, imaginados una habitación interior sin ventilación, sin ventanas, completamente a oscuridad para hacer los experimentos bien. Tenemos un voluntario engañado. Yo les engañaba, los sentaba allí, les ataba a la cabeza la mentonera, porque tenía que ser así el experimento, les ponía un monitor con un estímulo y controlaba la iluminación. El algoritmo actual deja toda la responsabilidad del contraste a esos dos colores. Entira, algo huele mal, ya apareció la mosca. Deja toda la responsabilidad a los códigos de esos colores. Y ya sabéis que este dispositivo se ve de una manera. ¿Cómo vas a asumir eso? Realmente tendremos una iluminación natural o artificial. Esa iluminación está afectando al sistema visual del sujeto que se va a adaptar a él y se va a reflejar en el dispositivo. O sea, que de forma real deberíamos demedir la luz que le llega de cada uno de los colores y la luz que está en la sala, lo que está participando también en esa situación de visualización. Claro, evidentemente esto representa un problema práctico y es que no podemos coger un fotómetro luminancímetro e ir a cada uno de los usuarios a medir cada vez el contraste. No se puede, yo lo entiendo. Y otro problema práctico y es que nos estamos olvidando convenientemente del sistema visual. Por cierto, el sistema visual empieza aquí en el ojo y acaba aquí en el cogote. Y en todo ese camino pueden pasar muchas cosas y todas esas cosas se han estudiado en Ciencias de la Visión y conocemos una serie de factores que van a influir en la percepción. Algunos relacionados con el estímulo, otros relacionados con el sujeto. No son importantes esos factores pero bueno, yo los pongo porque existen. Con todo eso sacamos una herramienta que se llama la función de sensibilidad al contraste en una forma tal que así. Eje vertical, sensibilidad para arriba. Cuanto más sensibles menos contraste necesitamos para ver esa cosa. Que es lo que vamos a ver, algo que llamamos frecuencia. Que tiene que ver con el tamaño del detalle. Cuanto más a la derecha, más pequeñito es ese tamaño. Y esto divide lo que es visible de lo que es invisible al sistema visual y es lo que justifica porque en la norma tenemos un nivel de contraste para texto normal y un nivel de contraste para texto grande. Y también justifica porque el texto grande es con peso normal 18 puntos con negrita 14 puntos porque el tamaño del detalle varía. Afortunadamente para las futuras huachas se está trabajando en APCA. APCA es Accessible Perceptual Contrast Algorithm. Que nuevamente José y yo encontramos que APCA es un poquito difícil de pronunciar y le llamamos la PACA. La PACA o PACITAS y soy fan de los Javies pues PACITA. Hay PACITA. Señora niña bonita. APCA calcula otro valor LC, que en este caso es perceptualmente uniforme. Eso significa que nos permite predecir el contraste que vamos a percibir a partir de ese cálculo. Y en este caso la polaridad el orden de los colores como los posiciones sí que va a influir en el valor de ese contraste. Se han definido unos umbrales y unos usos recomendados. No es importante porque tenemos una calculadora, la calculadora APCA que sigue la filosofía antes muerta que sencilla. Aquí hay demasiadas cosas. Deja que me quite la bata, que esto juro que no me iba a poner nunca más una bata de laboratorio y me la vuelto a poner. Como todas las calculadoras color de texto o del icono color del fondo da aquí un valor. Eso es lo importante. ¿Tenéis que saberlo? No, no tenéis que saberlo. Porque aquí abajo os dice para qué se recomienda esa combinación. ¿Qué uso recomendado tenéis en esa combinación? Cambiar la polaridad afecta al valor de contraste. El menos no es importante. Tenéis que verlo en valor absoluto. 74 es mayor que 69. Aquella combinación tiene más contraste que esta. Si vuelvo a calcular los contrastes del experimento vemos que las combinaciones que se daban por buenas en la rama 2 de las huachas no son tan buenas, las buenas son las de arriba. La combinación de texto blanco con ese azul de fondo es la que a priori mejor se ve. Y una cosa súper guay porque todo el mundo me pregunta ¿Acesibilidad? Dime el tamaño del texto. No tiene nada que ver la accesibilidad con el tamaño del texto. La gente lo convierte, lo escala el tamaño que necesita, pero ahora ya tenéis una referencia. Aquí tenéis pesos 200, 300, 400, 500, 600, 700. Para cada peso os va a recomendar un tamaño en píxel CSS para la fuente. Pero, ojo, porque eso se ha hecho para gelbética. Si no usáis gelbética tenéis que hacer una comparación a ojo. Os ponéis si no tenéis gelbética porque no tenéis un Mac. Arial le pones el tamaño. Te pones tu fuente al lado. Comparas y la haces un poquito más grande o más pequeña o gímetro. Y el problema es que la huacha es como un ex tóxico que viene y tiene que dar por el saco. ¿Qué hacemos aquí? Algo vuelve a oler mal. Si tienes obligación legal tienes que cumplir con WCAG 2.1 por narices. Pero mi recomendación es que filtréis los resultados de la PACA con los de la huacha. Tal que así. La combinación la descartas. Te dice que es buena. Te tapa la nariz, te vas a la huacha. Ya llegó la mosca otra vez. La huacha te dice que es mala, pues se siente. La descartas. Te dice que es buena. Nos cargamos la mosca. Y puedes usar esta combinación con el tamaño que te recomienda PACA. De esta forma estaréis generando paletas que cumplen con la norma de hoy en día y cumplirán con la norma del futuro. Future proof. Si no queréis ir a las dos hay una versión de PACA que te da los dos valores simultáneamente. Bien. ¿Y quién se beneficia de todo esto? Todo el mundo. No solamente las personas con problemas de visión ya sea por motivos refractivos, por motivos de vacidades de medios oculares por patologías o por alteraciones de la visión del color. Sino que vosotros también, porque cada vez que le pasa algo al ojo se reduce la sensibilidad al contraste. Así que como os pasáis muchísimas horas delante de las pantallas recordados que hay que hidratar periódicamente los ojitos para mantenerlos en las máximas condiciones de salud y de calidad visual. Muchísimas gracias. Soy un intento de Mocatriz como habéis visto, consultor de accesibilidad digital, doctor en automotría, ciencias de la visión, embajador de Rayola, a quienes agradezco su apoyo para poder venir a esta Huarca Ambados La Charla. Me podéis encontrar en Twitter y en redes como VisanQ, mi página web, VisitSanchez.com y en Accessijá.es, que es la comunidad de accesibilidad digital. Gracias. Bueno, creo que da tiempo para algunas preguntas. Sí, porque clavó el tiempo, no confiaba yo. Bueno, tiene tiempo. No sé quién tiene preguntas, levanta la mano y el micrófono. Hola, muchas gracias, muy interesante. ¿El filtro de luz azul en la pantalla o en la gafas? Voy a responder aunque la pregunta no es de la charla. El filtro de luz azul en ningún lado. Eso es tontería. Ya que me habéis tirado de la lengua. Cuando os quieran vender algo en base al miedo, desconfiad. Son asustas viejas. La luz azul no está aceptado que genere ningún problema. Hay estudios que tienen problemas en el diseño del estudio que sí te dicen, si yo achicharro las neuronas con esto, se mueren. Pero in vivo no hay una diferencia significativa. No está aceptado. Sí que lo que puede pasar es que altera los ritmos circadianos. A la hora de irnos a dormir es conveniente que la iluminación sea más cálida, pero porque es algo que evolutivamente estamos acostumbrados a ello. La luz solar cambia el color a lo largo del día. En el final del día es cálida. Simplemente eso. ¿Alguna pregunta más? Sí. Te quería preguntar, a la hora de hacer la calculada del contraste en cuanto al fondo es un degradado. En cuanto al fondo es un degradado tienes varias opciones de hacerlo. Puedes hacerlo a mano sacando muestras, pero el otro día me di cuenta, porque hice una captura para Work on Sevilla, tenéis la charla que Firefox ha empezado a calcularlo. No sé cuándo lo metieron, pero me salió un rango de... había un degradado y hizo el cálculo y estaba bien. Pero si es un degradado entre dos colores parecidos, si hay más variaciones toma pequeñas muestras y comprébalo. Ya es ahora la última pregunta y bueno, de parte de la organización tenemos un presente para Vicente. Gracias. Y un aplauso para él.