Fondos y superficies
Skip to main content
Careers Contact us

Fondos y superficies

Biblioteca de la Fundación

Muestras de color que muestran todas las opciones de fondo y superficie de la paleta de colores del Sistema de Diseño TxDOT.

En la Biblioteca de la Fundación, los fondos y superficies se distinguen por su propósito y la interacción con el usuario.
Una superficie es un elemento interactivo, como un botón, una tarjeta o un campo de formulario. Un fondo es un área no interactiva que proporciona estructura, agrupa contenido relacionado o separa visualmente secciones.

Antecedentes

Los fondos son áreas no interactivas, normalmente detrás del contenido, utilizadas para establecer estructura, jerarquía y separación visual. Los usos comunes incluyen fondos de página, contenedores de secciones, agrupación de contenido y divisores de secciones.

Página

HEX: #ffffff (Gris 0)
RGB: 255 / 255 / 255

Acento

HEX: #f8f8f8 (Gray 5)
RGB: 248 / 248 / 248

Énfasis

HEX: #0056a9 (Azul 50)
RGB: 0 / 86 / 169

Pendiente

HEX: #0056a9 (Blue 50),
           #002262 (Azul 80)
RGB: 0 / 86 / 169,
           0 / 34 /98

Para fichas de color detalladas, paletas y guías de uso, consulta la página de Color .

Tipos de antecedentes

  • Página: Se utiliza como fondo principal de página para áreas de contenido estándar.
  • Acento: Se utiliza para agrupar contenido relacionado o crear separación visual del contenido circundante.
  • Énfasis: Se usan para resaltar contenido importante o áreas de interfaz.
  • Gradiente: Se usaba para llamar la atención sobre contenido destacado o promocional.

Orientación

  • Utiliza fondos para separar secciones o agrupar contenido relacionado.
  • Los colores de fondo deben mantenerse consistentes y no deben tener estados interactivos.

Superficies

Las superficies son áreas interactivas o funcionales donde los usuarios interactúan con el contenido o con elementos de la interfaz. Los usos comunes incluyen botones, tarjetas, menús, acordeones, campos de entrada, diálogos y modales.

Sólidos de superficies

Marca

HEX: #0056a9 (Azul 50)
RGB: 0 / 86 / 169

Invertir

HEX: #ffffff (Gris 0)
RGB: 255 / 255 / 255

Luz neutra

HEX: #f8f8f8 (Gray 5)
RGB: 248 /248 /248

Deshabilitado

HEX: #cecece (Gray 20)
RGB: 206 /206 /206

Superficies con contorno

Información

Relleno superficial
HEX: #e5f8ff (Azul 5)
RGB: 229 / 248 / 255

Borde superficial
Borde: #3288cb (Azul 40)
RGB: 50 / 136 / 203

Éxito

Relleno superficial
HEX: #e8ffd9 (Verde 5)
RGB: 232 / 255 / 217

Borde superficial
HEX: #2c6d0d (Green 60)
RGB: 44 / 109 / 13

Advertencia

Relleno superficial
HEX: #fefadd (Amarillo 5)
RGB: 254 / 250 / 221

Borde superficial
HEX: #8c6f08 (Amarillo 80)
RGB: 140 / 111 / 8

Error

Relleno superficial
HEX: #ffe5e5 (Rojo 5)
RGB: 255 / 229 / 229

Borde superficial
HEX: #b60909 (Rojo 60)
RGB: 182 / 9 / 9

Neutro

Relleno superficial
HEX: #f8f8f8 (Gray 5)
RGB: 248 / 248 / 248

Borde superficial
HEX: #949494 (Gray 40)
RGB: 148 / 148 / 148

Orientación

  • Los colores de la superficie deben comunicar interactividad y accesibilidad.
  • Las superficies interactivas pueden tener estados de flotación, enfoque, activo y desactivado.
  • Utiliza suficiente contraste entre las superficies y los fondos circundantes.

Accesibilidad

Los colores de fondo y de superficie deben soportar legibilidad, usabilidad y requisitos relevantes para todos los usuarios.

El texto y las imágenes significativas deben cumplir con los siguientes requisitos mínimos de contraste:

  • 4.5:1 para texto estándar (15-18px o 14px en negrita)
  • 3:1 para texto grande (18px o mayores)

Ejemplo: El texto mostrado en botones, tarjetas, banners, fondos de colores u otras superficies debería tener suficiente contraste para seguir siendo fácil de leer. Esto incluye etiquetas de botones, encabezados, contenido del cuerpo, enlaces y otro texto que comunique información.

Los elementos interactivos y los objetos gráficos deben tener una relación de contraste de color de al menos 3:1 respecto al fondo o superficie circundante.

Ejemplo: Los iconos, botones, campos de formulario y otros elementos interactivos deberían ser fáciles de distinguir del fondo que hay detrás. Por ejemplo, un icono mostrado sobre un fondo de color debería tener suficiente contraste para mantenerse claramente visible y reconocible.

Los requisitos de contraste se aplican a contenidos que los usuarios necesitan leer, entender o con el que interactuar, incluyendo:

  • Texto del cuerpo
  • Etiquetas de botones
  • Texto del enlace
  • Texto provisional
  • Cualquier texto que transmita significado

Los requisitos de contraste generalmente no se aplican a:

  • Logotipos
  • Texto decorativo o puramente estilístico
  • Texto oculto, inactivo o deshabilitado