ICH

1. COLOR
PRESENTADO POR:
Mamani Charca Lady Patricia
Quispe Ccallo Lisbet Charo

2. El sistema de color
.
1°Uso del color y
paletas
Los colores primarios y
secundarios de la aplicación,
y sus variantes, ayudan a
crear un tema de color que
sea armonioso, garantiza
texto accesible y distingue
los elementos y las
superficies de la interfaz
de usuario entre sí.
3°Herramientas
El generador de paleta de
materiales se puede usar para
generar una paleta para
cualquier color que ingrese. Un
ajuste algorítmico de tono,
croma y luminosidad crea
paletas que son utilizables y
estéticamente agradables.
2°Creación de tema de color
incluye colores
predeterminados para
primario, secundario y sus
variantes. Este tema de
referencia también incluye
colores adicionales que definen
su UI, como los colores de
fondos, superficies, errores,
tipografía e iconografía. Todos
estos colores se pueden
personalizar para su aplicación.
Utilizada para crear un tema de color que refleje su marca o estilo.
J
L
E
Color primario
Color secundario
Colores de superficie,
fondo y error
Color tool
Generador de
patelas

3. Aplicación de color a la interfaz de usuario
• .
1°Uso
Estas pautas describen una
variedad de componentes y
elementos de la interfaz de
usuario donde la aplicación
del color es importante.
Fondo
Un fondo tiene una capa
frontal y posterior. Para
distinguir entre estas dos
capas, el color de la capa
posterior de la línea base es su
color primario y la capa frontal
de la línea de base es blanca.
2°Barras de aplicación
superior
inferior
coherente y significativa.consistente
Distinto
Intencional
aplicar a través de una IU de forma
consistente y ser compatible con la
marca
 entre elementos
 suficiente contraste entre ellos
 Significado
 relaciones entre los
elementos y los grados
de jerarquía

4. Aplicación de color a la interfaz de usuario
4°Hojas
Son contenidos adicionales
que están ancladas al
borde izquierdo ,derecho o
inferior de la pantalla.
6°Tipografía e iconografía
El color puede expresar si el
texto tiene mayor o menor
importancia en relación con otro
texto. El color también garantiza
que el texto permanezca legible
cuando se coloca sobre
imágenes o fondos, lo que
puede dificultar la lectura del
texto que se encuentra delante
de ellos.
5°Botones, chips y
controles de
selección
 Botones
Los botones permiten a los
usuarios tomar acciones y tomar
decisiones con un solo toque.
Los chips
son elementos compactos que
representan una entrada, atributo o
acción.
 Controles de seleccion
Completar tareas que implican tomar decisiones
tales como seleccionar opciones o activar o
desactivar configuraciones
 Hojas: parte inferior
Las hojas inferiores son superficies
que contienen contenido adicional
que están ancladas en la parte
inferior de la pantalla.
 Hojas: lado
Las hojas laterales son superficies
que contienen contenido adicional
que están ancladas al borde
izquierdo o derecho de la pantalla.

5. USO DEL COLOR
Jerarquía
Limitar color
MarcaAudaz
Sentido
Estado
Contraste de
Superficie
Color y forma
Atrevido Sofisticado
Sentido de
acuerdo al
tema
Consistencia Contexto
Indicación de
interacción
Selección de
indicación

6. LEGIBILIDAD DEL TEXTO
Estándares
de
legibilidad
Fondos de
texto
Tipos de
texto
Todo el texto debe ser legible y cumplir con los
estándares de accesibilidad. El nivel AA de las Pautas de
Accesibilidad para el Contenido Web (WCAG
2.0) requiere un contraste de color de 4.5.1 entre el
texto y el fondo para el texto normal, y de 3: 1 para el
texto grande.
Textos sobre fondos de colores.
Usando la opacidad del texto.
Textos oscuros sobre fondos claros.
Texto y fondos coloreados.
Texto Auxiliar.- Debe ser legible según los estándares
WCAG.
Texto Seleccionado.- Puede usar acento de su color
primario o secundario.
Iconos y otros símbolos.- No necesitan cumplir con los
estándares de legibilidad de WCAG.