Categorías

← View All Tools

Comprobador de contraste de paleta accesible

Audita combinaciones de color segun WCAG 2.1 AA y AAA y propone ajustes

Util para sistemas de diseno, marcas y temas visuales con recomendaciones de ajuste minimo.

Resultados de ejemplo

1 Ejemplos

Auditar una paleta de marca para WCAG AA

Revisa todas las combinaciones de primer plano y fondo e indica que colores necesitan ajuste

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
Ver parámetros de entrada
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

Datos clave

Categoría
Design
Tipos de entrada
textarea, select, checkbox
Tipo de salida
json
Cobertura de muestras
4
API disponible
Yes

Resumen

El Comprobador de contraste de paleta accesible es una herramienta diseñada para auditar combinaciones de colores según las normativas WCAG 2.1 AA y AAA. Permite a los diseñadores y desarrolladores validar rápidamente sistemas de diseño, paletas de marca y temas visuales, identificando qué pares de colores no cumplen con los estándares de accesibilidad y ofreciendo recomendaciones de ajuste mínimo para garantizar una legibilidad óptima.

Cuándo usarlo

  • •Al crear o actualizar un sistema de diseño para asegurar que todos los colores base sean accesibles desde el inicio.
  • •Durante auditorías de accesibilidad web para verificar si la paleta de colores actual de una marca cumple con las normativas WCAG.
  • •Al definir temas visuales como modos claro y oscuro para garantizar un contraste adecuado entre el texto y los fondos.

Cómo funciona

  • •Introduce los colores de tu paleta en formato de texto, asignando un nombre y un código hexadecimal a cada uno (por ejemplo, 'superficie: #FFFFFF').
  • •Selecciona el objetivo de accesibilidad deseado, como WCAG AA para texto normal (ratio 4.5:1) o AAA para máxima legibilidad.
  • •Opcionalmente, elige si deseas incluir la comparación de pares del mismo color en el análisis.
  • •La herramienta procesa todas las combinaciones posibles y devuelve un informe detallado con los pares que fallan y sugerencias de ajuste.

Casos de uso

Validación masiva de paletas de colores para nuevas identidades de marca antes de su lanzamiento.
Generación de informes de accesibilidad visual para clientes o equipos de desarrollo frontend.
Ajuste de variables de color en archivos CSS o Tailwind para cumplir con los requisitos legales de accesibilidad web.

Ejemplos

1. Auditoría de paleta de marca para WCAG AA

Diseñador UI/UX
Contexto
Un diseñador está creando un nuevo sistema de diseño y necesita asegurarse de que los colores principales de la marca sean legibles sobre fondos claros y oscuros.
Problema
Verificar manualmente docenas de combinaciones de colores es lento y propenso a errores.
Cómo usarlo
Pega la lista de colores en 'Colores de la paleta' y selecciona 'AA Normal Text (4.5:1)' como objetivo.
Configuración de ejemplo
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
Resultado
La herramienta genera un JSON que indica que hay 12 combinaciones posibles, de las cuales 4 fallan, y sugiere ajustar el 'brand-secondary' sobre 'surface'.

2. Verificación de contraste para modo oscuro (AAA)

Desarrollador Frontend
Contexto
El equipo de desarrollo está implementando un tema oscuro estricto para una aplicación gubernamental que exige el nivel máximo de accesibilidad.
Problema
Garantizar que el texto gris claro sobre fondos oscuros cumpla con el estricto ratio de 7:1.
Cómo usarlo
Introduce las variables del modo oscuro y cambia el 'Objetivo WCAG' a 'AAA Normal Text (7:1)'.
Configuración de ejemplo
bg-dark: #121212
card-dark: #1E1E1E
text-muted: #9CA3AF
text-light: #F9FAFB
Resultado
El informe revela que 'text-muted' sobre 'card-dark' no alcanza el ratio 7:1, permitiendo al desarrollador aclarar el texto antes de enviar el código a producción.

Probar con muestras

design
Ejemplos de Códigos de Color
Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación
title token color
sample
Ejemplos Storybook
Ejemplos completos de Storybook para desarrollo de componentes, testing, documentación y gestión de sistemas de diseño
keywords design,system
sample
Muestras de Analizador de Rutas
Colección integral de rutas del sistema de archivos de Windows, Linux y macOS para análisis y pruebas de rutas
task analyze
sample
Ejemplos SVG
Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG
keywords design
sample

Hubs relacionados

Herramientas de Design para Convert
Explora 98 herramientas de design para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Design para Generate
Explora 19 herramientas de design para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Validation para Validate
Explora 16 herramientas de validation para flujos de validate y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué es el estándar WCAG AA y AAA?

Son niveles de conformidad de las Pautas de Accesibilidad para el Contenido Web. AA requiere un contraste de 4.5:1 para texto normal, mientras que AAA exige 7:1.

¿Cómo debo formatear los colores de entrada?

Debes ingresar un color por línea, usando el formato 'nombre: #hexadecimal', por ejemplo, 'texto: #111827'.

¿La herramienta sugiere nuevos colores?

Sí, el informe identifica las combinaciones que no cumplen el estándar y proporciona recomendaciones de ajuste mínimo para alcanzar el contraste necesario.

¿Puedo probar colores para textos grandes?

Sí, puedes seleccionar objetivos específicos como 'AA Large Text' (ratio 3:1) o 'AAA Large Text' (ratio 4.5:1) en la configuración.

¿Qué significa incluir pares del mismo color?

Es una opción que evalúa el contraste de un color contra sí mismo, útil en casos muy específicos de pruebas de componentes superpuestos, aunque normalmente se mantiene desactivada.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/accessible-color-palette-contrast-checker

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
paletteInput textarea Sí -
minimumTarget select No -
includeSelfPairs checkbox No -

Formato de respuesta

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Datos JSON: Datos JSON

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "Audita combinaciones de color segun WCAG 2.1 AA y AAA y propone ajustes",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]