Este generador de paletas de colores accesibles convierte un color base en una paleta de cinco colores. Para cada uno, indica si el texto blanco o negro sobre ese fondo cumple los umbrales de contraste de las WCAG. Elige un color y un tipo de paleta y revisa los indicadores.
Lo que puedes configurar:
- Color base del selector, un código hexadecimal escrito o el botón Aleatorio
- Tipo de paleta: Vibrante, Monocromática, Contraste 1, Contraste 2, Pastel, Contraste Pastel 1, Contraste Pastel 2 u Oscuro a Claro
- Bloquear en cualquier tarjeta, para que el color sobreviva a la siguiente regeneración
Cada tarjeta muestra los valores HEX, RGB y HSL del color, cada uno con su propio botón de copia. Debajo de ellos se encuentra la relación de contraste y dos insignias: WCAG AA (4.5:1) y WCAG AAA (7:1).
Cómo utilizar este generador de paleta de colores accesible
- Ingresa el color de tu marca en el campo hexadecimal o haga clic en Random para obtener un punto de partida.
- Elige un tipo de paleta. La paleta se regenera con cada cambio y los modos Vibrante, Contraste y Pastel añaden un poco de aleatoriedad, así que elige el mismo modo dos veces para ver las variaciones.
- Bloquea los colores que deseas conservar, luego cambia el modo o el color base para regenerar el resto.
- Lee las insignias. Un AA verde significa que el texto en blanco o negro, el que sea más fuerte, alcanza al menos 4.5:1 en ese color.
- Copia los valores en tu hoja de estilo o tokens de diseño.
Una tarjeta por #2C5F8A dice así:
HEX #2C5F8A
RGB 44, 95, 138
HSL 207°, 52%, 36%
WCAG AA ✓ WCAG AAA ✗
Contrast: 6.75:1La relación es la fórmula WCAG que la herramienta ejecuta en el navegador: luminancia relativa del color más claro más 0.05, dividida por luminancia relativa del color más oscuro más 0.05, después de linealizar cada canal RGB.
function luminance(r, g, b) {
const lin = c => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
};
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
function contrast(a, b) {
const [l1, l2] = [luminance(...a), luminance(...b)].sort((x, y) => y - x);
return (l1 + 0.05) / (l2 + 0.05);
}Lo que la herramienta no hace
- No limita la generación por contraste. Las paletas provienen de compensaciones de tono, saturación y luminosidad alrededor del color base. Las insignias son una verificación del resultado, no una entrada al mismo. Si una tarjeta falla, regenere, bloquee los pases y vuelva a intentarlo, o aclare o oscurezca el color base.
- Comprueba cada color únicamente con texto blanco y negro. No prueba los colores de la paleta entre sí. Para un emparejamiento de texto sobre color entre dos colores de paleta, ejecute los dos códigos hexadecimales a través de la fórmula anterior o un verificador de contraste dedicado.
- Utiliza proporciones WCAG 2. No hay puntuación APCA.
- No simula el daltonismo. Vea la paleta en Coblis (EN) o Color Oracle (EN) antes del envío.
- No hay exportación. Copia los valores que necesita o asígneles un nombre con el Buscador de nombres de colores.
El resto de esta página cubre los estándares, las matemáticas y el flujo de trabajo más amplio en el que encaja la herramienta.
¿Qué es un generador de paleta de colores accesible?
Un generador de paleta de colores accesible es una herramienta de diseño que crea combinaciones de colores para cumplir con un estándar de contraste mensurable, no solo una apariencia agradable.
Esa es la principal diferencia con una herramienta de paleta normal. Un generador regular optimiza la armonía de tonos. Uno accesible optimiza primero la legibilidad o, como la herramienta anterior, genera armonía y luego mide la legibilidad en cada resultado.
Los usuarios típicos incluyen:
- Diseñadores de productos crean un sistema de color para una interfaz en vivo
- Desarrolladores de aplicaciones para el usuario que necesitan códigos hexadecimales seguros para el contraste antes de tocar CSS
- La accesibilidad lleva a auditar una paleta de marcas existente
El texto de bajo contraste es el fallo de accesibilidad más común encontrado en la web, presente en el 83.9% de las páginas de inicio analizadas en el informe WebAIM Million 2026 (EN), frente al 79.1% del año anterior.
Esa única estadística es la razón por la que existe esta categoría de herramienta. La mayoría de los problemas de color en la web no son exóticos. Son simples fallas de contraste que un generador detecta antes del lanzamiento.
La práctica se encuentra dentro de la disciplina más amplia de accesibilidad web (EN), pero tiene un alcance más limitado.
Un generador de paleta accesible no verifica las etiquetas del lector de pantalla ni las trampas del teclado. Comprueba una cosa: si una combinación de colores de primer plano y de fondo es legible para personas con baja visión o problemas de visión de los colores. Eso lo convierte en una pieza pequeña pero resistente del diseño de interfaz de usuario (EN).
WCAG versus APCA: ¿Qué estándar de contraste debería utilizar?
WCAG mide el contraste a través de una relación de luminancia relativa. APCA lo mide a través de una puntuación de luminosidad perceptiva llamada Lc.
Ambos existen para responder a la misma pregunta de diferentes maneras: ¿es este texto legible en este contexto?
Cifras clave y sus fuentes:
- WCAG 2.2 Nivel AA: mínimo 4.5:1 relación de contraste para texto normal y 3:1 para texto de gran escala, según Criterio de éxito 1.4.3 (EN)
- WCAG 2.2 Nivel AAA: mínimo 7:1 para texto normal, según el Criterio de éxito 1.4.6 (EN)
- APCA: Lc 90 preferido y Lc 75 mínimo para el cuerpo del texto, según la documentación APCA (EN)
APCA (EN) fue creado por el investigador Andrew Somers y es el método de contraste candidato para WCAG 3, aún en desarrollo.
Informa contraste de color (EN) en una escala de Lc 0 a aproximadamente Lc 106, donde Lc 15 es el mínimo absoluto para que un límite que no sea de texto sea discernible.
La Sección 508 (EN), la Ley de Estadounidenses con Discapacidades (EN) y la EN 301 549 (EN) de Europa hacen referencia a los umbrales de proporción de las WCAG como la columna vertebral legal para la accesibilidad digital.
Actualmente, ninguno de ellos cita directamente a la APCA. Es por eso que la mayoría de los generadores, incluido este, todavía utilizan por defecto las matemáticas WCAG incluso cuando APCA gana terreno entre los diseñadores.
Un par de colores pueden pasar la prueba de proporción WCAG en papel y aún así sentirse débiles en la práctica. Las matemáticas de luminancia relativa no explican completamente cómo el ojo humano percibe la luminosidad en diferentes tamaños y pesos.
¿Cómo calcula el contraste un generador de paleta de colores accesible?
El cálculo del contraste comienza con luminancia relativa (EN), un valor derivado de los canales rojo, verde y azul de cada color después de la corrección gamma. El bloque de código cerca de la parte superior de esta página es la fórmula completa.
El generador toma la luminancia del primer plano, la luminancia del fondo y las combina en una única relación entre 1:1 y 21:1.
Dos frases resumen todo el método: una luminancia más oscura más una luminancia más clara produce un espacio mayor, y un espacio mayor produce una proporción mayor.
Al deslizar un valor de tono en los selectores de color HSL frente a RGB (EN) es donde ocurren la mayoría de las fallas accidentales. El ajuste de la saturación puede cambiar silenciosamente la luminancia sin que el diseñador se dé cuenta.
Espacio de color y por qué cambia el resultado
No todos los espacios de color representan la luminosidad de la misma manera, y eso es importante cuando un generador ajusta un tono para alcanzar una proporción objetivo. La herramienta anterior funciona en HSL, por eso sus insignias son importantes: HSL la luminosidad por sí sola no predice el contraste.
| Espacio de color | Precisión de luminosidad | uso común |
|---|---|---|
| HSL | Aproximado, no perceptualmente uniforme | Ajustes manuales rápidos |
| CIELAB | Perceptualmente uniforme | Impresión y combinación de colores entre dispositivos |
| OKLCH (EN) | Perceptualmente uniforme, diseñado para pantallas | Moderna generación de colores CSS |
HSL trata la luminosidad como un promedio simple de los canales RGB más altos y más bajos de un color. Es por eso que dos colores con el mismo valor de luminosidad HSL pueden verse notablemente diferentes en brillo.
OKLCH y CIELAB modelan la luminosidad de forma más cercana a cómo la percibe el ojo. Al subir o bajar un valor se mantiene intacto el contraste deseado.
Los diseñadores que necesitan moverse rápidamente entre formatos a menudo recurren a un conversor de RGB a HSL o un conversor de HEX a RGB cuando verifican cómo se traduce un color de marca base.
¿Cómo simulan estas herramientas el daltonismo?
La simulación de daltonismo muestra una paleta tal como la vería alguien con un tipo específico de deficiencia en la visión del color. El generador de esta página no incluye uno, así que trátelo como el paso que le sigue.
Tres tipos se simulan con mayor frecuencia:
- Deuteranopia, sensibilidad reducida al verde
- Protanopia, sensibilidad reducida al rojo.
- Tritanopía, sensibilidad reducida al azul, mucho más rara que las otras dos
Coblis (EN), Color Oracle (EN) y Sim Daltonism (EN) son los simuladores de referencia a los que más apunta el campo de accesibilidad. Varias herramientas de paleta licencian o replican su lógica de filtrado.
Esta es una verificación separada de las matemáticas de contraste. Una pareja puede alcanzar 4.5:1 y aun así colapsar en casi el mismo tono una vez que se simula la deuteranopía. La fórmula de la proporción no sabe qué tonos puede distinguir el espectador.
La deficiencia de visión de los colores afecta aproximadamente a 1 de cada 12 hombres (8%) y 1 de cada 200 mujeres (0.5%), según Colour Blind Awareness (EN).
Esa es una proporción significativa de cualquier audiencia general. Es por eso que el diseño inclusivo (EN) trata la simulación como un paso obligatorio, no como un extra opcional.
La confusión rojo-verde representa la inmensa mayoría de los casos, por lo que un generador que solo controle la tritanopía está resolviendo el problema menor.
¿Cómo funciona la lógica de generación de paletas?
La generación de paletas sigue una de dos lógicas: basada en la armonía o primero en el contraste. Este generador se basa en la armonía, aplicándose posteriormente la comprobación de contraste.
Las herramientas basadas en la armonía parten de las reglas de la teoría del color.
- Complementario: dos tonos opuestos en la rueda
- Análogo: tonos sentados uno al lado del otro
- Triádico: tres tonos espaciados uniformemente
Las herramientas de contraste primero funcionan al revés. Bloquee un color base, establece una proporción objetivo y deje que el algoritmo genere matices y sombras que alcancen ese número automáticamente.
Adobe creó una versión híbrida de esto llamada Leonardo (EN), una herramienta de código abierto de su equipo de diseño Sistema de diseño (EN) Spectrum.
Leonardo toma un color de marca como entrada y genera una escala completa calibrada según relaciones de contraste específicas. El valor predeterminado es 3:1 y 4.5:1, los dos umbrales que establece WCAG para texto grande y normal.
Vale la pena exponer claramente el equilibrio. Una paleta que prioriza la armonía generalmente se ve mejor en el primer intento, pero luego necesita una pasada de contraste, que es lo que hacen las insignias de arriba.
Una paleta que prioriza el contraste pasa la verificación de accesibilidad inmediatamente. A veces es necesario echarle un segundo vistazo para asegurarse de que los tonos aún parezcan una marca coherente.
Los mejores generadores de paleta de colores accesibles comparados
Coolors (EN), Adobe Color (EN), Khroma (EN), Stark (EN), y ColorBox (EN) cubre la mayoría de las formas en que los equipos generan paletas accesibles en la actualidad.
| Herramienta | Estándar comprobado | Integración | Precio |
|---|---|---|---|
| Coolors | WCAG AA/AAA | Aplicación web, extensión del navegador | Nivel gratuito y pago disponible |
| Adobe Color / Leonardo | Relaciones de contraste WCAG | Aplicación web, módulo npm | Gratis, de código abierto |
| Stark | WCAG, algo de apoyo de APCA | Complemento para Figma, Sketch y Adobe XD | Suscripción con opciones gratuitas y de pago |
| Khroma | Ninguno incorporado | Aplicación web independiente | Gratis |
| este generador | WCAG AA/AAA contra blanco o negro | aplicación web | Gratis |
Los equipos que ya trabajan dentro de a Figma flujo de trabajo de diseño (EN) tienden a recurrir a Stark. Comprueba el contraste sin salir del archivo.
Dónde cada herramienta tiende a encajar mejor:
- Coolors para una exploración rápida de la paleta de uso general con un cuadro de contraste en capas en la parte superior
- Leonardo para equipos que crean una escala de fichas de diseño completo a partir de un color de marca
- Khroma como inspiración inicial, el contraste aún necesita una ficha separada después
Opciones de código abierto como Leonardo (EN) brindan a los equipos de ingeniería acceso directo al algoritmo subyacente. Eso es importante cuando una paleta necesita regenerarse automáticamente a medida que cambia el color de una marca.
Las herramientas de suscripción como Stark intercambian esa flexibilidad por un flujo de trabajo más fluido basado en complementos que los diseñadores no técnicos pueden ejecutar sin tocar el código.
Pros y contras de la generación automatizada de paletas accesibles
La automatización elimina la parte más lenta y propensa a errores del trabajo de color accesible: probar manualmente cada combinación de primer plano y fondo.
Ventajas:
- Velocidad, se genera una escala a todo color en segundos en lugar de horas
- Consistencia: cada tono en un sistema se compara con la misma proporción objetivo
- Menos errores humanos, nadie se olvida de probar el estado estacionario
Contras:
- Los matices de la marca pueden aplanarse cuando un algoritmo prioriza la proporción sobre la sensación
- Los elementos que no son de texto, como iconos y bordes de entrada, a menudo no están marcados, ya que la mayoría de los generadores se centran en el texto.
- Los degradados y los fondos fotográficos no se manejan en absoluto.
Esa segunda brecha importa más de lo que parece. Los campos de formulario, en particular, dependen del contraste de los bordes que un generador de sólo texto no marcará. Es una de las razones por las que formularios accesibles (EN) todavía necesitan un pase de revisión exclusivo.
La revisión manual no desaparece una vez que una herramienta aprueba una paleta. Se reduce a las partes que la automatización no puede alcanzar: contraste sin texto, degradados y cualquier cosa que utilice solo el color para transmitir significado.
La forma honesta de plantearlo: la automatización maneja la aritmética, un ser humano todavía es dueño de las decisiones.
Cómo generar e implementar una paleta de colores accesible
La generación de una paleta de colores accesible sigue un orden fijo: primero el color base, segundo el estándar de destino, tercero la comprobación del contraste y finalmente la exportación. La herramienta anterior cubre el primer y tercer paso.
Saltarse el orden es lo que falla en la mayoría de las paletas, generalmente porque alguien exporta antes de pasar al daltónico.
- Elige un color de marca base y registre su código hexadecimal
- Elige un estándar objetivo: WCAG AA, WCAG AAA o un valor APCA Lc específico
- Genere la escala de tintes y sombras, comparando cada combinación con ese objetivo.
- Ejecute la escala completa a través de un pase de simulación daltónico
- Exporte la paleta aprobada en el formato que realmente utiliza tu compilación.
El formato de exportación importa más de lo que los equipos esperan.
Una paleta encerrada en valores hexadecimales planos debe editarse a mano cada vez que cambia el color de una marca. Una exportada como CSS (EN) las propiedades personalizadas se actualizan en todos los lugares a los que se hace referencia en el momento en que cambia la variable raíz.
Los equipos de diseño que trabajan en Figma y el código se exportan cada vez más directamente a tokens de diseño. La característica de variables propias de Figma, cubierta en esta Figma guía de variables (EN), se asigna claramente a esa CSS estructura de propiedades personalizadas.
JSON tokens de diseño se encuentran en el medio: lo suficientemente portátiles para un sistema de diseño, lo suficientemente estructurados para que un proceso de construcción los consuma sin traducción manual.
Cuando los generadores de paletas de colores accesibles no se aplican
Un generador de paleta de colores accesible deja de ser útil en el momento en que la superficie que está revisando no es de un color plano y conocido.
Cuatro situaciones quedan fuera de lo que estas herramientas pueden comprobar:
- Elementos que no son de texto: los íconos, los bordes de entrada y los estados de alternancia se encuentran bajo una regla separada, WCAG 1.4.11 (EN), no la relación de contraste de texto que la mayoría de los generadores utilizan por defecto
- Degradados y fondos fotográficos: no hay un color de fondo único para medir una proporción
- Fondos dinámicos o generados por el usuario: un banner de perfil o una imagen cargada no se pueden verificar con anticipación
- Colores de marca registrados o fijados legalmente: un color que no se puede cambiar no tiene espacio para una corrección de contraste
WCAG 1.4.11 establece su propio umbral de 3:1 para los límites visuales de los componentes de la interfaz y los gráficos significativos. Es un criterio independiente de las proporciones de texto tratadas anteriormente.
La documentación del sistema de diseño de carbono de IBM (EN) menciona esta brecha directamente. Advierte a los equipos que verifiquen el contraste del texto en cada punto que cruza un degradado o una imagen, ya que un único valor hexadecimal fijo no se mantendrá en un fondo en movimiento.
Carbon también dirige a los diseñadores hacia el complemento Stark para una revisión daltónica, un reconocimiento de que ningún paso del generador cubre todos los atributos que necesita una interfaz real. Eso es parte de por qué componentes de interfaz de usuario accesibles (EN) se auditan como su propia categoría en lugar de agruparse en una paleta de verificación.
Errores comunes que afectan la accesibilidad tras generación
Una paleta puede pasar todas las pruebas que ejecuta un generador y aun así fallar en producción.
Cuatro errores representan la mayor parte de esa brecha:
- Comprobación de la capa incorrecta: una superposición semitransparente cambia el color de fondo efectivo, y un generador probado solo con el color base lo perderá
- Ignorar los estados de enfoque y desplazamiento: El criterio Apariencia de enfoque (EN) de WCAG 2.2, publicado en octubre de 2023, requiere un contraste de al menos 3:1 entre los estados enfocados y desenfocados de un componente.
- Usar el tono solo para transmitir significado: un indicador de estado rojo versus verde desaparece para aproximadamente el 8% de los hombres con deficiencia de visión del color rojo-verde tratados anteriormente
- Omitir el contraste sin texto en íconos y bordes: un color de borde gris claro, el tipo que muchos sistemas de diseño utilizan por defecto, comúnmente se acerca a 1.6:1 contra el blanco, muy por debajo del mínimo de 3:1
Cada uno de estos pasa un verificador de contraste de solo texto sin previo aviso. Ninguno de ellos toca la proporción de texto para la cual el verificador está diseñado.
La solución no es un mejor generador. Trata la salida del generador como una paleta inicial y luego ejecuta una segunda pasada en estados, superposiciones y elementos que no son de texto antes de enviar algo.
Preguntas frecuentes: Generador de paletas de colores accesibles
¿A qué estándares legales hacen referencia los generadores de paletas de colores accesibles?
Los generadores de paletas de colores más accesibles verifican el contraste con los umbrales de relación de WCAG, ya que la Sección 508, la ADA y la norma europea EN 301 549 citan ese estándar directamente. La ley actual no hace referencia a APCA, aunque es el método candidato para WCAG 3.
¿Puede una combinación de colores pasar las WCAG y aún así ser difícil de leer para un usuario daltónico?
Sí. La fórmula de proporción de WCAG mide la diferencia de luminancia, no la diferencia de tono, por lo que dos colores pueden alcanzar 4.5:1 y aún verse casi idénticos en condiciones de deuteranopía. Un pase de simulación daltónico capta esa brecha; la verificación de la proporción por sí sola no lo hace.
¿Es suficiente un generador de paleta de colores accesible y gratuito o vale la pena una herramienta paga?
Herramientas gratuitas como ésta, Coolors y Khroma manejan bien las comprobaciones de contraste de una sola paleta. Las herramientas pagas como Stark agregan verificaciones de contraste sin texto, bibliotecas de equipo y exportaciones de sistemas de diseño. Eso es importante una vez que una paleta necesita escalar a través de un producto completo.
¿Cuánto le cuesta a una empresa el contraste no conforme en términos legales o de usabilidad?
Los demandantes presentaron 2,452 demandas de accesibilidad de sitios web en un tribunal federal en 2024, según el seguimiento de los documentos judiciales realizado por Seyfarth Shaw (EN). Las fallas de contraste se encuentran entre los defectos más comúnmente citados, junto con la falta de texto alternativo y campos de formulario sin etiquetar.
¿APCA es más confiable que WCAG para trabajos de diseño reales?
Los modelos APCA perciben la ligereza con mayor precisión, según su desarrollador Andrew Somers, lo que los hace mejores a la hora de predecir la legibilidad real. WCAG sigue siendo el estándar legalmente citado. La mayoría de los equipos verifican ambos hasta que WCAG 3 adopta formalmente un método de percepción.
¿Cómo se verifica una paleta que ya pasó por un generador antes de enviarla?
Pruebe cada estado de desplazamiento, enfoque y deshabilitado por separado, ya que un generador generalmente verifica solo el emparejamiento predeterminado. Luego verifique los elementos que no sean de texto, como bordes e íconos. Finalmente, vea la paleta completa a través de un simulador daltónico por última vez.
¿Qué debe comprobar primero cuando un generador de paleta de colores accesible aprueba una paleta?
Un generador de paleta de colores accesible gana su lugar en producción solo una vez que su aprobación se trata como un punto de partida. Una relación de contraste aprobada confirma por sí sola la legibilidad del texto.
Tres controles deciden si esa aprobación se mantiene después del lanzamiento.
- Primero los pares de texto
- Iconos y bordes sin texto en segundo lugar
- Por último, los estados interactivos
Ese orden sigue a la exposición. El texto roto falla inmediatamente, los bordes rotos ralentizan el reconocimiento y los estados rotos aparecen solo una vez que alguien interactúa.
La compensación es la velocidad. Verificar tres umbrales en lugar de uno agrega un paso de revisión que el trabajo de pura armonía de colores nunca requirió.
El WCAG 3.0 borrador de trabajo (EN) del W3C, actualizado el 10 de septiembre de 2026, sigue siendo un borrador de trabajo que no puede citarse como estándar. Los umbrales actuales se mantienen hasta que una recomendación futura los reemplace.
Los equipos que vayan más allá del color pueden trabajar con una lista de verificación de accesibilidad web (EN) completa a continuación.