Comprobador de accesibilidad de color + tamaño de fuente
Obtén un resultado definitivo de aprobado/suspendido en WCAG para tu configuración exacta de fuente. Introduce los colores de primer plano y fondo y, después, ajusta el tamaño y el grosor de fuente: la herramienta aplica automáticamente el umbral WCAG correcto (el texto grande ≥18 pt / ≥14 pt en negrita necesita 3:1; el texto normal necesita 4,5:1). La vista previa en vivo muestra exactamente cómo se verá tu texto. Totalmente privado, 100 % gratis y sin registro.
Color Presets
#000000 · rgb(0, 0, 0)
#FFFFFF · rgb(255, 255, 255)
Font Settings
Quick Font Presets
Live Preview
The quick brown fox jumps over the lazy dog. Accessibility matters for everyone.
16px / weight 400 - Normal text (WCAG)
21.00:1
Excellent contrast · Passes WCAG AAA (normal text requires 7:1). Excellent contrast.
WCAG normal text threshold applies. Suggested text color for this background: #ffffff
¿Por qué usar nuestro comprobador de accesibilidad de color + tamaño de fuente?
- Tiene en cuenta tamaño y grosor de fuente: a diferencia de los comprobadores de contraste básicos, esta herramienta tiene en cuenta tu tamaño y grosor de fuente exactos para determinar el umbral WCAG correcto. El texto grande (≥18 pt o ≥14 pt en negrita) solo necesita 3:1 para AA, mientras que el texto normal necesita 4,5:1; la herramienta lo gestiona automáticamente.
- Resultados instantáneos de aprobado/suspendido en WCAG: consulta el resultado definitivo de aprobado/suspendido para WCAG AA y AAA con cada cambio en los valores. El medidor de contraste visualiza dónde cae tu ratio respecto a los umbrales WCAG, y la vista previa en vivo muestra exactamente cómo se verá tu texto con el tamaño y el grosor indicados.
- 100 % privado - sin subidas: todos los cálculos de contraste se ejecutan localmente en tu navegador con la fórmula oficial de luminancia relativa de WCAG 2.1. Tus valores de color y ajustes de texto nunca abandonan tu dispositivo.
- Gratis y sin límites: comprueba combinaciones de color y ajustes de fuente ilimitados sin registro, sin suscripción y sin límites de uso. El comprobador de accesibilidad de tamaño de fuente es totalmente gratuito para siempre, sin anuncios que bloqueen la interfaz.
¿Qué es el comprobador de accesibilidad de color + tamaño de fuente?
El comprobador de accesibilidad de color + tamaño de fuente es una herramienta combinada de evaluación del contraste WCAG que tiene en cuenta no solo los colores de primer plano y fondo, sino también el tamaño y el grosor de la fuente de tu texto. WCAG 2.1 define requisitos de contraste distintos para el texto normal y el texto grande: el texto grande (≥18 pt normal o ≥14 pt en negrita) solo necesita un ratio de 3:1 para cumplir AA, mientras que el texto normal necesita 4,5:1. Esta herramienta determina automáticamente qué umbral se aplica según tu configuración exacta de fuente, ofreciéndote un resultado preciso y definitivo de aprobado/suspendido para tu caso concreto.
Cómo funciona nuestro comprobador de accesibilidad de tamaño de fuente
- Introduce tus colores: escribe o pega valores HEX o RGB para los colores de primer plano (texto) y fondo. También puedes usar el selector de color nativo o elegir entre las combinaciones de color predefinidas para empezar rápido.
- Ajusta tamaño y grosor de fuente: ajusta el control deslizante de tamaño de fuente (8-72 px) y selecciona un grosor de fuente en los botones. Usa las fuentes predefinidas rápidas para tamaños comunes como texto de cuerpo (16 px), encabezados (28 px) o leyendas (11 px).
- Obtén resultados definitivos: la herramienta calcula el ratio de contraste WCAG y aplica automáticamente el umbral correcto según tu configuración de fuente. La vista previa en vivo muestra exactamente cómo se verá tu texto y las insignias de aprobado/suspendido te dan un estado claro de cumplimiento AA y AAA.
Texto grande vs texto normal en WCAG
- Texto normal (<18 pt normal / <14 pt en negrita): requiere un ratio de contraste mínimo de 4,5:1 para WCAG AA y 7:1 para WCAG AAA. El texto de cuerpo, las etiquetas, las leyendas y la mayoría del texto de la interfaz entra en esta categoría.
- Texto grande (≥18 pt / 24 px normal o ≥14 pt / 18,67 px en negrita): requiere un ratio de contraste mínimo de 3:1 para WCAG AA y 4,5:1 para WCAG AAA. Los encabezados, los destacados grandes y la tipografía de display suelen calificar como texto grande.
- ¿Por qué la diferencia? El texto más grande tiene trazos más gruesos y más superficie, lo que lo hace más fácil de leer incluso con ratios de contraste menores. WCAG lo tiene en cuenta fijando umbrales más bajos para el texto grande.
Limitaciones importantes
El comprobador de accesibilidad de tamaño de fuente evalúa los ratios de contraste según los umbrales matemáticos de WCAG 2.1. Aprobar la comprobación del ratio de contraste no garantiza la accesibilidad completa: el cumplimiento de WCAG también exige HTML semántico correcto, navegación por teclado, compatibilidad con lectores de pantalla, gestión del foco y otros factores no relacionados con el color. Además, la fórmula de contraste de WCAG no contempla todos los tipos de deficiencia en la visión del color. La validación completa de la accesibilidad requiere pruebas manuales con tecnologías de asistencia y una revisión experta en accesibilidad. Prueba siempre tus diseños con usuarios reales y tecnologías de asistencia como parte de tu flujo de accesibilidad.
Preguntas frecuentes
Un comprobador de accesibilidad de color + tamaño de fuente combina el cálculo del ratio de contraste WCAG con la evaluación del tamaño y el grosor de la fuente. En lugar de asumir que todo el texto necesita 4,5:1, tiene en cuenta si tu texto califica como «texto grande» (≥18 pt normal o ≥14 pt en negrita) según WCAG 2.1, que solo necesita 3:1 para AA. Esto te da un resultado preciso de aprobado/suspendido para tu estilo exacto de texto.
WCAG 2.1 define el texto grande como mínimo 18 puntos (24 px) en grosor normal, o al menos 14 puntos (aproximadamente 18,67 px) en negrita. El comprobador de accesibilidad de tamaño de fuente aplica automáticamente este umbral según el tamaño y el grosor que introduzcas; no necesitas consultar las reglas manualmente.
El texto más grande tiene trazos más gruesos y ocupa más superficie visual, lo que lo hace más fácil de leer incluso con ratios de contraste más bajos. WCAG lo tiene en cuenta estableciendo umbrales más bajos: 3:1 para texto grande en AA en lugar de 4,5:1. Por eso los encabezados a veces pueden aprobar AA con colores que suspenderían en el texto del cuerpo.
La herramienta lo calcula automáticamente. El texto normal (por debajo del umbral de texto grande) necesita 4,5:1 para AA y 7:1 para AAA. El texto grande (en o por encima del umbral) necesita 3:1 para AA y 4,5:1 para AAA. Solo tienes que introducir el tamaño y el grosor de fuente y la herramienta muestra el ratio requerido correcto.
Por supuesto. Todos los cálculos de contraste se ejecutan 100 % en el lado del cliente en tu navegador con la fórmula oficial de luminancia relativa de WCAG 2.1. Nunca se envía a ningún servidor ningún dato de color, configuración de fuente ni cualquier otra información.
Sí. Es 100 % gratuito, sin registro, sin funciones premium y sin límites de uso. Comprueba combinaciones ilimitadas de color y fuente sin ninguna restricción.
La herramienta admite colores HEX (#RGB, #RRGGBB, #RRGGBBAA) y valores RGB/RGBA (rgb(r,g,b) y rgba(r,g,b,a)). También puedes usar el selector de color nativo para elegir visualmente cualquier color. La herramienta muestra los equivalentes en HEX y RGB del color seleccionado.
No. Aprobar la comprobación del ratio de contraste es un requisito importante del cumplimiento de WCAG, pero la accesibilidad completa también exige HTML semántico correcto, navegación por teclado, compatibilidad con lectores de pantalla, gestión del foco, color adecuado más allá del contraste (por ejemplo, no depender solo del color para transmitir información) y muchos otros factores. El comprobador de accesibilidad es una útil primera herramienta, pero la validación completa de WCAG requiere pruebas manuales con tecnologías de asistencia.