Color Tools

Verificador de Contraste

Verificar ratios de contraste de color para cumplimiento WCAG. Verificar estándares AA y AAA.

Parte de las 445+ herramientas gratuitas de Yoopla.

Muestra Heading

Este es texto normal (18px). El veloz zorro marrón salta sobre el perro perezoso.

Este es un texto pequeño (14 px). El veloz zorro marrón salta sobre el perro perezoso.

Contraste Relación

21.00:1
WCAG AA - Texto normal
PASS (Minimum: 4.5:1)
WCAG AA - Texto grande
PASS (Minimum: 3:1)
WCAG AAA - Texto normal
PASS (Minimum: 7:1)

WCAG Guidelines

AANormal: 4.5:1 minimum for text smaller than 18pt (or 14pt bold).

AA grande: 3:1 minimum for text 18pt+ (or 14pt+ bold).

AAA: 7:1 minimum for enhanced accessibility.

Importancia: Un buen contraste garantiza la legibilidad para usuarios con discapacidad visual.

How to Use Verificador de Contraste

  1. 1

    Elegir color texto.

  2. 2

    Elegir color fondo.

  3. 3

    Ver ratio.

  4. 4

    Verificar WCAG.

  5. 5

    Ver vista previa.

Frequently Asked Questions

¿Qué es el ratio de contraste WCAG?

WCAG (Pautas de Accesibilidad al Contenido Web) define ratios mínimos de contraste para texto legible. Texto normal necesita 4.5:1 (AA) o 7:1 (AAA). Texto grande necesita 3:1 (AA) o 4.5:1 (AAA).

¿Por qué es importante el contraste de color?

El buen contraste asegura que el texto sea legible para todos, incluyendo personas con baja visión o daltonismo. Es legalmente requerido para muchos sitios web y mejora la experiencia del usuario para todos.

¿Qué colores tienen buen contraste?

Negro sobre blanco (21:1) es el contraste máximo. Azul oscuro sobre blanco, blanco sobre gris oscuro y púrpura oscuro sobre amarillo claro funcionan bien. Evite gris claro sobre blanco o azul oscuro sobre negro.

¿Este verificador es gratuito?

Sí, este verificador de contraste WCAG es completamente gratuito y verifica contraste de color al instante para diseño accesible.

Compartir herramienta

Comparte esta herramienta con otros

Related Tools

Explora el ecosistema alrededor de

Categoría: Color Tools

Usa esta herramienta como punto de partida y luego avanza a herramientas cercanas, hubs temáticos, comparaciones y alternativas gratuitas.

Herramientas Relacionadas

Descubre otras herramientas que funcionan genial con Verificador de Contraste

Hubs Temáticos

Profundiza en páginas pilar y flujos de trabajo conectados

Artículos y Guías Relacionadas

Aprende más sobre el uso efectivo de herramientas

Comparaciones de Herramientas

Compara características y elige la herramienta adecuada

Colecciones de Mejores Herramientas

Listas curadas de herramientas mejor valoradas

Verificador de Contraste | Yoopla