Back to Learning
📖

Text Readability

Learn about text readability principles

Introduction

Good text readability is critical for accessibility. Ensure text has sufficient contrast with the background.

Contrast

Good contrastDark text on light background or light text on dark background

Bad contrastLight text on light background or dark text on dark background

Font Size

Use large enough font size (minimum 16px for body text) and ensure sufficient line height for comfortable reading.

Best Practices

  • Use contrast of at least 4.5:1 for normal text
  • Avoid overly bright or dark combinations
  • Test readability on different devices

Legibilidad de texto: Guía completa de accesibilidad y comodidad de lectura

La legibilidad de texto es un aspecto fundamental de la accesibilidad de contenido web, determinando qué tan fácilmente los usuarios pueden percibir y comprender información. La mala legibilidad no solo degrada la experiencia del usuario, sino que también viola estándares de accesibilidad WCAG.

En esta guía detallada cubrimos todos los factores que afectan la legibilidad: contraste, tamaño de fuente, altura de línea, elección de fuente y combinaciones de color. Aprenderá a crear contenido de texto accesible para todos los usuarios.

Aprenderá a usar проверка контраста para verificar contraste de texto, aplicar проверка доступности текста para analizar legibilidad de texto en imágenes, y trabajar con симулятор цветовой слепоты para probar accesibilidad de combinaciones de color.

Contraste: Base de la legibilidad de texto

El contraste entre texto y fondo es el factor de legibilidad más importante. Los estándares WCAG requieren un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ en negrita).

Texto oscuro sobre fondo claro o texto claro sobre fondo oscuro crean buen contraste. Texto claro sobre fondo claro o oscuro sobre oscuro — mal contraste, haciendo el texto ilegible.

El contraste se calcula usando la fórmula de luminancia relativa. La herramienta проверка контраста calcula automáticamente el contraste y verifica el cumplimiento de estándares WCAG AA y AAA, ofreciendo recomendaciones de mejora.

Tamaño de fuente y altura de línea

El tamaño de fuente es crítico para la legibilidad. El tamaño mínimo recomendado para texto de cuerpo es 16px (1rem). Tamaños más pequeños dificultan la lectura, especialmente en dispositivos móviles.

La altura de línea debe ser suficiente para lectura cómoda. El valor recomendado es 1.5-1.6 del tamaño de fuente. Altura de línea demasiado pequeña hace el texto apretado, demasiado grande — fragmentado.

Al trabajar con texto en imágenes, es importante considerar no solo el contraste general, sino también el contraste local de cada píxel. La herramienta проверка доступности текста analiza la legibilidad de texto en cualquier imagen, considerando el contraste local y ofreciendo recomendaciones detalladas.

Mejores prácticas y pruebas

Para garantizar máxima legibilidad, use un contraste de al menos 4.5:1 para texto normal y 7:1 para nivel AAA. Evite combinaciones demasiado brillantes u oscuras que puedan causar fatiga visual.

Pruebe la legibilidad en diferentes dispositivos, tamaños de pantalla y condiciones de iluminación. Considere varios tipos de daltonismo: use симулятор цветовой слепоты para verificar cómo sus combinaciones de color son percibidas por personas con daltonismo.

Al crear sistemas de diseño, es importante predefinir pares de colores para texto y fondo que cumplan con estándares WCAG. Esto garantiza consistencia y accesibilidad en todo el proyecto.

Заключение

La legibilidad de texto no es solo estética, sino una necesidad para crear contenido web accesible e inclusivo.

Contraste correcto, tamaño de fuente y altura de línea hacen el contenido accesible para todos los usuarios, incluyendo personas con discapacidades visuales. Use herramientas modernas para verificar y mejorar la legibilidad en sus proyectos.