Saltar al contenido principal

Color

La paleta de colores de IKN se centra en los tres colores de la marca IKN, usa grises y negros específicos para la jerarquía del texto e incorpora colores semánticos esenciales, lo que da como resultado un conjunto de colores definidos y manejables.

1. Paleta de colores principal de la marca (3 colores):

Estos colores son fundamentales para la identidad de marca de IKN y se deben usar de forma coherente en todo el sitio web InsureKidsNow.gov.

#0D76AD
Azul IKN
Color principal para la marca. Se emplea para el estado predeterminado de los botones principales, los enlaces principales y la navegación clave.
#661466
Ciruela IKN
Color de marca secundario. Se usa para algunos encabezados, bordes de botones secundarios y detalles de marca.
#FF913D
Naranja quemado IKN
Color de acento, empleado con moderación para elementos de la interfaz de usuario o bordes específicos.

2. Paleta de colores neutros (6 colores)

Esta gama de colores neutros sustituye a las múltiples variaciones de blancos, grises y negros que se encuentran en todo IKN.

#1B1B1B
Ink
Cuerpo/encabezados
Color de texto principal para un máximo contraste (tipografía H1-H6, texto principal). Consolida varios grises oscuros/negros como #333333 y #000000 para su uso en texto.
#565C65
Gris oscuro
(interfaz de usuario/texto secundario)
Texto secundario en elementos complejos de la interfaz de usuario, bordes para campos de entrada y separadores organizacionales.
#757575
Gris medio
(marcador de posición/texto intermedio)
Texto de marcador de posición en campos de búsqueda y formularios. También se usa para ciertos textos de interfaz de usuario de contraste medio y marcadores de posición de texto.
#DFE1E2
Gris claro
(bordes/divisor)
Color predeterminado para los bordes de contenedores, tablas y elementos de formulario.
#F0F0F0
Blanco hueso
(fondo sombreado)
Color de fondo sutil para elementos de tarjetas, filas de tablas sombreadas o áreas de la interfaz de usuario que necesitan una ligera separación visual.
#FFFFFF
Blanco
(fondo base)
Fondo de la página principal, que también se usa para colores de relleno y texto claro sobre fondos oscuros.

3. Colores de interacción y del sistema (8 colores)

Esta categoría define los colores para los estados interactivos y la retroalimentación del sistema, lo que garantiza una comunicación clara de los éxitos, los errores, las advertencias y los enlaces.

#17415F
Azul oscuro IKN
(Pasar el mouse por encima)
Se emplea para los estados de desplazamiento del cursor y activo de los botones principales y los enlaces clave. También conocido como Medicaid Navy.
#EEFAFE
Azul claro IKN
(información/fondo)
Tono de fondo para mensajes informativos o contenedores de color azul claro. Se puede usar como color de fondo de la interfaz de usuario "Información".
#00A91C
Success Green
(núcleo)
Color principal para acciones exitosas y validación (por ejemplo, mensajes de éxito, íconos) directamente desde USWDS.
#ECF3EC
Light Success
(fondos)
Color de fondo claro para los contenedores de alertas de éxito (USWDS)
#D54309
Error Red
(cubierta)
Color principal para errores críticos y comentarios de validación (por ejemplo, mensajes de error, íconos).
#F4E3DB
Light Error
(fondo)
Color de fondo claro para los contenedores de alertas de error
#FFBE2E
Advertencia amarilla
(núcleo)
Color principal para mensajes de advertencia e indicadores de precaución, en consonancia con las pautas del USWDS.
#FAF3D1
Advertencia luminosa
(fondo)
Color de fondo claro para los contenedores de alerta de advertencia.

Requisitos de accesibilidad

Relación de contraste: para cumplir con los estándares de accesibilidad, las combinaciones de colores de texto y fondo deben mantener una relación de contraste mínima de 4.5:1 para texto normal. Cuando se modifique el color del texto o de fondo predeterminado, asegúrese siempre de mantener este contraste mínimo.

Uso del color: nunca use el color solo para transmitir información; asegúrese de que el tamaño de la fuente sea adecuado y de que haya suficiente contraste.

Reglas de uso (qué hacer y qué no hacer)

La coherencia es clave: ¡respete los colores documentados! El uso de múltiples variaciones arbitrarias del mismo matiz (como distintos tonos de ciruela o azul) debilita el reconocimiento de la marca.

Colores con un propósito definido: cada color de la paleta debe tener un propósito específico (por ejemplo, el Rojo de Error está reservado exclusivamente para estados de error).

Advertencia sobre colores obsoletos: cualquier color que se emplee actualmente en IKN y que no esté incluido en esta paleta de colores de la guía de estilo consolidada está obsoleto y debe reemplazarse durante futuros desarrollos.