AbstractPrisma
Accesibilidad

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

Relación21.0:1
Texto normal AA
Pasa
Texto normal AAA
Pasa
Texto grande AA
Pasa
Texto grande AAA
Pasa

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.

Criar app com IA

¿Te resultó útil esta herramienta?

Sé el primero en valorar

Cómo verificar el contraste de colores

  1. 1

    Define texto y fondo

    Elige el color del texto y el color de fondo que deseas evaluar.

  2. 2

    Mira la relación de contraste

    La herramienta muestra la relación y si pasa los niveles WCAG AA y AAA.

  3. 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.

¿El uso básico es gratuito?

Sí. La herramienta ofrece uso básico gratuito para probar el flujo principal y ver el resultado esencial. Exportaciones avanzadas, informes completos, lotes o recursos conectados al Studio pueden requerir desbloqueo. Los suscriptores pagos no tienen bloqueo cuando el recurso está incluido en su plan.

¿Necesito una cuenta para ver el resultado?

El resultado principal está disponible en el flujo público de la herramienta. En algunos casos, informes, descargas avanzadas, conversiones extra o kits completos pueden pedir un contacto o una acción rápida. Así evitamos prometer ausencia de registro cuando existe lead gate.

Verificador de contraste para accesibilidad web y WCAG 2.1

Garantiza diseño inclusivo y prueba la legibilidad con nuestro verificador de contraste online. Comprueba si las combinaciones de texto y fondo cumplen WCAG 2.1 (AA y AAA) para texto normal y grande. Esencial para diseñadores y developers frontend que quieren sitios accesibles.

Por qué usar esta herramienta

  • Prueba de contraste de colores en tiempo real
  • Conformidad WCAG 2.1 para AA y AAA
  • Indicadores Pass/Fail por criterio
  • Accesibilidad web sin herramientas pagas
  • Previsualización del par de colores con texto de ejemplo
  • Ideal para design systems y revisión de interfaces

Cómo usar

  1. Selecciona el color del texto y el color de fondo
  2. Consulta la razón de contraste y los badges AA/AAA
  3. Ajusta los colores hasta aprobar los niveles deseados
  4. Usa la previsualización para validar la legibilidad

Preguntas frecuentes

¿Qué es WCAG 2.1 y por qué importa el contraste?
WCAG 2.1 son directrices de accesibilidad web. El contraste garantiza que texto y fondo tengan diferencia suficiente para lectura en distintas condiciones.
¿La herramienta sirve para diseño inclusivo?
Sí. El test sigue cálculos de luminancia relativa y razón de contraste para validar paletas antes de producción.
¿Necesito cuenta o instalación?
No. El verificador funciona en el navegador. Elige colores y mira los resultados.