Saltar al contenido
Tools

Comprobador de contraste gratis

Haz que cada combinación de color sea más legible.

Comprueba colores de texto e interfaz según WCAG y corrige una combinación sin perder su carácter.

  • Relación de contraste exacta
  • Corrección accesible
  • Funciona en este navegador

Elige colores

Prueba un primer plano y un fondo

Escribe un valor HEX de tres o seis dígitos, o usa los selectores de color.

El tono elige la familia de color. La intensidad va del gris neutro al color vivo. La luminosidad acerca el resultado al negro o al blanco. Los tres ajustes se combinan para crear el color final.

{{ t('checker.picker', { label: t('checker.foreground') }) }}

{{ pickerHint('foreground') }}

{{ t('checker.picker', { label: t('checker.background') }) }}

{{ pickerHint('background') }}

Relación de contraste {{ ratioText }}:1 {{ t('score.summary', { passed: passedCount, total: resultRows.length }) }} Detalles del resultado
Relación de contraste {{ ratioText }}:1 de un máximo de 21:1

La relación mide la diferencia entre claro y oscuro: 1:1 significa que no hay contraste, y un número mayor se distingue mejor. AA es el objetivo habitual; AAA es más estricto.

  • {{ result.title }}{{ result.hint }} {{ result.pass ? t('results.pass') : t('results.fail') }}

Vista previa

Mira la combinación en contexto

Ejemplo de texto grande

Un buen contraste mantiene los párrafos cómodos de leer en distintas pantallas y condiciones.

Corrección accesible

Conserva el color, corrige el contraste

Primero cambia la luminosidad. El tono y la intensidad se mantienen tan próximos como permite la gama visible.

Corregir primer plano

Este color ya cumple el objetivo seleccionado.

Cambiar solo este color no permite alcanzar el objetivo.

Corregir fondo

Este color ya cumple el objetivo seleccionado.

Cambiar solo este color no permite alcanzar el objetivo.

{{ toast }}