Accesibilidad · AA

Contraste & parejas de color

20 combinaciones de dos colores pensadas para que el texto pequeño, el texto grande y los componentes mantengan un contraste razonable según AA, sin renunciar al estilo visual.

Cómo leer estas combinaciones

Todas las parejas siguen la lógica AA: mucho contraste entre el color oscuro y el claro. La clave está en qué usas como fondo y qué usas para el texto.

Cada combinación incluye un color oscuro y un color claro. Están pensadas para que, usando el más oscuro para texto sobre el claro, o el claro sobre el oscuro, se cumplan las recomendaciones típicas de AA en la mayoría de casos.

Texto pequeño (normal): usa siempre el color con más contraste como texto y el otro como fondo. Evita fondos con ruido o transparencias encima.

Texto grande: suele admitir más flexibilidad, pero la pareja sigue funcionando si respetas el contraste base (oscuro ↔ claro).

Formas y componentes: botones, etiquetas y bordes necesitan que el contorno o el texto mantenga contraste con el fondo donde se colocan.

Regla rápida: si dudas, usa el más oscuro para texto y bordes, y el más claro para fondos, tarjetas y estados neutros.

Estos ejemplos no sustituyen una comprobación con un medidor de contraste, pero te dan una base sólida para no cometer errores graves en interfaces reales.

20 combinaciones de dos colores

Cada combo incluye recomendaciones concretas para texto pequeño, texto grande y formas, usando siempre la lógica AA: mucho contraste entre fondo y contenido.

01. Noche profunda & blanco humo

UI oscura

Color oscuro

Noche profunda

#020617

Color claro

Blanco humo

#F9FAFB

