Mejora de Accesibilidad Web con CSS: Contraste y Colores

Clase 22 de 35 • Curso de Accesibilidad Web

Resumen

El contraste de color es la diferencia existente entre dos o más colores que interactúan en un diseño de forma que afectan al modo en el cual se percibe. El color según sus diferentes características influye en el efecto que causa en las personas.

Características del contraste de color

Los contrastes de color se refieren a la diferencia del color de fondo y color del texto.
Normalmente es tarea del diseñador encargarse de este aspecto, pero como desarrolladores podemos encargarnos de detectar problemas de contraste para posteriormente comunicar el problema.
Si el contraste es muy bajo no se puede ver el texto correctamente.
Podemos usar Chrome Dev Tools para revisar el contraste de los colores de los textos.
Nos indicaran a que nivel de WCAG estaremos llegando.

Conclusión

El contraste de color es importante para llegar a más personas, se trata de la diferencia del color de fondo y del color del texto. Podemos usar las Chrome Dev Tools para verificar este aspecto

Conoce qué significa constraste.

José María Cuevas Ramírez

student•

Chrome no deja de sorprenderme con todas las herramientas que incluye y pasaba por alto 🤯

Rodrigo D’Agostino

student•

Y espera a que pruebes Firefox ;)

Alex Leonardo Rodriguez Carvajal

student•

Pienso lo mismo!

Tomas Di Mauro

student•

Dejo un programa muy util para seleccionar colores de la pantalla, crear paletas con ellos y de paso tambien podés ver el contraste entre dos colores: Swach.io

Jesús alfaro

student•

Gracias!

Gonzalo Blasco

student•

No me gusta usar etiquetas <p class="form-label"> cuando se podría utilizar un <label>... No es semántico eso...

Emilia Cabral Benitez

student•

Seguramente habrá sido un error

Adrián Benavente

student•

Claro. Pero en este caso ya tenés el aria-label, por lo que no es necesaria la etiquta label ya que sería redundante. O en todo caso deberías borrar el atributo aria-label si vas a hacer eso.

Juan Jiménez

student•

Guau, tanto tiempo usando el selector de color y no me había percatado de que te indicaba el contraste 😪

Tomás Felipe Beltrán Pulido

student•

Fernando Quinteros Gutierrez

student•

🎴 Contrastes de color

Ideas/conceptos claves

El contraste de color es la diferencia existente entre dos o más colores que interactúan en un diseño de forma que afectan al modo en el cual se percibe. El color según sus diferentes características influye en el efecto que causa en las personas

Apuntes

Los contrastes de color se refieren a la diferencia del color de fondo y color del texto
Normalmente es tarea del diseñador encargarse de este aspecto, pero como desarrolladores podemos encargarnos de detectar problemas de contraste para posteriormente comunicar el problema
Si el contraste es muy bajo no se puede ver el texto correctamente
Podemos usar Chrome Dev Tools para revisar el contraste de los colores de los textos
- Nos indicaran a que nivel de WCAG estaremos llegando

RESUMEN: El contraste de color es importante para llegar a más personas, se trata de la diferencia del color de fondo y del color del texto. Podemos usar las Chrome Dev Tools para verificar este aspecto

Cristian Diaz

student•

Hablando de HTML semántico ¿No sería directamente mejor agregar los labels de estos inputs en la etiqueta de label?

Beto Toro

student•

En el curso de DevTools nos enseñan todos esto trucazos 😁

Y yo les dejo una herramienta extra para que puedan jugar con su paleta de colores cuando estén haciendo sus proyectos llink: https://material.io/resources/color/#!/?view.left=1&view.right=0

Christian Velázquez

student•

Estoy desarrollando un portafolio propio, para desarrollar todo lo aprendido. Poco a poco voy agregando lo aprendido en el curso. Les comparto el link: https://github.com/Christiano0407/Portfolios

Karla

student•

Que interesante. No conocía esa herramienta de Chrome Dev Tools 😧

Sergio Alejandro Trejo Cuxim

student•

¿Siempre tengo que considerar que ambos niveles tanto el 4.5 como el 7.0 sean adecuadas o solo aplica para otras reglas? Es decir, veo que tienen ciertas aplicaciones el AA y AAA, en cuando tamaños de fuente, pero no me queda claro que si debo considerar para "considerar" todo dentro de lo legal.

Gracias.

Sergio Alejandro Trejo Cuxim

student•

Ya, lo "legal" es AA y 4.5.1, inclusive el Gov de USA, trabaja aún en la versión AAA, por que requiere "inversión y muchos ajustes".

Rubén Vega

student•

Les recomiendo echarle un vistazo al curso de teoría del color y al de figma, muy util. De hecho, antes de programar se realiza todo el proceso de validación de idea de negocio, validación de idea de producto, prototipados de baja fidelidad y UX testings, prototipado y finalmente ya la programación

Aracely Alba

student•

<p class="form-label">Nombre</p>

Esto no lo veo muy conveniente, para eso están los labels. Ahí no está cumpliendo con el HTML semántico.

Irving Juárez

student•

Cierto, es mejor una etiqueta <label>

Yulieth Lubo

student•

Me parece muy interesante como podemos apreciar si cumplimos o no con esos Principios de WCAG, específicamente la del contraste con el fondo y las letras a través de Chrome DevTools

Juliana Gomez

teacher•

Siiii esa herramienta ya se esta implementando en mucho navegadores. Firefox tambien la tiene

JHON SEBASTIAN MARTINEZ SOTO

student•

A veces ignoramos tantas utilidades importantes solo por desconocimiento, estoy fascinado aprendiendo tanto sobre A11Y 🤯

Cristian Diaz

student•

Considero que sería directamente mejor por temas de semántica que en lugar de agregar los labels en una etiqueta de p, sería mejor agregarlo en una etiqueta de label

Emmanuel Jose Lamprea Florez

student•

Ojalá esto también se pueda implementar para las app móvil, ya que ahora se usa mucho más este dispositivo

Jose Ever Muñoz Muñoz

student•

pero en movil no se puede hacer :hover

Rubén Ernesto Aragón Gil

student•

Yo recomiendo agregar un font-weigth de 700 para que se mire mejor:

.nav-item:hover, .nav-item:hover a {
  background-color: var(--verde);
  color: var(--gris-oscuro);
  font-weight: 700;
  cursor: pointer;
}

Usuario anónimo

user•

luimarco daniel Carrascal Diaz

student•

tamalito

Alejandro Palacios Arévalo

student•

no conocía eso de las dev tools con respecto a los colores. buenisimo.