4 minute read
Paleta cromática
Previa a la calibración de colores se definen los colores institucionales correspondientes, dichos colores son el rojo (color primario) y el azul (color PANTONE 663 C #f8f8f7 RGB 248 / 248 / 247 CMYK 4 / 3 / 4 / 0 secundario) y como complementarios blanco y
negro, presentes en el siguiente esquema que
Advertisement
#f8f8f7 RGB 31 / 38 / 36 CMYK 87 / 78 / 73 / 60
Figura #48. Paleta cromática elegida con sus respectivos valores en Patone, RGB y CMYK. Elaboración propia.
Se usa el servidor “WCAG - Contrast Checker”
para poder medir el contraste y legibilidad del color en términos de accesibilidad, esto pensado
en personas que pueden tener problemas a la
vista, discapacidad visual parcial, o total.
Los términos usados según el sitio web de la WCAG se basan en los siguientes seis parámetros:
• AA: Indicado de aprobación 1.4.6 del criterio de éxito WCAG 2.0 (contraste mínimo) para fuentes
por debajo de 18pts.
• AAA: Indicado de aprobación 1.4.6 del criterio de éxito WCAG 2.0 (contraste mejorado) para fuentes por debajo de 18pts.
• AA18pt: Indicado de aprobación 1.4.6 del criterio de éxito WCAG 2.0 (contraste mínimo) para fuentes de más 18pts.
• AAA18pt: Indicado de aprobación 1.4.6 del criterio de éxito WCAG 2.0 (contraste mejorado) para fuentes de más 18pts. • Colors Pass: Criterio basado en el brillo
y la diferencia de color. Una calificación aprobatoria significa que se cumple totalmente con los colores.
• Color DIFF 765: ¿Qué tan legible es el texto para personas con daltonismo?.
Las primeras dos imágenes representan los colores elegidos sin ser antes calibrados incumpliendo con dos criterios:
MARGIN COLORS
COLOR DIFF COLO LORS
MARGIN COLORS
COLOR DIFF COLORS
Figura #49. Medición de contraste para el tono azul y rojo sin ser calibrado, incumpliendo con dos requerimientos de accesibilidad. Elaboración propia. Adaptado del WCAG - Contrast Checker
MARGIN COLORS
COLOR DIFF COLORS
MARGIN COLORS
COLOR DIFF COLORS
Figura #50. Medición de contraste para el tono azul y rojo calibrado, cumple con los requerimientos de accesibilidad. Elaboración propia. Adaptado del WCAG - Contrast Checker
Luego de la calibración de los colores principales que llevarán la identidad gráfica del sistema adelante, se presenta (ahora demostrado a través de la Figura #51) con sus valores en el sistema Pantone, además presenta su codificación hexagecimal y sus valores RGB y CMYK.
Figura #51. Paleta cromática calibrada elegida con sus respectivos valores en Patone, RGB y CMYK. Elaboración propia.
Contraste y visibilidad del color
Como los colores han sido calibrados,
previamente se busca en referencias bibliográficas respecto a la señalética, la visibilidad, legibilidad y el contraste del color para poder fundamentar aún más la propuesta y conducirla hacia una propuesta gráfica más condensada, por eso es que se hacen
las siguientes nomenclaturas en los colores preservando la visibilidad y legibilidad (Figura #52), las nomenclaturas mencionadas son hechas en base a la lectura del artículo web Visibilidad y legibilidad. [30]
• Azul sobre blanco (viceversa) (alta legibilidad de títulos y rótulos).
• Rojo sobre blanco (viceversa) (alta legibilidad de títulos y rótulos)
Ambas combinatorias cumples con los estándares de la W3C cumpliendo así con las normas de
contraste de la W3C.
Figura #52. Tabla explicativa de códigos de color, códigos hexagecimales. Elaboración propia.
Conjunto a esto se completa una tabla con sus perfiles de salida RGB (digital) y CYMK (sistemas de impresión), con el fin de cubrir aún más las decisiones de normas gráficas que afectarán posteriormente en la realización del manual de normas gráficas (Figura #53).
Estos detalles como el código hexagecimal del color y sus valores en RGB y CMYK, permiten dar aún más detalles a las decisiones tomadas para unificar el sistema, sirven para unificar los valores del color en esta propuesta de Diseño.
Figura #53. Tabla explicativa de códigos de color, pantalla, RGB y CMYK. Elaboración propia.
Para demostrar las decisiones se construye una tabla con las características de cada
nomenclatura y sus cumplimientos con las normas de la W3C (Figura #54), y pensando además en normas de contraste, visibilidad
y legibilidad del color, las cuales aceptan las siguientes nomenclaturas de contraste probadas según el Medidor de contraste WCAG.[31]
Esta tabla ayuda a comprender como los elementos (tipografía y color) funcionan según las normas de la W3C. En este sentido las definiciones entregadas por el medidor de contraste influyen directamente también en el manual de normas gráficas, entregando datos que informan sobre los usos correctos e incorrectos de la tipografía y elementos gráficos.
Figura #54. Tabla explicativa, nomenclaturas de color y sus respectivas pruebas de contraste. Elaboración propia.
PUCV
PUCV PUCV
Figura #55. Azul sobre blanco (viceversa). Elaboración propia.
PUCV
Figura #56. Rojo sobre blanco (viceversa). Elaboración propia.
PUCV
PUCV PUCV
Figura #57. Azul sobre rojo (viceversa), que no cumple. Elaboración propia.
PUCV
Figura #58. Fondo blanco y distintas nomenclaturas entre el isotipo y el texto, no cumplen. Elaboración propia.