Texto pequeño: blanco humo (#F9FAFB) sobre noche profunda (#020617).

Texto grande: ambos sentidos funcionan, mejor oscuro sobre claro para bloques largos.

Formas: botones claros sobre fondo oscuro, con borde oscuro fino para mantener definición.

AA texto normal Ideal para dashboards dark

02. Azul pizarra & gris nieve

SaaS / producto

Color oscuro

Azul pizarra

#0B1120

Color claro

Gris nieve

#E5E7EB

Texto pequeño: gris nieve sobre azul pizarra para interfaces oscuras.

Texto grande: azul pizarra sobre gris nieve en secciones informativas o tarjetas.

Formas: tarjetas claras con título oscuro y fondo general oscuro.

AA texto normal Seguro para formularios

03. Noche & cian hielo

Tech / data

Color oscuro

Noche profunda

#020617

Color claro

Cian hielo

#22D3EE

Texto pequeño: cian hielo sobre noche profunda en etiquetas y métricas.

Texto grande: mejor limitar cian a titulares cortos o stats, no a párrafos largos.

Formas: botones cian con texto oscuro y fondo nocturno.

AA texto normal Bueno para destacar KPI

4. Noche & fucsia aurora

Neon UI

Color oscuro

Noche profunda

#020617

Color claro

Fucsia aurora

#FF007B

Texto pequeño: usar con moderación en CTAs o etiquetas; fucsia sobre noche mantiene contraste.

Texto grande: ideal para titulares cortos, evitar bloques extensos para no fatigar.

Formas: botón fucsia con texto blanco o muy oscuro, sobre fondo noche profunda.

AA para énfasis Perfecto para CTA principal

5. Noche & violeta nube

Glassmorphism suave

Color oscuro

Noche profunda

#020617

Color claro

Violeta nube

#A855F7

Texto pequeño: blanco sobre violeta o violeta sobre noche para conservar contraste.

Texto grande: titular violeta sobre fondo noche funciona bien en hero o módulos destacados.

Formas: chips violeta con texto blanco sobre fondo oscuro.

AA en dark mode Buena para etiquetas

6. Azul noche & naranja brasa

Neobrutalismo suave

Color oscuro

Azul noche

#111827

Color claro

Naranja brasa

#F97316

Texto pequeño: naranja brasa sobre azul noche para botones y badges.

Texto grande: azul noche sobre fondo naranja funciona en secciones cortas de énfasis.

Formas: bloques naranja con bordes azules gruesos en layouts neobrutalistas.

AA texto normal Buen contraste de marca

7. Azul frío & verde éxito

Estados / feedback

Color oscuro

Azul frío

#0F172A

Color claro

Verde éxito

#4ADE80

Texto pequeño: verde éxito sobre azul frío en banners de confirmación.

Texto grande: azul sobre verde para títulos de módulos muy breves.

Formas: tarjetas de éxito con fondo verde y texto oscuro.

AA en mensajes de estado Ideal para success

8. Azul frío & amarillo alerta

Alertas

Color oscuro

Azul frío

#0F172A

Color claro

Amarillo alerta

#FACC15

Texto pequeño: azul muy oscuro sobre amarillo alerta para mensajes de advertencia.

Texto grande: títulos amarillos sobre fondo azul en módulos de “leer con atención”.

Formas: banners de warning con fondo amarillo y borde azul sólido.

AA para warnings Funciona en UI dark

9. Pizarra profunda & azul sistema

Corporate UI

Color oscuro

Pizarra profunda

#0B1120

Color claro

Azul sistema

#38BDF8

Texto pequeño: azul sistema sobre pizarra en botones primarios y enlaces destacados.

Texto grande: pizarra sobre fondos claros en secciones descriptivas.

Formas: CTAs azules con texto blanco sobre fondos muy oscuros.

AA en CTAs Estilo SaaS / B2B

10. Negro absoluto & blanco puro

Clásico

Color oscuro

Negro absoluto

#000000

Color claro

Blanco puro

#FFFFFF

Texto pequeño: blanco sobre negro o negro sobre blanco, máximo contraste.

Texto grande: cualquiera de las dos direcciones mantiene legibilidad.

Formas: base para sistemas monocromos o layouts con mucho peso tipográfico.

AA / AAA Referencia de contraste máximo

11. Gris carbón & gris perla

Minimalismo limpio

Color oscuro

Gris carbón

#1F2937

Color claro

Gris perla

#F3F4F6

Texto pequeño: carbón sobre perla para textos extensos.

Texto grande: perla sobre carbón para titulares en UI oscura.

Formas: tarjetas perla con sombra suave sobre fondo carbón.

AA texto de párrafo Ideal para contenido

12. Azul noche & gris claro

Interfaz mixta

Color oscuro

Azul noche

#111827

Color claro

Gris niebla

#E5E7EB

Texto pequeño: azul noche sobre gris claro para interfaces muy neutras.

Texto grande: gris sobre noche en hero o secciones oscuras.

Formas: bordes oscuros sobre fondo gris para inputs y tarjetas.

AA neutro Base para sistemas UI

13. Azul acero & amarillo sol

Brand llamativa

Color oscuro

Azul acero

#1E293B

Color claro

Amarillo sol

#FBBF24

Texto pequeño: azul acero sobre amarillo sol para claims o slogans.

Texto grande: títulos amarillos sobre fondo azul en secciones hero.

Formas: botones amarillos con texto azul oscuro.

AA para hero Buen contraste emocional

14. Verde bosque & verde menta

Eco / bienestar

Color oscuro

Verde bosque

#022C22

Color claro

Verde menta

#BBF7D0

Texto pequeño: bosque sobre menta para textos largos en webs eco.

Texto grande: menta sobre bosque para headings suaves pero legibles.

Formas: tarjetas menta con iconos oscuros.

AA calmado Buen match para wellness

15. Índigo noche & azul niebla

Edtech / producto digital

Color oscuro

Índigo noche

#1E1B4B

Color claro

Azul niebla

#E0E7FF

Texto pequeño: índigo sobre azul niebla para interfaces educativas.

Texto grande: niebla sobre índigo en secciones hero.

Formas: badges niebla con texto oscuro sobre fondo índigo.

AA friendly Ideal para UI joven

16. Índigo profundo & blanco suave

Editorial digital

Color oscuro

Índigo profundo

#312E81

Color claro

Blanco suave

#F9FAFB

Texto pequeño: índigo sobre blanco suave para lecturas largas.

Texto grande: blancos sobre fondo índigo en portadas o secciones de portada.

Formas: botones índigo con texto blanco sobre fondo claro.

AA lectura Estilo editorial

17. Azul frío & dorado suave

Producto premium

Color oscuro

Azul frío

#0F172A

Color claro

Dorado suave

#FDE68A

Texto pequeño: azul frío sobre dorado para precios o información premium.

Texto grande: dorado sobre azul en titulares cortos.

Formas: chips doradas con texto oscuro en contextos de lujo.

AA premium Ideal para pricing

18. Azul noche & lavanda digital

Creativo / portfolio

Color oscuro

Azul noche

#111827

Color claro

Lavanda digital

#A5B4FC

Texto pequeño: lavanda sobre fondo noche en pequeños componentes.

Texto grande: noche sobre lavanda en secciones de portfolio.

Formas: botones lavanda con texto oscuro en UI oscura.

AA creativo Buen contraste suave

19. Pizarra profunda & azul neón suave

Ciber / música

Color oscuro

Pizarra profunda

#0B1120

Color claro

Azul neón suave

#7DD3FC

Texto pequeño: azul neón sobre pizarra en labels y controles.

Texto grande: pizarra sobre fondos claros en descripciones.

Formas: controles de audio o sliders con pista azul sobre fondo oscuro.

AA neon Perfecto para Chill Bacán 😉

20. Noche & rosa coral

Brand amable

Color oscuro

Noche profunda

#020617

Color claro

Rosa coral

#FDA4AF

Texto pequeño: noche sobre rosa coral para mensajes cálidos pero legibles.

Texto grande: coral sobre noche para títulos cortos o claims.

Formas: botones coral con texto blanco u oscuro sobre fondos muy oscuros.

AA amable Perfecto para productos cercanos

Checklist rápido de contraste

Usa estas preguntas como guía cuando apliques cualquier pareja de color en tu interfaz.

Antes de publicar, revisa:

  • 1

    ¿El texto pequeño va siempre en el color más oscuro sobre el más claro (o blanco sobre muy oscuro)?

  • 2

    ¿Has evitado poner texto sobre gradientes muy cargados sin un fondo sólido debajo?

  • 3

    ¿Los botones, iconos y bordes se distinguen claramente del fondo incluso para alguien con la pantalla a bajo brillo?

  • 4

    ¿Has evitado usar solo color para indicar estado (error, éxito, selección), y añadido icono o texto?

  • 5

    Si hay dudas, ¿has pasado al menos los pares principales por un medidor de contraste para confirmar AA?