Ir a la herramienta
JoeLucky

Haz clic en ★ para guardar una herramienta

Categorías de herramientas

Código a imagenGenerador de degradados CSSGlassmorphism CSSGenerador de box-shadowGenerador de loaders CSSGenerador de blobs SVGSVG a PNGVerificador de contraste de colorConversor PX / REM / EM
JoeLucky

Herramientas en línea prácticas, todas en un solo lugar

Política de privacidadTérminos del servicio

© 2026 JoeLucky®. Todos los derechos reservados.

  1. JoeLucky
  2. /CSS y diseño
  3. /Verificador de contraste de color

Verificador de contraste de color

Comprueba la relación de contraste WCAG entre dos colores y mira los resultados AA y AAA.

CSS Y DISEÑO SIMILARES

Ver todas
Código a imagen

Convierte fragmentos de código en capturas de pantalla atractivas.

Abrir →
Generador de degradados CSS

Diseña degradados lineales, radiales y cónicos y copia el CSS al instante.

Abrir →
Glassmorphism CSS

💬 Comentarios

?

Aún no hay comentarios. ¡Sé el primero!

¿QUÉ ES Verificador de contraste de color?

El verificador de contraste de color calcula la relación de contraste entre los colores de primer plano y de fondo con la fórmula WCAG, indicando si pasa AA/AAA para texto normal y grande.

Importante

  1. Aprobado/suspendido se muestra siempre con texto y un icono — nunca solo mediante el color.
  2. Esta herramienta solo comprueba un par de colores — aprobar no significa que una página entera cumpla WCAG.

¿Cómo se usa?

  1. Elige los colores de primer plano y de fondo (muestra o entrada hexadecimal).
  2. Revisa la vista previa en vivo y el resultado del contraste.

Preguntas frecuentes

¿Cumplir el nivel AA significa que mi página cumple las WCAG?

No necesariamente. Esta herramienta solo informa del cálculo bruto de la relación de contraste y de si cumple o no los cuatro umbrales; el cumplimiento real de las WCAG depende también del tamaño y el grosor de la fuente y de tu diseño en conjunto.

¿Por qué el resultado no se indica solo con color?

El color por sí solo (p. ej. un punto verde o rojo) no es accesible para las personas daltónicas, así que cada umbral muestra siempre un icono y una etiqueta de texto (Cumple/No cumple).

¿Cómo se trata un fondo semitransparente?

Un fondo transparente necesita un color extra de «fondo del lienzo» opaco; la herramienta usa la lógica de composición ya existente en el núcleo para calcular el color opaco resultante antes de calcular el contraste.

Texto de ejemplo — El veloz murciélago hindú comía feliz cardillo y kiwi
18.88:1Relación de contraste (fórmula WCAG)
Texto normal AA (≥ 4,5:1)Cumple
Texto normal AAA (≥ 7:1)Cumple
Texto grande AA (≥ 3:1)Cumple
Texto grande AAA (≥ 4,5:1)Cumple

Esta herramienta solo informa del resultado bruto de la fórmula de contraste WCAG y de si se cumplen los cuatro umbrales; no significa que «esta página cumpla las WCAG». El cumplimiento real también depende del tamaño y el grosor de la fuente y del resto de tu diseño.

Genera en directo el código de desenfoque de fondo y borde translúcido.

Abrir →