Saltar al contenido

Comprobador de contraste de colores

Respuesta breve

Comprueba las proporciones de contraste de color texto-fondo frente a los estándares WCAG AA/AAA.

Lo que no hace: Solo comprueba los dos colores que introduces; no analiza ninguna página, y el texto sobre imágenes o degradados necesita una revisión manual.

Gratis · Sin registro · Se ejecuta en tu navegador
4,54Ratio de contraste

Contraste justo — comprueba el uso en texto grande.

El veloz zorro marrón salta

El veloz zorro marrón salta

AA · texto normalAprobado
AA · texto grandeAprobado
AAA · texto normalReprobado
AAA · texto grandeAprobado

Cómo mejorar

El nivel AA de WCAG exige un ratio de contraste mínimo de 4.5:1 para texto normal y de 3:1 para texto grande (18pt, o 14pt en negrita). Apunta a 7:1 (AAA) siempre que puedas — mantiene el texto legible para personas con baja visión y bajo luz solar intensa.

Qué hace

Calcula la relación de contraste WCAG entre cualquier color de primer plano y de fondo que introduzcas, usando la misma fórmula de luminancia relativa de la especificación WCAG, y la compara con los umbrales AA y AAA para texto normal y texto grande (4,5:1 / 3:1 para AA, 7:1 / 4,5:1 para AAA). Muestra una vista previa de texto en directo con tus colores junto a una insignia de superado o fallido para cada umbral.

Por qué importa

El texto con poco contraste es el fallo de accesibilidad detectado automáticamente más común en las páginas de inicio según el informe anual Million de WebAIM, y es uno de los más fáciles de corregir con un cambio de color. El criterio de éxito 1.4.3 de WCAG 2.1 fija las relaciones mínimas, y la norma EN 301 549 — la norma en la que se basa la Ley Europea de Accesibilidad — las aplica al contenido web.

Cómo funciona

  1. Introduce o elige un color de primer plano (texto) y un color de fondo

  2. Calculamos la relación de contraste de luminancia relativa WCAG entre ambos colores

  3. Comparamos la relación con los umbrales AA y AAA para texto normal y texto grande

  4. Ves una vista previa en directo de tu texto sobre tu fondo junto a una insignia de superado o fallido para cada umbral

Ejemplo de entrada y salida

ENTRADA
foreground: #767676
background: #ffffff
SALIDA
contrast ratio: 4.54:1

texto normal AA (4.5:1)     PASS
texto grande AA (3:1)       PASS
texto normal AAA (7:1)      FAIL
texto grande AAA (4.5:1)    PASS

Cómo leer el resultado

Relación de contraste (4,54:1 en el ejemplo)
Cuánto más luminoso es el color claro que el oscuro, de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Usa la fórmula de luminancia relativa definida en WCAG 2.1, así que el resultado coincide con cualquier herramienta que siga el estándar.
AA texto normal (4,5:1)
El nivel al que remite la Ley Europea de Accesibilidad a través de la EN 301 549: el texto corrido necesita al menos 4,5:1. #767676 sobre blanco pasa con 4,54:1, así que es el gris puro más claro que pasa sobre blanco; #777777 ya falla.
AA texto grande (3:1)
El texto grande —al menos 18 pt (24 px), o 14 pt (unos 18,7 px) en negrita— necesita 3:1. Los componentes de interfaz y los gráficos con significado, como los bordes de los campos y los iconos, también necesitan 3:1 frente a lo que los rodea (WCAG 1.4.11).
AAA (7:1 y 4,5:1)
El nivel reforzado. Ni la EAA ni la EN 301 549 lo exigen, pero ayuda a personas con baja visión y a quien lee una pantalla con mucha luz. El ejemplo pasa AAA para texto grande y falla para texto normal.
Vista previa y color de la relación
Tu texto en tus dos colores, en dos tamaños, para juzgar el par también a ojo y no solo por el número. La relación aparece en verde desde 7:1, en naranja desde 4,5:1 —que supera AA— y en rojo por debajo.

Quién lo usa

  • Diseñador

    Valida la paleta de colores de marca frente a WCAG antes de fijarla. Muchos pasteles "modernos" fallan el 4,5:1 sobre blanco — mejor descubrirlo antes de aplicarlo a toda la marca.

  • Auditor de accesibilidad

    Comprueba cada combinación de color de texto y fondo frente a los umbrales AA y AAA antes de aprobar la declaración de accesibilidad del AEA de un cliente.

  • Desarrollador frontend

    Detecta regresiones de contraste introducidas por cambios de tema en variables CSS antes de que lleguen a producción.

Problemas frecuentes y cómo solucionarlos

  1. Texto gris claro sobre blanco

    Los placeholders, pies de foto y textos de pie de página en gris son el fallo habitual. Usa #767676 o más oscuro sobre blanco para texto normal; sobre un fondo de color, cambia la luminosidad de uno de los colores y vuelve a comprobar.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. El color de marca es demasiado claro para texto

    Reserva el color de marca para títulos grandes, iconos y fondos, y usa un tono más oscuro de él para texto pequeño y enlaces. Un tono más oscuro sigue reconociéndose como la marca.

  3. Texto blanco sobre un botón de color

    Comprueba el color del botón frente al blanco, no solo frente a la página. Si falla, oscurece el botón o usa texto oscuro, y comprueba igual los colores de hover y de foco.

  4. Texto sobre imágenes o degradados

    No hay un único color de fondo que medir. Comprueba la parte más clara detrás del texto o pon detrás una capa sólida o semitransparente para que la relación se cumpla en todas partes.

  5. Enlaces que solo se distinguen del texto por el color

    Si los enlaces dentro del texto solo se reconocen por su color, ese color necesita además 3:1 frente al texto que lo rodea (técnica G183 del W3C), y otra señal en hover y foco. Subrayarlos es la solución más sencilla.

Preguntas frecuentes

¿Qué relación WCAG necesito?
4,5:1 para texto normal, 3:1 para texto grande (≥18pt o ≥14pt en negrita) y componentes de interfaz. WCAG 2.1 AAA exige 7:1 — un listón más alto que la mayoría de las marcas no se marca como objetivo.
¿Esto comprueba imágenes e iconos?
Solo contraste de texto, y solo para los dos colores que introduces aquí. El contraste en imágenes (por ejemplo, texto sobre imagen en banners principales) necesita revisión manual — no hay un escaneo automático de la página.
¿Qué contraste exige la EAA?
Para el contenido web, la norma EN 301 549 v3.2.1 aplica el nivel AA de WCAG 2.1, incluido el 1.4.3 — así que el texto necesita al menos 4,5:1 frente a su fondo (3:1 para texto grande). Comprueba cada combinación que use tu sitio.

Fuentes

La documentación en la que se basan esta herramienta y las explicaciones de esta página.

Herramientas gratuitas sobre este tema

Guías sobre este tema

Datos de estudio sobre este tema

Herramientas relacionadas en Cumplimiento EAA

Ver todas las herramientas de Cumplimiento EAA