Herramientas · Color · Comprobar el contraste de colores
Comprobar el contraste de colores
Comprueba si dos colores cumplen los requisitos de contraste WCAG para texto e interfaz.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Elige o introduce un color de texto y un color de fondo.
Lee la relación de contraste y comprueba si supera los niveles AA y AAA.
Ajusta cualquiera de los dos colores hasta que supere el nivel que necesitas.
Preguntas frecuentes
4,5:1 para texto normal, y 3:1 para texto grande (18pt, o 14pt en negrita) y para componentes de interfaz y gráficos con significado.
7:1 para texto normal y 4,5:1 para texto grande: un nivel más estricto, no obligatorio para la mayoría de los sitios pero que vale la pena alcanzar cuando es fácil.
18pt (24px) normal, o 14pt (19px) en negrita, según la propia definición de WCAG.
Sí, también comprueba el umbral de 3:1 para componentes de interfaz (como bordes de botones y campos de formulario) y gráficos con significado, según la regla de contraste no textual de WCAG 2.1.
No. La relación se calcula por completo en tu navegador.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why 'It Looks Fine to Me' Isn't Good Enough for Text Color
Contrast is a measurable ratio, not a matter of taste - and a designer judging a color pair on their own calibrated screen is testing one combination out of many their visitors actually have.
Leer la guíaHow to Check Your Text Passes WCAG Contrast (AA and AAA)
Pick a text color and a background color and four pass/fail badges update immediately - no button to press. Here is what each one means and how to read them.
Leer la guíaDark Mode Text Contrast: Why Light Gray Often Fails WCAG
Softening white text toward gray feels right on a dark background, and it is exactly where contrast ratios erode fastest. Here is where the real numbers land.
Leer la guía
Comentarios