Verificador de Contraste de Accesibilidad
Verifica si los colores de texto y fondo cumplen los requisitos de contraste WCAG AA y AAA.
Colores
Relación de contraste
Vista previa
Texto de ejemplo sobre el fondo elegido
El veloz murciélago hindú comía feliz cardillo y kiwi.
Texto de cuerpo de ejemplo en tamaño normal. 0123456789
¿Cuál es la relación de contraste mínima para accesibilidad?
La relación de contraste mide la diferencia de luminancia entre el texto y el fondo. Las pautas WCAG fijan mínimos para que las personas con baja visión puedan leer: 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA. Un buen contraste también ayuda a leer bajo el sol y mejora la usabilidad para todos.
Mínimos de WCAG
- Texto normal: 4.5:1 (AA), 7:1 (AAA)
- Texto grande (18pt+ o 14pt bold): 3:1 (AA)
- Componentes de UI e iconos: 3:1
- Evita gris claro sobre blanco en textos pequeños
AbstractOS
¿Quieres un sitio realmente accesible?
Créalo en Prisma Studio con buenas prácticas de contraste y legibilidad desde el inicio.
¿Te resultó útil esta herramienta?
Sé el primero en valorar
Cómo verificar el contraste de colores
- 1
Define texto y fondo
Elige el color del texto y el color de fondo que deseas evaluar.
- 2
Mira la relación de contraste
La herramienta muestra la relación y si pasa los niveles WCAG AA y AAA.
- 3
Ajusta hasta aprobar
Refina los colores hasta alcanzar el contraste mínimo para buena legibilidad.
Preguntas frecuentes
¿Qué es la relación de contraste WCAG?
- Es la relación entre la luminancia del texto y del fondo. WCAG recomienda al menos 4,5:1 para texto normal (AA).
¿Cuál es la diferencia entre AA y AAA?
- AA exige 4,5:1 (texto normal) y AAA exige 7:1, un estándar de accesibilidad más estricto.
¿Por qué importa el contraste para el SEO?
- Una buena accesibilidad mejora la experiencia del usuario, una señal indirecta valorada por los buscadores.