Comprobador de contraste
Calcula la relación de contraste WCAG entre dos colores con distintivos AA y AAA para texto normal y grande, y vista previa en vivo. Todo en tu navegador.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
Umbrales WCAG — texto normal: AA ≥ 4.5, AAA ≥ 7; texto grande (≥ 24 px, o ≥ 18.7 px en negrita): AA ≥ 3, AAA ≥ 4.5.
Esta herramienta funciona por completo en tu navegador. Tus datos nunca salen de tu dispositivo y no se suben a ningún servidor.
Cómo usarlo
- 1Escribe un valor hex o rgb(), o usa el selector, para el primer plano.
- 2Haz lo mismo con el color de fondo.
- 3Lee la relación y los distintivos AA / AAA, o toca un par predefinido.
- 4Mira el bloque de vista previa para juzgar la combinación con tus ojos.
Comprobador de contraste
Introduce un color de primer plano y otro de fondo — hex como #333 o #1F2937, o rgb()/rgba() — y obtén la relación de contraste WCAG con dos decimales, con distintivos inmediatos de aprueba / no aprueba para los cuatro umbrales que importan: AA y AAA, para texto normal y grande. Una vista previa en vivo muestra texto de cuerpo y texto grande con los colores reales.
El cálculo usa la fórmula oficial de luminancia relativa de WCAG 2.x — la misma del comprobador del W3C — así que un 4.5 aquí es un 4.5 en todas partes. Entre los ajustes hay un par gris de 4.54:1 justo en el límite para que veas lo ajustada que es la barra del AA.
Preguntas frecuentes
¿Qué relación de contraste necesito para aprobar?
WCAG 2.x: el texto normal necesita 4.5:1 para AA y 7:1 para AAA. El texto grande — 24 px o más, o 18.7 px en negrita — necesita 3:1 para AA y 4.5:1 para AAA. Los componentes de interfaz y los gráficos necesitan 3:1.
¿Cómo se calcula la relación?
Cada color se linealiza desde sRGB y se combina en una luminancia relativa L = 0.2126·R + 0.7152·G + 0.0722·B; la relación es (L claro + 0.05) / (L oscuro + 0.05). Es la fórmula exacta de la especificación WCAG 2.x, idéntica a la del comprobador oficial del W3C.
¿Y los colores semitransparentes?
Un alfa rgba() menor que 1 se aplana sobre blanco antes de calcular. WCAG no tiene concepto de transparencia — compón el color sobre su fondo real o introduce el color opaco resultante para obtener cifras autorizadas.
Herramientas relacionadas
Conversor de colores
Pegue un color en hex, rgb() o hsl() y obtenga los tres formatos más una fila de tonos y sombras lista para su sistema de diseño.
Todas las herramientas →
Selector de color
Elija un color en la muestra o capte uno directamente de la pantalla con la API EyeDropper — hex, RGB y HSL copiables con un clic.
Todas las herramientas →
Calculadora de notas
Calculadora de notas ponderada o por puntos: añade tareas, mira tu nota y letra actuales y descubre exactamente qué necesitas en el examen final.
Todas las herramientas →
Insertar esta herramienta
Pon esta herramienta en tu sitio con una línea: se ejecuta en el navegador del visitante.
<iframe src="https://zoyku.com/es/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>