Comprueba la relación de contraste entre dos colores frente a los niveles de accesibilidad WCAG AA y AAA.
Cómo usar Contraste de color
Elige un color de texto y un color de fondo.
Lee la relación de contraste y las insignias de cumplimiento WCAG.
Ajusta los colores hasta que cumplan el nivel que necesitas.
Es un comprobador de contraste de color WCAG que muestra la relación de contraste exacta entre un color de texto y un color de fondo, y si cumple los niveles de accesibilidad AA y AAA. Elige los colores con la paleta o por código hex y ve una vista previa en vivo.
Ajusta los dos colores hasta que las insignias superen el nivel que necesitas, y el resultado se actualiza al instante conforme avanzas.
Un texto demasiado parecido en luminosidad a su fondo es difícil o imposible de leer, sobre todo para personas con baja visión o deficiencias en la percepción del color, o para cualquiera con el móvil bajo el sol. Un contraste suficiente mantiene tu contenido legible para todos.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan el estándar. AA, el nivel al que aspira la mayoría de los sitios y que muchas leyes de accesibilidad citan, exige una relación de 4.5:1 para el texto normal y 3:1 para el texto grande. AAA es más estricto: 7:1 y 4.5:1.
El texto grande tiene un umbral más bajo porque las letras más grandes siguen siendo legibles con menos contraste. Cuenta como grande a partir de unos 24px (18pt), o 18.66px (14pt) cuando está en negrita.
La relación proviene de la luminancia relativa de los dos colores usando la fórmula oficial de WCAG, y produce un valor desde 1:1 (sin contraste, colores idénticos) hasta 21:1 (negro sobre blanco).
Todo se calcula en tu navegador, así que es instantáneo y privado. Nada de lo que elijas se sube a ningún sitio.
Preguntas frecuentes
WCAG AA requiere 4.5:1 para el texto normal y 3:1 para el texto grande (18pt o 14pt en negrita). AAA requiere 7:1 y 4.5:1 respectivamente.
Texto de al menos 24px (18pt), o 18.66px (14pt) cuando está en negrita. Al texto grande se le permite una relación de contraste más baja.
A partir de la luminancia relativa de cada color usando la fórmula oficial de WCAG, dando un valor desde 1:1 (sin contraste) hasta 21:1 (negro sobre blanco).
Un contraste suficiente mantiene el texto legible para personas con visión reducida o deficiencias en la visión del color, y para todos con poca luz. Es una parte esencial de un sitio accesible y usable.
Las Pautas de Accesibilidad para el Contenido Web, el estándar internacional para hacer accesible el contenido web. Muchas leyes y políticas de accesibilidad hacen referencia a su nivel AA.
Insertar esta herramienta
Añade esta herramienta a tu propio sitio web. Copia el fragmento de abajo. Se mantiene actualizado automáticamente.
<iframe src="https://monu.tools/embed/es/color-contrast-checker" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>Herramientas relacionadas
Formatea y embellece consultas SQL con saltos de línea por cláusula y mayúsculas coherentes en las palabras clave, o minifícalas a una sola línea.
Embellece XML con la sangría adecuada o minifícalo a una sola línea. Se conservan comentarios, CDATA e instrucciones de procesamiento.
Embellece CSS con una sangría limpia o minifícalo para reducir el tamaño. Maneja media queries, calc() y comentarios de licencia.
Embellece HTML con sangría consciente de los bloques o minifícalo. Se conserva el contenido de pre, textarea, script y style.