01 Proyectos 02 Conceptos 03 Apps 04 Utilidades 05 GameBob 06 Charlas

Mis mejores utilidades, ahora en tu móvil.

Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.

Calculadora de Legibilidad

No te bases solo en números obsoletos. Analiza el contraste de tus interfaces con APCA, el nuevo estándar perceptual que entiende la tipografía y el color como los ojos humanos.

Colores Base
#1E293B
#FFFFFF
Tipografía
16px
400
Comparativa de Contraste
WCAG 2.1 Ratio 21.0 Pasa AAA
APCA Lc (WCAG 3) 100 Pasa
Vista Previa Perceptual

La legibilidad visual no es solo matemática. Es cómo luz y sombra interactúan con tus ojos.

Recomendaciones APCA
Texto de Lectura (Body)
Texto Pequeño / Caption
UI / Botones
Estudio de Utilidades

¿Quieres tener esta utilidad en tu web?

Personaliza colores y modo oscuro para WordPress, Notion o tu propio sitio.

Preguntas Frecuentes

¿Qué es APCA y por qué es diferente a WCAG 2.1?
APCA es el Algoritmo de Contraste Perceptual Avanzado desarrollado para WCAG 3.0. A diferencia del antiguo ratio simple, APCA utiliza modelos matemáticos que imitan cómo el cerebro humano percibe el contraste, teniendo en cuenta la polaridad (fondo claro vs. oscuro) y el tamaño/grosor de las fuentes.
¿Qué significa el valor Lc?
Lc (Lightness Contrast) es el valor de contraste que genera APCA. Un valor de 100 representa un contraste máximo ideal, mientras que valores inferiores a 60 empiezan a ser críticos para textos de lectura continua. Es una escala de magnitud absoluta de la percepción.
¿Cómo influye el grosor de la fuente en la legibilidad?
Las fuentes delgadas (Thin/Light) requieren un contraste mucho mayor para ser legibles. APCA penaliza las fuentes de poco peso, indicando que un diseño que pasa WCAG con una fuente de 100 de grosor puede ser ilegible en la práctica.
¿Es esta calculadora privada?
Sí, todos los cálculos se realizan localmente en tu navegador. Los colores y configuraciones que analices nunca se envían a ningún servidor, garantizando total privacidad en tus proyectos de diseño.

# Calculadora de Legibilidad Visual (WCAG vs APCA)

Comprende cómo tus colores y tipografía afectan la lectura real con el nuevo estándar de accesibilidad perceptual.

# ¿Por qué importa el nuevo estándar APCA?

WCAG 2.1 usa una fórmula matemática simple de 2008. APCA es el nuevo modelo propuesto para WCAG 3.0 que imita la percepción humana. A diferencia del antiguo ratio, APCA entiende que el texto blanco sobre fondo oscuro se percibe distinto al texto oscuro sobre fondo claro, y que un texto más grueso "ayuda" a la vista incluso con menos contraste.

Puntos Clave de APCA

  • Polaridad: Entiende que el modo oscuro (Dark Mode) se percibe distinto al modo claro.
  • Grosor de Fuente: Asigna niveles de contraste (Lc) específicos según el peso de la tipografía.
  • Linealidad: Corrige las imprecisiones matemáticas de la luminancia relativa de 2008.

Niveles APCA Recomendados

  • Lc 90+: Ideal para texto muy pequeño o de poco peso.
  • Lc 75: El estándar para texto de lectura principal (Body).
  • Lc 60: Mínimo para contenido legible de tamaño medio.
  • Lc 45: Mínimo para elementos grandes o decorativos.

# Comparativa de Estándares

Característica WCAG 2.1 (Actual) APCA (WCAG 3)
Modelo Matemático Lineal Perceptual Humano
Prioridad Ratio de Luminancia Contraste Espacial
Considera Fuente Solo Tamaño Tamaño y Peso
Modo Oscuro Idéntico al Claro Optimizado Perceptualmente

