TeaFun Pulsa / para buscar
Colección
Comprueba ratios de contraste de color para cumplir WCAG, simula el daltonismo y calcula relaciones de aspecto: ayudas de diseño gratuitas que funcionan por completo en tu navegador.
3 herramientas en esta categoría
← InicioLos visuales accesibles y bien proporcionados empiezan con los números correctos. Esta colección reúne las herramientas de TeaFun que diseñadores, desarrolladores y creadores de contenido usan para comprobar la accesibilidad del color, simular condiciones de visión y fijar las proporciones correctas.
Tres herramientas para acertar con los números detrás de un diseño: un verificador de contraste WCAG, un simulador de daltonismo y una calculadora de relación de aspecto. El verificador toma un color de primer plano y uno de fondo e informa del ratio frente a los umbrales WCAG AA y AAA, para que sepas si el texto será legible en lugar de adivinarlo. El simulador de daltonismo aproxima cómo se ve una paleta para personas con tipos comunes de deficiencia de la visión del color. La calculadora de relación de aspecto mantiene las proporciones correctas al redimensionar o recortar. Son utilidades pequeñas y concretas: el tipo de comprobación que haces cerca del final de un diseño, no el lienzo en el que lo creas.
Usa el verificador de contraste siempre que haya texto sobre un fondo de color o de imagen: introduce ambos colores y confirma que el ratio alcanza al menos 4,5:1 para texto normal o 3:1 para texto grande o en negrita. Pasa el simulador de daltonismo por todo aquello donde el color transmite significado —un gráfico, un conjunto de insignias de estado, un estado de error de formulario— y asegúrate de que la información sobrevive sin el color, ya que una parte considerable de los usuarios tiene algún tipo de deficiencia de la visión del color. Recurre a la calculadora de relación de aspecto cuando necesites redimensionar sin distorsión: introduce una dimensión y la relación objetivo, y te da la otra.
La accesibilidad y la proporción son fáciles de errar a ojo. Una combinación de colores que se ve bien en tu monitor calibrado puede no pasar el contraste en un móvil a pleno sol, y una paleta que para ti es nítida puede venirse abajo para un usuario daltónico si el color es la única pista. Los ratios WCAG existen precisamente porque el juicio humano del contraste no es fiable. La proporción también cuenta: una imagen mal recortada o un vídeo estirado son ese tipo de defecto pequeño que la gente nota sin saber nombrarlo. Ninguna de estas herramientas diseña por ti: atrapan los errores medibles que un buen ojo aún puede pasar por alto, para que el trabajo aguante más allá de tu propia pantalla.
Revisa relaciones de contraste, cumplimiento AA/AAA, genera variantes de paleta y exporta tokens de color CSS o Tailwind v4 localmente.
Pon a prueba tu visión cromática con las láminas al estilo Ishihara optimizadas para gamers.
Calcula proporciones de imagen al instante. Convierte dimensiones, resuelve lados faltantes y consulta tamanos de imagenes para redes sociales 2025/2026.
El texto normal requiere un ratio de 4,5:1; el texto grande (18pt o más, o 14pt en negrita) requiere 3:1. El verificador de contraste WCAG muestra ambos umbrales y tu estado de aprobado o no al instante.
Aplica matrices de daltonización estándar a los colores de entrada para aproximar cómo se ven con distintos tipos de deficiencia de la visión del color, todo calculado en local en tu navegador.
No. Como algunos usuarios no distinguen ciertos colores, acompaña cada señal de color con una segunda: una etiqueta, un icono, un patrón o texto. El simulador te ayuda a comprobar si tu significado sobrevive cuando el color no lo hace.
Recortar o redimensionar a una relación equivocada distorsiona el contenido o fuerza bandas negras. Fijar una relación estándar como 16:9 o 1:1 mantiene todo en proporción y predecible en los distintos lugares donde se mostrará.