En el Centro Virtual de Marca e Identidad UTP encuentras los lineamientos de la imagen institucional: el logo, los identificadores de cada dependencia y los colores asignados a cada área, con sus códigos. Usar esos colores fortalece nuestra identidad, pero también es importante combinarlos bien para que el contenido se lea con claridad.
Un color que se ve bien en tu monitor puede ser difícil de leer en el celular, bajo el sol o en un proyector. Por eso es mejor medir el contraste que confiar en el ojo.
Cómo usar Contrast Checker
Contrast Checker es una herramienta gratuita de WebAIM permite validar la accesibilidad del color en la Web.
- En Foreground, escribe el código del color del texto por ejemplo 003D6D para el azul institucional, o utiliza la opción Color Picker.
- En Background, escribe el código del color de fondo por ejemplo FFFFFF para blanco, o utiliza la opción Color Picker.
- Revisa si el resultado de la casilla Contrast Ratio es de al menos 4.5:1; la meta es 7:1 para una mejor lectura.
- Finalmente verifica que el resultado de la selección de colores indique Pass (cumple) en todas las pruebas del listado WCAG.
Si no cumple, cambia la combinación, recuerda que el manual de identidad contempla variaciones de color para oficinas y facultades. Por ejemplo, el texto negro sobre azul institucional no cumple, pero el texto blanco sobre ese mismo azul sí.
👉 Revisa también el tip ¿Por qué predomina el azul institucional?
Este criterio hace parte de las pautas WCAG 2.1 nivel AA que exige la Resolución 1519 de 2020.