Recursos sobre Contraste y APCA

Más utilidades de Desarrollo Web

Convertidor SVG a CSS

Transforma tus iconos vectoriales en código CSS optimizado (Background o Mask) para mejorar el rendimiento y la personalización de tu web.

usar herramienta

Calculadora Aspect Ratio

Calcula nuevas resoluciones de imágenes web y mantén proporciones perfectas en tus assets (16:9, 4:3, cuadrados...). Diseñado para proteger tus diseños UI.

usar herramienta

Generador Placeholder

Crea imágenes de prueba o bocetos con dimensiones y textos a medida al instante.

usar herramienta

URL Encoder & Decoder

Codifica caracteres especiales a un formato de web segura (Percent-Encoding) o decodifica rutas enrevesadas a texto legible para los humanos al vuelo.

usar herramienta

Limpiador CSS Duplicado

Analiza, unifica y purga todo tu código CSS redundante y repetido respetando reglas de cascada para optimizar tus hojas de estilo y ahorrar KBs al instante.

usar herramienta

CSS Inliner Pura

Transforma tu HTML de diseño bruto fusionando todas tus reglas de hojas de estilos externas y clases estáticas en HTML inyectado en línea (Email Safe).

usar herramienta

Especificidad CSS

Analiza el peso y la cascada de tus selectores CSS visualmente para evitar guerras de estilos.

usar herramienta

Generador de Cron

Crea y traduce expresiones cron a lenguaje humano de forma visual.

usar herramienta

JSON Formatter

Valida, repara y formatea JSON. Detección de errores en tiempo real.

usar herramienta

KeyCode Visualizer

Visualiza códigos de teclas JavaScript en tiempo real.

usar herramienta

Calculadora Costes LLM

Estima el precio de tus proyectos con GPT-4, Claude y Gemini.

usar herramienta

Tipografía Musical

Calculadora de escalas modulares armónicas para jerarquías tipográficas perfectas.

usar herramienta

Generador Mockups Móviles

Crea mockups profesionales de capturas para iPhone y Pixel con fondos personalizados.

usar herramienta

Generador de Hashes

Calcula potentes sumas de comprobación MD5, SHA-256 y SHA-512 al vuelo. Privacidad total con procesamiento nativo de seguridad en tu navegador.

usar herramienta

Biblioteca de Prompts

Guarda, organiza y etiqueta tus instrucciones favoritas de inteligencia artificial en un solo lugar. 100% privado en tu navegador.

usar herramienta

Conversor RGB, HEX & HSL

Transforma colores entre formatos web con precisión matemática. Genera armonías automáticas y analiza el contraste de accesibilidad WCAG.

usar herramienta

Saneador de SVG

Pega código SVG sucio de Figma o un inspector y obtén un SVG optimizado: sin metadatos, sin atributos de editor y con clases CSS limpias.

usar herramienta

Generador de UTM

Crea enlaces de seguimiento para tus campañas de marketing y mide el éxito de tu tráfico.

usar herramienta

Limpiador de Tracking URL

Elimina UTMs, fbclid, gclid y otros rastreadores de tus enlaces.

usar herramienta

Inspector de Certificados SSL

Analiza archivos .pem y .crt localmente para extraer fechas, emisores y huellas digitales. Privacidad total: el certificado nunca sale de tu equipo.

usar herramienta

Generador de Security.txt

Crea tu archivo security.txt según el estándar RFC 9116 para facilitar el contacto con investigadores de seguridad y proteger tu sitio web.

usar herramienta

Calculadora de Tiempo en Datos

Descubre cuánto tiempo pierden tus usuarios esperando Instagram, YouTube, TikTok y otras apps. Visualiza el impacto real: horas, días, años de vida perdidos en cargas.

usar herramienta

Excel/CSV a Tabla HTML

Transforma tus hojas de cálculo y archivos CSV en tablas HTML semánticas y limpias para tu web.

usar herramienta