Texto en el verificador de antecedentes

• Análisis instantáneo de legibilidad del texto: el texto en el verificador de antecedentes actualiza cada valor con cada pulsación de tecla, sin necesidad de presionar ningún botón. Ingrese cualquier color de primer plano y de fondo y obtenga la relación de contraste WCAG, el estado de aprobación/rechazo AA/AAA y una vista previa del texto en vivo de inmediato. Intercambia colores o prueba pares preestablecidos con un solo clic.
• Tamaño y peso de fuente ajustables: alterne entre escalas de texto estándar WCAG (texto pequeño (normal), texto grande, negrita pequeña y negrita grande) o establezca tamaños de fuente personalizados de 12 px a 48 px y pesos de fuente de 400 a 700. Vea exactamente cómo cambia la legibilidad a medida que ajusta estos parámetros, con una vista previa del texto en vivo en el tamaño seleccionado.
• Cálculos que cumplen con WCAG 2.1: todos los cálculos de contraste utilizan la fórmula de luminancia relativa y los valores de umbral oficiales de WCAG 2.1. El verificador evalúa el cumplimiento AA (4,5:1 para texto normal, 3:1 para texto grande) y AAA (7:1 para texto normal, 4,5:1 para texto grande) con insignias claras de aprobado/no aprobado.
• 100% gratis: no es necesario registrarse: el texto del verificador de antecedentes es completamente gratuito, sin registro, suscripción ni límites de uso. Todos los cálculos se ejecutan localmente en su navegador: sus colores y texto nunca abandonan su dispositivo. No hay anuncios que bloqueen la interfaz.

• Cumplimiento de accesibilidad web: los desarrolladores de frontend utilizan el texto del verificador de antecedentes para verificar que sus opciones de color cumplan con los requisitos WCAG AA o AAA antes del envío. Pruebe el texto del cuerpo, los títulos y las etiquetas de los botones con sus tamaños y pesos de fuente reales para garantizar que no lleguen problemas de accesibilidad a producción.
• Validación de color del sistema de diseño: los encargados del mantenimiento del sistema de diseño utilizan el texto del verificador de antecedentes para validar cada par de colores en su biblioteca de tokens de diseño. Pruebe combinaciones primarias, secundarias, de texto y de fondo en diferentes escalas de texto para garantizar una accesibilidad constante en toda la biblioteca de componentes.
• Auditoría y corrección de WCAG: los auditores de accesibilidad utilizan el texto del verificador de antecedentes para documentar y corregir fallas de contraste. La vista previa en vivo y las insignias claras de aprobación/rechazo facilitan demostrar problemas a las partes interesadas y probar los cambios de color propuestos antes de implementarlos.
• Diseño móvil y responsivo: los diseñadores móviles utilizan el texto en el verificador de fondo para probar la legibilidad en diferentes tamaños de pantalla. El texto pequeño (14 px) en fondos móviles necesita una relación de contraste más alta de 4,5:1, mientras que los títulos grandes de 24 px pueden usar el umbral de 3:1; el verificador maneja ambos escenarios.
• Correo electrónico y publicación digital: los diseñadores de correo electrónico y los editores digitales utilizan el texto en el verificador de antecedentes para garantizar que sus boletines y artículos sean legibles. Con diferentes colores de fondo y tamaños de texto en las secciones, el verificador ayuda a mantener la accesibilidad mientras utiliza los colores de la marca.
• Panel y visualización de datos: los analistas de datos y los diseñadores de paneles utilizan el texto del verificador de antecedentes para verificar que las etiquetas, leyendas y anotaciones sigan siendo legibles en comparación con los fondos de los gráficos. El modo de tamaño de fuente personalizado permite realizar pruebas con los tamaños exactos utilizados en las visualizaciones de datos.

El contraste del texto sobre el fondo mide la diferencia en el brillo percibido entre el texto y su fondo. Las WCAG (Pautas de accesibilidad al contenido web) definen una fórmula de relación de contraste que cuantifica esta diferencia en una escala de 1:1 (sin contraste, por ejemplo, texto negro sobre fondo negro) a 21:1 (contraste máximo, por ejemplo, texto negro sobre fondo blanco). La proporción mínima aceptable depende del tamaño del texto y de si el texto está en negrita: nuestro verificador de texto en segundo plano evalúa todos estos factores automáticamente.

1. Ingrese sus colores: escriba o elija un color de primer plano (texto) y un color de fondo usando las entradas de color o el selector de color. Todo el procesamiento se ejecuta localmente en su navegador: sus colores nunca abandonan su dispositivo. Utilice los botones preestablecidos para pares de colores comunes o el botón de intercambio para intercambiar el primer plano y el fondo.
2. Seleccione el tamaño y el peso del texto: elija entre las escalas de texto estándar WCAG: Texto pequeño (normal), Texto grande, Negrita pequeña o Negrita grande, o cambie al modo Personalizado para obtener un control preciso del tamaño de fuente (12 px-48 px) y del peso (400-700). El verificador utiliza automáticamente los valores de umbral WCAG correctos según su selección.
3. Lea los resultados: la relación de contraste se muestra de manera destacada en la parte superior con un indicador de calidad codificado por colores (excelente, bueno, moderado o deficiente). Las insignias de aprobado/reprobado para WCAG AA y AAA muestran si su texto cumple con los requisitos de accesibilidad. La vista previa de texto en vivo le permite ver exactamente cómo se ve su texto en el tamaño y peso seleccionados.

• Texto pequeño (normal): texto del cuerpo, etiquetas y subtítulos con un grosor inferior a 18 pt (24 px) o menos de 14 pt (18,67 px) en negrita. Requiere una relación de contraste de 4,5:1 para cumplimiento AA y de 7:1 para cumplimiento AAA. Esta es la categoría de texto más común en la web.
• Texto grande: Texto de al menos 18 puntos (24 px) de peso normal, o al menos 14 puntos (18,67 px) de peso en negrita. Los títulos suelen calificarse como texto grande. Requiere una relación de contraste de 3:1 para cumplimiento AA y 4,5:1 para cumplimiento AAA. El texto grande tiene requisitos menores porque es más fácil de leer.
• Tamaños personalizados: el verificador utiliza la definición WCAG para determinar qué umbral se aplica. Si su combinación personalizada de tamaño y peso de fuente cumple con la definición de texto grande (24 px normal o 18,67 px en negrita), los umbrales de texto grande más indulgentes se utilizan automáticamente.

Comience con un alto contraste: texto negro sobre fondo blanco (21:1) es la combinación más legible. Si bien los colores de la marca son importantes, pruébelos siempre con sus antecedentes. Un error común es usar texto gris claro sobre fondos blancos; incluso el gris medio (#767676) sobre blanco solo logra una proporción de 4,0:1, lo que no cumple con el requisito AA de 4,5:1 para texto normal.

Considere el tamaño del texto al elegir los colores: puede utilizar relaciones de contraste más bajas para títulos grandes (mínimo 3:1 AA) y al mismo tiempo mantener un contraste más alto para el cuerpo del texto (mínimo 4,5:1 AA). Esto permite una mayor flexibilidad de diseño para mostrar texto y al mismo tiempo mantener accesible el contenido principal. Proporcione siempre colores de texto sugeridos con la recomendación de blanco y negro del verificador cuando un color de fondo sea demasiado claro u oscuro.

Pruebe con contenido real: utilice la vista previa del texto editable para probar con su copia real. El verificador le permite escribir cualquier texto y verlo representado en el tamaño y peso seleccionados, brindándole una representación real de cómo verá su contenido los usuarios.