Imágenes y documentos

Comprobador de contraste de color

Medir el contraste del color del fondo y del texto con respecto a los umbrales de referencia WCAG.

◈ Procesamiento local · Las entradas no se cargan

Entradas y configuraciones

Este espacio de trabajo procesa datos en el navegador actual; la entrada no se guarda al actualizar.

Banco de trabajo de resultados

Complete los detalles y luego haga clic en Generar resultados.

↗

Los resultados se mostrarán aquí

revise los detalles, copie o descargue y luego continúe con su trabajo.

TU PRÓXIMO PASO

Termina tus materiales, luego conecta el resto de tu trabajo

Utilice funciones de imágenes y documentos según los límites gratuitos establecidos. Cree una cuenta de empresa para monitorear sitios web, consultas comerciales y notificaciones de equipo, o analice su flujo de trabajo con nosotros.

Las nuevas empresas reciben una prueba Pro de 14 días, sin necesidad de tarjeta. Las pruebas excluyen la concesión de crédito mensual pagado.

¿Ya tienes una cuenta? Abre tu espacio de trabajo → (English)

Cómo utilizar el Comprobador de contraste de color

  1. Ingrese el color del texto (HEX) y ajuste las opciones según sea necesario.
  2. Ejecute la herramienta e inspeccione sus resultados, evidencia y limitaciones.
  3. Copie o descargue el resultado y luego verifíquelo con el sitio web real, los datos de origen o los registros comerciales.

Pruebe un ejemplo concreto

Compare un botón del color de la marca con texto blanco y oscuro antes de elegir el color de su etiqueta.

Cómo interpretar los resultados

El contraste utiliza los colores ingresados y los cálculos de luminancia relativa estándar. El tamaño del texto, el peso, los estados y la interfaz completa aún necesitan una revisión de accesibilidad. Pasar un par de colores no establece un cumplimiento general.

Preguntas frecuentes

¿El contraste de color que pasa satisface todos los requisitos de accesibilidad?

No completamente. También se requieren navegación por teclado, etiquetas semánticas, indicadores de enfoque y texto alternativo.

¿Qué se considera texto grande?

El texto grande WCAG generalmente se refiere a aproximadamente 18 puntos o 14 puntos en negrita y más, dependiendo de la representación de la fuente.

¿Se admite el color transparente?

Actualmente se requieren valores HEX opacos. Calcule primero el color mezclado real.

guía práctica del verificador de contraste de color y preguntas comunes

¿Qué hace un verificador de contraste de color?

El contraste de color mide la diferencia de luminancia entre el texto y su fondo para evaluar la legibilidad de un par de colores en particular.

¿Para quién es esto y cuándo es útil?

Diseñadores y desarrolladores frontend que comparan el texto con su fondo.

¿Cómo uso este comprobador de contraste de color?

Ingrese los colores de primer plano y de fondo, inspeccione la relación de contraste y los criterios de texto aplicables, luego verifique el tamaño, el peso y los estados reales de la fuente.

¿Cómo debo interpretar los resultados?

Interprete los umbrales utilizando el tamaño y el peso de la letra real, luego revise los botones, el enfoque y los estados. Un par que pasa no establece una accesibilidad completa a la página.

¿Dónde se realiza el trabajo y qué servicios reciben datos?

Los colores y la luminancia relativa se calculan en su navegador. Ninguna página de destino se rastrea ni se audita exhaustivamente.