Contrastes de color

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

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

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

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

🎴 Contrastes de color

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

• 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

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 😧

<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.

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

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

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

No me aparece los datos de contraste

Aquí estuve organizando un poco mi espacio de trabajo para simplificarlo, siempre hay nuevas cositas que hacer.

Avance: https://sergioxarboleda.github.io/portfolio

Jamás habría pensado que el blanco sobre verde tuviera una mala relación de constraste. Supongo que causa problemas para personas con dificultad visual.
.
Muy util esa herramienta de chrome

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;
}

Se ve muy bello el uso de hover para cambiar tanto bgc como color. 😃

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

Tremendas herramientas que no conocía! Súper útiles.

Diría que hay que tener trabajado, aunque sea pensado la guía de estilo (defines un color primario, defines sus ‘shades’ y sus complementarios y de ahí ya no te sales’. Lo mismo con la tipografía y la escabilidad de su tamaño.

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

WOW no conocía nada de estoooo , ¡muy interesante! Gracias Juliana.

Qué interesante. No sabía que dentro del mismo inspector tenemos todas esas opciones.

Sorprendido

Me parece buenísimo que Chrome te permita verificar cómo el cambio en el CSS hace que se cumpla con una calificación de WCAG 👏🏽👏🏽

Chrome Dev Tools cuenta con una herramienta que nos dice si cumplimos con las reglas del contraste 😳😳

Hay un curso de Debugging con Chrome Dev Tools
Pero, con lo que he visto, creo que amerita un curso entero para conocer de arriba a abajo toda la herramienta, tiene un montón de utilidades!

Solo agregando esto al CSS se consigue:

.form-container {
  color: var(--blanco);
}```

Listo! en CSS:

footer label {
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
}

Y en la clase .send-button modifique el color dado que no cumple con los niveles por negro:

color: var(--gris-oscuro);

Cada día me encanta más Chrome DevTools con tantas herramientas que tiene 🤩🤩🤩🤩

DevTools ! Algo nuevo en el contraste de colores para verificar el WCAG. Genial.

Increíble esta herramienta que permite medir el contraste y validar si es el indicado, Chrome lo tiene todo.

Increíble

Recomendadisimo el curso de Chrome DevTools muestran todas las herramientas del navegador que podemos utilizar https://platzi.com/clases/devtools/

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

.form-container .form-label {
  color:var(--blanco);
}

👌

que seca! no me sabia esa parte