Comprobador de accesibilidad de vision del color

Mide contraste WCAG, simula deficiencias visuales y marca zonas de bajo contraste en capturas UI.

Este verificador evalua tanto el cumplimiento del contraste como el comportamiento de un par de colores para usuarios con distintas deficiencias de vision del color.

Significado de las etiquetas:

  • AA normal: indica si la relacion de contraste cumple WCAG AA para texto de tamano normal. El umbral es 4.5:1.
  • AAA normal: indica si la relacion de contraste cumple WCAG AAA para texto de tamano normal. El umbral es 7:1.

Por que importa:

  • "Normal" se refiere al texto comun, etiquetas pequenas y la mayor parte del texto de interfaz.
  • El texto grande tiene umbrales menores: AA large pasa con 3:1 y AAA large con 4.5:1.
  • Por eso una combinacion puede fallar AAA normal y seguir siendo valida para titulos grandes o texto destacado.

Campos:

  • Color de primer plano: texto, icono o color principal colocado encima
  • Color de fondo: color de superficie que queda detras
  • Imagen de diseno: captura opcional para analizar regiones con bajo contraste
  • Nivel WCAG: controla el umbral usado para marcar zonas de riesgo en la imagen

Como leer el resultado:

  • Las tarjetas Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia muestran el par bajo cada simulacion.
  • La relacion de contraste se recalcula tras cada simulacion para ver si una combinacion segura en vision normal se vuelve riesgosa.
  • El analisis de capturas marca mosaicos cuyo contraste local cae por debajo del umbral seleccionado.

Resultados de ejemplo

1 Ejemplos

Revisar una paleta de boton para accesibilidad visual

Compara colores bajo WCAG y simulaciones antes de cerrar un tema UI.

Color vision accessibility report
Ver parámetros de entrada
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" }

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/webp

Datos clave

Categoría
Diseño y color
Tipos de entrada
color, file, select
Tipo de salida
html
Cobertura de muestras
4
API disponible
Yes

Resumen

Este comprobador de accesibilidad de visión del color te permite evaluar el contraste de tus paletas según los estándares WCAG y simular cómo las perciben usuarios con daltonismo u otras deficiencias visuales. Además de calcular las ratios para texto normal y grande, puedes subir capturas de pantalla de tus diseños para identificar automáticamente las zonas que no cumplen con los niveles de contraste AA o AAA.

Cuándo usarlo

  • •Al definir la paleta de colores principal de un nuevo sitio web o aplicación para asegurar que sea accesible desde el inicio.
  • •Antes de lanzar una actualización de interfaz de usuario para verificar que los nuevos botones y textos mantengan un contraste adecuado.
  • •Al auditar un diseño existente mediante capturas de pantalla para localizar rápidamente áreas problemáticas de bajo contraste.

Cómo funciona

  • •Introduce el 'Color de primer plano' (texto o icono) y el 'Color de fondo' utilizando códigos hexadecimales o el selector de color.
  • •Opcionalmente, sube una 'Imagen de diseño' (PNG, JPEG o WEBP) y selecciona el 'Nivel WCAG' (AA o AAA) para analizar la interfaz completa.
  • •Revisa los resultados para ver si la combinación aprueba los estándares WCAG para texto normal y grande.
  • •Observa las tarjetas de simulación (Protanopía, Deuteranopía, Tritanopía, Acromatopsia) para comprobar cómo cambia el contraste bajo diferentes condiciones visuales.

Casos de uso

Validación de sistemas de diseño y guías de estilo para garantizar el cumplimiento de normativas de accesibilidad web.
Revisión de componentes interactivos (como botones, alertas y formularios) para asegurar su legibilidad para usuarios con daltonismo.
Auditorías rápidas de accesibilidad visual en prototipos de alta fidelidad utilizando capturas de pantalla.

Ejemplos

1. Validación de un botón de llamada a la acción

