# Comprobador de accesibilidad de vision del color Mide contraste WCAG, simula deficiencias visuales y marca zonas de bajo contraste en capturas UI. > Página canónica: https://elysiatools.com/es/tools/color-vision-accessibility-checker - **Categoría:** Design - **Palabras clave:** daltonismo, accesibilidad, wcag, contraste ## Descripción general 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. ## Entradas - **Color de primer plano** (color) - **Color de fondo** (color) - **Imagen de diseno** (file) - **Nivel WCAG** (select) ## 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. ## 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. ## Herramientas relacionadas - [Verificador de accesibilidad](https://elysiatools.com/es/tools/accessibility-checker): Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables - [Extractor de paleta de color desde imagen](https://elysiatools.com/es/tools/image-color-palette-extractor): Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste - [Analizador de imagen VP8](https://elysiatools.com/es/tools/vp8-image-analyzer): Analiza imagenes WebP/VP8 con Sharp, genera un mapa gris de desplazamiento y renderiza un relieve 3D con Three.js - [Generador de heatmap de accesibilidad](https://elysiatools.com/es/tools/accessibility-heatmap-generator): Genera un heatmap de accesibilidad enfocado en contraste desde una captura o HTML y sugiere colores de parche - [Extractor de Canales de Imagen](https://elysiatools.com/es/tools/image-channel): Extrae, manipula y analiza canales de color individuales (RGB, Alpha, Luminancia) con opciones de procesamiento profesional - [Extractor de Colores de Imagen](https://elysiatools.com/es/tools/image-color-extractor): Extrae colores dominantes de imágenes usando varios algoritmos incluyendo clustering k-means y análisis de histograma - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Gradación de Color Cinematográfico](https://elysiatools.com/es/tools/image-cinematic-color): Aplique graduación de color cinematográfico profesional a sus imágenes. ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Rust](https://elysiatools.com/es/samples/web-image-processing-rust): Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Generadores de efectos CSS, paletas y tokens de diseno](https://elysiatools.com/es/hubs/design-generate): Herramientas reunidas para efectos visuales CSS, construccion de paletas y generacion de tokens de diseno en un solo hub. - [Herramientas de auditoria de accesibilidad web y color accesible](https://elysiatools.com/es/hubs/web-accessibility-audits): Revisa problemas WCAG, orden de lector de pantalla, fallos de contraste, riesgo de vision cromatica y elecciones de color accesible en un solo hub para flujos de accesibilidad web. - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de limpieza, acabado y preparacion por lotes de imagenes](https://elysiatools.com/es/hubs/image-utility): Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.