Verificador de contraste de color WCAG — Herramienta…

¿Qué es Verificador de contraste de color WCAG?

Verificador de contraste de color WCAG gratuito en línea. Ingresa colores de primer y segundo plano y verifica el cumplimiento de los estándares WCAG 2.1 AA y AAA. Incluye pares de colores predefinidos y vista previa en vivo.

El contraste de color es uno de los aspectos más pasados por alto de la accesibilidad web, y sin embargo afecta directamente a si millones de usuarios pueden leer tu contenido. Las WCAG (Web Content Accessibility Guidelines) 2.1 definen relaciones de contraste específicas para el texto y los colores de fondo para garantizar la legibilidad para usuarios con baja visión, daltonismo o condiciones de visualización como la luz solar intensa. Color Contrast Checker mide cualquier combinación de colores de primer plano/fondo frente a estos estándares y te dice al instante si pasa o falla.

Introduce los colores con el selector de color HEX o escribe los valores hex directamente. La herramienta calcula la relación de contraste —un número entre 1:1 (sin contraste) y 21:1 (contraste máximo, negro sobre blanco). El resultado se compara con cuatro umbrales WCAG: texto normal AA (4.5:1), texto grande AA (3:1), texto normal AAA (7:1) y texto grande AAA (4.5:1). Cada umbral muestra un indicador claro de aprobado o fallido, para que sepas exactamente qué estándares cumple tu par de colores.

Un panel de vista previa en vivo muestra texto de muestra renderizado con los colores elegidos, dándote una comprobación visual junto al análisis numérico. Esto es importante porque algunas combinaciones de colores que pasan matemáticamente pueden seguir resultando incómodas de leer (o viceversa). Se incluyen ocho pares de colores predefinidos para escenarios comunes —modo oscuro, modo claro, colores de enlaces e insignias de advertencia— para que puedas probar combinaciones del mundo real rápidamente.

La herramienta también maneja casos límite. Si los colores son demasiado parecidos, la relación cae por debajo de 3:1 y todas las comprobaciones fallan: una señal clara de que el par no es usable para texto. Si estás probando elementos no textuales como iconos o bordes de formularios, los requisitos de contraste no textuales de las WCAG son más permisivos (mínimo 3:1), algo que este comprobador puede ayudarte a evaluar visualmente aunque los umbrales principales apunten al texto.

Casos de uso reales de Verificador de contraste de color WCAG

Garantizar la legibilidad del texto en una página de aterrizaje

Tu diseñador eligió texto gris claro (#999) sobre fondo blanco para la sección principal. Pruébalo aquí: la relación es de aproximadamente 2.8:1 —falla las WCAG AA para todos los tamaños de texto. Ajusta el primer plano a un gris más oscuro (#595959) y vuelve a probar hasta que pase AA para texto normal (4.5:1+). La vista previa en vivo confirma la legibilidad de un vistazo.

Validar esquemas de color de modo oscuro

Una interfaz de modo oscuro usa texto blanco sobre un fondo azul oscuro. Prueba la combinación: blanco (#FFFFFF) sobre azul marino (#0A1628) normalmente produce una relación superior a 10:1, superando AAA con facilidad. Sin embargo, el color del enlace en modo oscuro puede ser demasiado sutil: prueba tu enlace azul (#4A90D9) sobre el mismo fondo oscuro para verificar que cumple al menos AA para texto grande.

Seleccionar colores accesibles para botones e insignias

Tu insignia de notificación usa texto blanco sobre un fondo rojo. Prueba el tono exacto de rojo: no todos los rojos cumplen los requisitos de contraste. Un rojo brillante (#E53E3E) con texto blanco normalmente supera AA para texto grande, pero puede fallar para etiquetas pequeñas de insignia. Ajusta el tono de rojo y vuelve a probar hasta que la insignia sea a la vez fiel a la marca y accesible.

¿Por qué usar Verificador de contraste de color WCAG?

Cumplimiento WCAG 2.1 AA y AAA para texto normal y grande
Vista previa de texto en vivo con tu combinación de colores
8 pares de colores predefinidos para escenarios comunes
Indicadores claros de aprobado/fallo con las relaciones requeridas

Cómo usar Verificador de contraste de color WCAG — Paso a paso

Ingresa colores de primer plano (texto) y fondo.

Ve la relación de contraste y los resultados de cumplimiento WCAG.

Usa pares de colores predefinidos para escenarios comunes.

Ajusta los colores hasta que todas las verificaciones pasen.

¿Para quién es Verificador de contraste de color WCAG?

Accesibilidad web
Diseño UI
Cumplimiento WCAG
Selección de colores

Consejos profesionales para Verificador de contraste de color WCAG

1Diseña para cumplir AA como estándar mínimo. AAA es ideal pero no es obligatorio para todo el contenido: reserva AAA para contextos de lectura de formato largo donde la legibilidad es crítica.
2El texto grande (18px+ normal o 14px+ en negrita) tiene un requisito de contraste menor (3:1 para AA). Aprovecha esto para titulares, botones y etiquetas que se puedan estilizar más grandes.
3Nunca te apoyes solo en el color para transmitir información. Incluso con contraste aprobado, los usuarios con daltonismo necesitan señales adicionales como iconos, subrayados o etiquetas para distinguir estados.
4Prueba los pares de colores al principio del proceso de diseño, no después del desarrollo. Arreglar problemas de contraste en CSS es fácil; arreglarlos después de que se haya finalizado un color de marca es mucho más difícil.

Verificador de contraste de color WCAG — Preguntas frecuentes

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Verificador de contraste de color WCAG really free to use?

Yes, Verificador de contraste de color WCAG is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

¿Listo para usar Verificador de contraste de color WCAG?

Herramienta en línea gratuita — funciona en tu navegador, sin registro. Empieza a usarla ahora.

Pruébalo ahora