Diseñador UI
Contexto
El equipo de diseño ha propuesto un nuevo botón azul oscuro con texto blanco para la página de inicio.
Problema
Asegurar que el contraste del botón sea suficiente para todos los usuarios y cumpla con el nivel AA.
Cómo usarlo
Introduce `#ffffff` como color de primer plano y `#1f2937` como color de fondo, seleccionando el nivel WCAG AA.
Configuración de ejemplo
{
  "foreground": "#ffffff",
  "background": "#1f2937",
  "wcagLevel": "AA"
}
Resultado
El reporte confirma que el ratio supera el 4.5:1 y muestra que el texto sigue siendo legible en todas las simulaciones de daltonismo.

2. Auditoría de contraste en un dashboard

Especialista en Accesibilidad
Contexto
Se ha detectado que algunos usuarios tienen dificultades para leer las etiquetas en un panel de control complejo.
Problema
Identificar rápidamente qué partes del dashboard no cumplen con los estándares de contraste AAA.
Cómo usarlo
Sube una captura del dashboard en 'Imagen de diseño' y selecciona 'AAA' en el nivel WCAG.
Configuración de ejemplo
{
  "wcagLevel": "AAA",
  "designImage": "dashboard_capture.png"
}
Resultado
La herramienta procesa la imagen y resalta en rojo los mosaicos donde el texto gris claro sobre fondo blanco no alcanza el ratio de 7:1.

Probar con muestras

image, png, jpg
Ejemplos de Procesamiento de Imágenes Windows C++
Ejemplos de procesamiento de imágenes Windows C++ incluyendo leer/guardar imágenes, redimensionamiento y conversión de formato usando Windows Imaging Component
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Web Rust
Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato
preferred input family image
image
Procesamiento de Imágenes macOS Objective-C - Ejemplos
Ejemplos de procesamiento de imágenes macOS Objective-C incluyendo lectura/escritura de imágenes, escalado de imágenes y conversión de formato
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Web Python
Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato
preferred input family image
image

Hubs relacionados

Herramientas de Image para Convert
Explora 100 herramientas de image para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Image
Explora 40 herramientas de image para flujos de utility 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é diferencia hay entre WCAG AA y AAA?

El nivel AA requiere un ratio de contraste de 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es más estricto, exigiendo 7:1 para texto normal y 4.5:1 para texto grande.

¿Qué significa 'texto grande' en las pautas WCAG?

Se considera texto grande a aquel que tiene al menos 18 puntos (o 14 puntos si está en negrita), lo que suele corresponder a títulos o encabezados destacados en la interfaz.

¿Por qué el contraste cambia en las simulaciones de daltonismo?

Las deficiencias visuales alteran la percepción de ciertos tonos (como el rojo y el verde). Una combinación que parece contrastada con visión normal puede volverse ilegible si ambos colores se perciben con una luminosidad similar.

¿Cómo funciona el análisis de la imagen de diseño?

La herramienta divide la imagen subida en pequeños bloques y calcula el contraste local. Si un bloque cae por debajo del umbral WCAG seleccionado, se marca como una zona de riesgo.

¿Qué formatos de imagen admite la herramienta?

Puedes subir capturas de pantalla o mockups en formato PNG, JPEG o WEBP, con un tamaño máximo de 10 MB.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/color-vision-accessibility-checker

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
foreground color Sí -
background color Sí -
designImage file (Subida requerida) No -
wcagLevel select No -

Los parámetros de tipo archivo necesitan ser subidos primero vía POST /upload/color-vision-accessibility-checker para obtener filePath, luego pasar filePath al campo de archivo correspondiente.

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

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

{
  "mcpServers": {
    "elysiatools-color-vision-accessibility-checker": {
      "name": "color-vision-accessibility-checker",
      "description": "Mide contraste WCAG, simula deficiencias visuales y marca zonas de bajo contraste en capturas UI.",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-vision-accessibility-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.

Soporte para enlaces de archivos URL o codificación Base64 para parámetros de archivo.

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