Contenido del curso
Mejora de Accesibilidad Web con CSS: Contraste y Colores
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
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
José María Cuevas Ramírez
Estudiante
Rodrigo D’Agostino
Estudiante
Alex Leonardo Rodriguez Carvajal
Estudiante
Tomas Di Mauro
Estudiante
Jesús alfaro
Estudiante
Gonzalo Blasco
Estudiante
Emilia Cabral Benitez
Estudiante
Adrián Benavente
Estudiante
Juan Jiménez
Estudiante
Tomás Felipe Beltrán Pulido
Estudiante
Fernando Quinteros Gutierrez
Estudiante
Cristian Diaz
Estudiante
Beto Toro
Estudiante
Christian Velázquez
Estudiante
Karla
Estudiante
Usuario anónimo
User
Sergio Alejandro Trejo Cuxim
EstudianteSergio Alejandro Trejo Cuxim
Estudiante
Rubén Vega
Estudiante
Aracely Alba
Estudiante
Irving Juárez
Estudiante
Yulieth Lubo
Estudiante
Juliana Gomez
ProfesorUsuario anónimo
User
JHON SEBASTIAN MARTINEZ SOTO
EstudianteCristian Diaz
Estudiante
Emmanuel Jose Lamprea Florez
Estudiante
Jose Ever Muñoz Muñoz
Estudiante
Rubén Ernesto Aragón Gil
Estudiante
luimarco daniel Carrascal Diaz
EstudianteChrome no deja de sorprenderme con todas las herramientas que incluye y pasaba por alto 🤯
Y espera a que pruebes Firefox ;)
Pienso lo mismo!
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:
Gracias!
No me gusta usar etiquetas <p class="form-label"> cuando se podría utilizar un <label>... No es semántico eso...
Seguramente habrá sido un error
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.
Guau, tanto tiempo usando el selector de color y no me había percatado de que te indicaba el contraste 😪
x2
🎴 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
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
Hablando de HTML semántico ¿No sería directamente mejor agregar los labels de estos inputs en la etiqueta de label?
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
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
Que interesante. No conocía esa herramienta de Chrome Dev Tools 😧
¿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.
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".
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
<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.
Cierto, es mejor una etiqueta <label>
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
Siiii esa herramienta ya se esta implementando en mucho navegadores. Firefox tambien la tiene
Aquí estuve organizando un poco mi espacio de trabajo para simplificarlo, siempre hay nuevas cositas que hacer.
A veces ignoramos tantas utilidades importantes solo por desconocimiento, estoy fascinado aprendiendo tanto sobre A11Y 🤯
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
Ojalá esto también se pueda implementar para las app móvil, ya que ahora se usa mucho más este dispositivo
pero en movil no se puede hacer :hover
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; }
tamalito
