Kit de Diseño Accesible.
Los dos detalles de diseño que hacen que tu marca se vea profesional y se lea bien: verifica el contraste de tus colores contra los estándares WCAG y genera una escala tipográfica armónica, en una sola herramienta.
Contraste de color
Ratio de contraste
0
-AA (mínimo)
-
AAA (óptimo)
-
-
Cómo se calcula el contraste.
El contraste se mide como un ratio entre la luminancia del color más claro y la del más oscuro, de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Las pautas WCAG fijan mínimos según el tamaño del texto: mientras más chico y fino, más contraste necesita para leerse con comodidad.
El texto grande es de 18px (o 14px en negrita) hacia arriba. Cumplir el contraste no solo es accesibilidad: un texto legible sube la comprensión y la conversión para todos.
Preguntas frecuentes.
¿Qué es el ratio de contraste?
Es la relación entre la luminancia del color de texto y la del fondo. Va de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). Cuánto más alto, más legible.
¿Qué diferencia hay entre AA y AAA?
AA es el estándar recomendado para la mayoría de los sitios (4,5:1 en texto normal). AAA es el nivel más exigente (7:1) y se busca cuando la accesibilidad es prioritaria.
¿Por qué el texto grande exige menos contraste?
Porque las letras más grandes y gruesas se distinguen mejor aunque el contraste sea algo menor, así que la norma baja el mínimo a 3:1 en AA.
¿El contraste afecta el SEO o la conversión?
De forma indirecta sí: un texto legible mejora la experiencia, baja el rebote y hace tu contenido usable para más personas, y la accesibilidad es una señal de calidad.
¿Qué es el contraste de color WCAG?
Es la relación de luminosidad entre un texto y su fondo, que define si se lee con comodidad. Las pautas WCAG fijan mínimos para que el contenido sea accesible.
¿Qué ratio de contraste necesito para cumplir AA y AAA?
Para nivel AA, 4,5:1 en texto normal y 3:1 en texto grande. Para el nivel AAA, más exigente, 7:1 y 4,5:1 respectivamente.
¿Por qué importa el contraste para la accesibilidad y el SEO?
Un buen contraste hace tu contenido legible para más personas (incluidas las de baja visión) y mejora la experiencia, que a su vez influye en tus señales de calidad. Además, es un requisito legal en muchos contextos.
¿Qué es una escala tipográfica?
Es un conjunto de tamaños de fuente que crecen con una proporción constante, para que títulos y textos tengan una jerarquía visual armónica en vez de tamaños al azar. El kit la genera desde un tamaño base y una razón.
¿Cómo elijo los tamaños de fuente de un sitio?
Parte de un tamaño base cómodo de leer, de 16 a 18 px, y aplica una razón, por ejemplo 1,2 o 1,25, para derivar los tamaños mayores. Así cada nivel se ve proporcionado y consistente.
¿Qué razón usar en una escala tipográfica?
Una razón de 1,2 da una escala suave; 1,333 o más, una dramática con mucho contraste entre títulos y cuerpo. Cuanto mayor la razón, más marcada la jerarquía. El kit te deja probarlas en vivo.
Herramientas relacionadas.
El siguiente paso
Un sitio accesible es un sitio que convierte más.
El diseño accesible es parte de cómo Futture construye experiencias que rinden. Conversemos tu caso.