Herramientas CSS

Comprobador de contraste CSS

Comprueba la relacion de contraste entre dos colores segun las normas WCAG.

Cargando herramienta...

Qué es Comprobador de contraste CSS?

Comprobador de contraste CSS es una herramienta de navegador para esta tarea: Comprueba la relacion de contraste entre dos colores segun las normas WCAG. La salida es fácil de revisar antes de usarla en un sitio publicado.

Quick answer

Check whether two color combinations meet WCAG contrast standards before publishing. The tool calculates the precise ratio and tells you whether normal text, large text, and UI components pass AA or AAA levels.

Limitations

  • The color picker returns hex values only. It does not support RGB, HSL, or named color inputs directly.
  • The tool checks solid color pairs. It does not evaluate contrast on gradient text, box-shadow text, or background images where luminance varies across the element.
  • Contrast ratios are calculated from the colors you enter. If either color is transparent the result will not reflect the actual visible contrast against the underlying page background.

Cómo usar esta herramienta

  1. Abre la herramienta y escribe los valores necesarios.
  2. Revisa la salida en el panel de resultado.
  3. Copia solo la parte que encaja con tu página.
  4. Prueba el cambio antes de publicar.

Para qué puedes usarla

  • Resolver tareas repetidas de publicación con menos fricción.
  • Preparar marcado, CSS o checklists antes del lanzamiento.
  • Evitar pequeños errores comunes en sitios estáticos.

Errores comunes

  • Copiar la salida sin revisarla.
  • Usar URLs locales en lugar de URLs públicas finales.
  • No confirmar que el archivo esté en la carpeta publicada.

Verification

  1. Test the final color pair in a browser by zooming to confirm text is readable at small sizes.
  2. Compare the tool result against the WCAG contrast checker in Chrome DevTools Accessibility panel for a second opinion.

FAQ

Preguntas sobre Comprobador de contraste CSS

Comprobador de contraste CSS funciona localmente?

Si. Las herramientas actuales están pensadas para generar salida en el navegador.

Debo probar el resultado?

Si. Revisa siempre la salida en tu plantilla, navegador y hosting.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también