Guías
Cómo hacer el trabajo, y lo que medimos al construir la herramienta que lo hace.
Color
Colores complementarios, triádicos y análogos: cómo hacer legible cada armonía
Complementarios a 180°, triádicos a 120°, análogos a ±30°. Son relaciones de tono y ninguna garantiza contraste. Cómo crearlas con texto legible.
Cómo convertir HEX a RGB, HSL y OKLCH, y dónde pegar cada formato
Qué notación pegar en cada sitio: HEX para CSS, HEX sin # para Figma, RGB para transparencia, OKLCH para tokens y CMYK solo como punto de partida.
Cómo convertir un color de marca en tokens de diseño, del 50 al 950
De un hex de marca a una escala de once pasos y tokens de rol: qué paso es texto, borde y superficie, por qué tu hex no aparece y qué exportar.
Cómo extraer una paleta de colores de una foto y comprobar si sirve para texto
Extrae una paleta de una foto sin subirla: qué calculan Dominant, Distinct y Accessible, y por qué sus colores suelen fallar como texto sobre blanco.
Cómo generar una paleta de colores con contraste suficiente para texto
El contraste de un color sobre blanco por su contraste sobre negro siempre da 21: todos pasan con uno. Cómo crear una paleta que combine consigo misma.
Cómo crear una escala de colores personalizada en Tailwind que pase el contraste
Crea una escala de once pasos para Tailwind, expórtala como @theme de v4 o config de v3 y ve qué pasos pasan el contraste en blanco, negro y componentes.
Los colores de estado de Bootstrap y Tailwind fallan para personas con daltonismo
Medimos los colores de estado rojo y verde por defecto de Bootstrap y Tailwind con daltonismo simulado. Ambos pares quedan casi idénticos.
Cómo crear una paleta accesible a partir de un solo color de marca
Convierte un hex de marca en un sistema completo: escala de luminosidad, tokens semánticos y variantes clara y oscura que pasan el contraste.
Cómo crear una paleta de colores apta para daltónicos
Qué pares de colores resisten el daltonismo, cuáles se confunden y cómo crear una paleta categórica que funcione para todas las personas.
Cómo mejorar el contraste de color sin cambiar el color de tu marca
El contraste depende de la luminosidad, no del tono. Mueve el color de tu marca por su propio eje de luminosidad: sigue siendo tu marca y pasa WCAG.
Contraste en modo oscuro: por qué WCAG 2 te engaña
La fórmula de WCAG 2 suma una constante fija de destello que domina en el extremo oscuro: los pares oscuros pueden aprobar y aun así verse apagados.
OKLCH para diseñadores: por qué reemplazó a HSL
La luminosidad de HSL engaña. OKLCH es perceptualmente uniforme: los pasos iguales se ven iguales, ideal para escalas de color y corregir contraste.
Por qué el 83.9% de los sitios web no cumple con el contraste de color
La encuesta anual de WebAIM halló fallos de contraste en el 83.9% del millón de webs principales (antes, 79.1%). Hay verificadores: ¿por qué empeora?
Por qué el texto de cuerpo de 14px nunca puede aprobar APCA
APCA dice que 14px en peso regular es inutilizable con cualquier contraste, incluso negro puro sobre blanco. Te explicamos por qué y qué hacer.
¿Qué relación de contraste necesitas realmente?
Guía práctica de 4.5:1, 3:1 y 7:1: cuál se aplica en cada caso, qué cuenta como texto grande y las reglas que más se malinterpretan.
Cómo poner la verificación de contraste en CI para que falle el build
La revisión manual de contraste no escala y se salta cuando hay prisa. Así puedes validar tus tokens de diseño en una suite de pruebas.
WCAG 2 vs. APCA: ¿qué estándar de contraste deberías usar en 2026?
WCAG 2 es la referencia legal. APCA predice mejor la legibilidad. Así se diferencian, en qué discrepan y con cuál conviene publicar.
Tipografía
Cómo crear una escala tipográfica fluida con CSS clamp()
Cálculo completo de clamp() para una escala tipográfica fluida de 16px a 19px, y las pruebas de mayúsculas y longitud de línea que clamp() no hace.
Por qué 16px no son 16px: la altura de la x en 872 familias tipográficas
Altura x en 872 familias: de 0.351 a 0.84 em, mediana 0.500, el 19% más de un 10% bajo la referencia APCA. Igualar 16px de Helvetica exige 14.6 a 20.3 px.
Marca
Cómo hacer un manual de marca de una página, con las combinaciones de color que pasan
Qué necesita un manual de marca de una página y cómo armar la matriz de combinaciones: cuatro colores dan 12 pares, cada uno AA, solo grande o no pasa.
Tamaños de favicon: qué archivos necesitas de verdad y cómo crearlos
Los archivos de favicon que necesitas: un ICO, seis PNG de 16 a 512 píxeles, un manifiesto y cuatro etiquetas head, y cómo comprobar tu logo a 16px.
Cuánto de un código QR puede cubrir un logo: lo medimos
Todos los generadores dicen 30%. Unas 5 000 lecturas ponen el límite real en 4% para el nivel L y 19% para el H. Los datos y por qué 30% está mal.
Redacción
Cómo agregar números de página a un PDF desde cualquier página
Numera un PDF en tu navegador: deja la portada limpia y empieza en cualquier número, con la página inicial y el primer número por separado.
Cómo convertir fotos o escaneos en un solo PDF
Junta fotos JPEG o PNG en un solo PDF sin subirlas: ordena las páginas, elige A4 o ajustar a la imagen y evita páginas de lado o gigantes.
Cómo convertir las páginas de un PDF a JPG con la resolución correcta
PDF a JPG a 72, 150 o 300 dpi: los píxeles que da cada uno en A4 (2480 × 3508 a 300) y por qué 300 tiene cuatro veces los píxeles de 150.
Cómo convertir un PDF a Markdown para tus notas o un chat de IA
Convierte un PDF a Markdown con un encabezado por página, para notas o un chat de IA, y lo que no puede conservar: tablas, listas y títulos internos.
Cómo dividir un PDF en varios archivos o extraer un rango de páginas
Extrae las páginas 3 a 7 en un archivo, corta un documento en partes iguales o guarda cada página por separado, todo en el navegador y con sus límites.
Cómo extraer texto de un PDF y por qué algunos PDF no devuelven nada
Extrae el texto de un PDF en tu navegador. Un escaneo no da nada: no tiene capa de texto y esta herramienta no hace OCR. Las columnas pueden mezclarse.
Cómo poner una marca de agua en un PDF y qué puede y no puede impedir
Pon DRAFT o un nombre en cada página de un PDF desde el navegador, con la opacidad y el ángulo que funcionan, y por qué la marca no bloquea el archivo.
Cómo proteger un PDF con contraseña sin subirlo
Cifra un PDF con AES-256 en tu navegador y la contraseña nunca llega a un servidor. Contraseña de usuario y de propietario, RC4, qpdf y Preview.
Cómo quitar la contraseña de un PDF que ya puedes abrir
Quita la contraseña de un PDF que puedes abrir, en tu navegador. Por qué la herramienta necesita la contraseña, qué conserva la copia, Preview y qpdf.
Cómo recortar los márgenes de un PDF, y por qué recortar oculta en lugar de borrar
Recorta los márgenes de un PDF en puntos, en tu navegador. Recortar mueve el CropBox y deja el MediaBox y su contenido intactos: nunca es censura.
Cómo reordenar y eliminar páginas de un PDF
Reordena las páginas de un PDF arrastrándolas y bórralas con un clic sobre miniaturas en tu navegador. Revisa la nueva numeración antes de guardar.
Cómo rotar un PDF y guardarlo con la orientación correcta
Gira las páginas que están de lado en un PDF y guarda la rotación en el archivo, no solo en tu vista. Cómo se guarda, por qué falla, Preview y qpdf.
Cómo ver y eliminar el nombre del autor y otros metadatos de un PDF
Ve y borra el título, el autor y el asunto de un PDF sin subirlo, y descubre qué queda: palabras clave, creador, fechas y cualquier paquete XMP.
Cuánto ahorra realmente la compresión de PDF sin pérdida, medido en once archivos
Compresión sin pérdida en once PDF: el texto bajó de 0.8% a 6.5%, las imágenes menos de 0.05%; las páginas borradas seguían ahí hasta que lo corregimos.
Por qué unir un PDF cifrado puede dejarte páginas en blanco: lo medimos
Un PDF con AES-256 unido con pdf-lib original y con @cantoo/pdf-lib: uno dio tres páginas en blanco y 49 caracteres; el otro, el documento completo.
Vídeo y audio
Cómo extraer el audio de un video en MP3 sin subirlo
Extrae el audio de un MP4, MOV, WebM o MKV como MP3 en el navegador. Por qué se rechaza lo que pasa de 13 minutos, qué bitrate elegir y ffmpeg.
Cortar un video sin recodificar: dónde cae realmente el corte
Sin recodificar, el corte arranca en promedio 4.06 s antes con x264 por defecto y 0.46 s con keyframes cada 1 s. La lista de edición oculta el sobrante.
Video a GIF: cuántos bytes por píxel por cuadro ocupa, medido
50 cuadros a 480 × 270: una foto en movimiento en GIF pesa 0.644 bytes por píxel y cuadro, 53 veces el H.264; una grabación de pantalla, 0.111, 5.4 veces.
Conversores
Cómo ampliar una imagen sin que se vea borrosa, y lo que el escalado no puede hacer
Amplía con Lanczos3, compáralo con el escalador del navegador en tu propia imagen y detente en 4×: a 2×, tres de cada cuatro píxeles son interpolados.
Cómo comprimir un PNG sin perder calidad
oxipng deja cada píxel idéntico y aun así bajó un gráfico plano de 21 493 a 3 350 bytes y una foto un 14%. Qué promete la compresión sin pérdida.
Cómo convertir una imagen a un data URI en base64, y cuándo no hacerlo
Base64 suma un tercio fijo a cualquier archivo y lo incrustado no se cachea aparte. Cómo crear un data URI y el límite de 4 KB donde deja de compensar.
Cómo hacer un GIF animado con imágenes sin que pese demasiado
Un GIF guarda cada fotograma completo y su peso es píxeles × fotogramas × un costo que fija la imagen. Crea uno y mira el peso antes de exportar.
Cómo reducir el tamaño de un SVG sin romperlo
Reduce un SVG con SVGO sin que deje de funcionar: baja la precisión, conserva viewBox y el title, revisa tus ids y juzga por el tamaño con gzip.
Por qué los conversores de píxeles a pulgadas no coinciden y cuál es tu respuesta
Los mismos 1920 píxeles son 20 pulgadas en CSS, 26.67 a 72 ppi y 6.4 a 300 ppi. Por qué difieren los conversores y qué significado te sirve.
Cómo recortar, rotar y cambiar el tamaño de una imagen de una sola vez sin perder nitidez
Recorta, gira y redimensiona con una sola codificación. Por qué varias herramientas restan calidad, por qué reducir mucho difumina y qué hace Lanczos3.
Cuánto ahorra pasar de PNG a WebP, medido en once imágenes
PNG a WebP con calidad 0.82 en Chromium: las fotos bajaron de 92% a 97%, un logo plano 69%; los íconos menores de 128 px crecieron, hasta 116% a 16 px.