Comprobador de contraste de color
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
Las comprobaciones se ejecutan desde nuestro servidor; consultamos la URL que introduces y no conservamos los resultados. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Los contadores anónimos de resultados por ejecución pueden utilizarse para investigación agregada; nunca incluyen URL, dominios, IP ni identificadores, y no se publica ninguna estadística con menos de 100 ejecuciones.
Se ejecuta por completo en tu navegador: nada de lo que pegues se sube ni se almacena. Los contadores anónimos de resultados por ejecución pueden utilizarse para investigación agregada; nunca incluyen URL, dominios, IP ni identificadores, y no se publica ninguna estadística con menos de 100 ejecuciones.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Pasaporte del sitio Contexto local de este sitio guardado
Datos locales
Los destinos guardados, las listas con nombre y los resúmenes de comprobaciones recientes permanecen solo en este navegador.
Valorar esta herramienta
Acerca de esta herramienta
Gratis y sin registro. Compara colores de texto y fondo con los umbrales WCAG 2.2 AA y AAA, busca alternativas hexadecimales cercanas que los superen o analiza el contraste realmente renderizado en una URL pública.
Funciones
- Calcula localmente la relación de contraste de pares pegados y propone colores de primer plano cercanos que cumplen el nivel elegido.
- Acepta variables CSS, tokens con nombre y listas de colores hexadecimales; el contenido pegado permanece en el navegador.
- El modo URL carga la página en un navegador sin interfaz y ejecuta la regla de contraste de axe-core sobre los estilos calculados tras la cascada, herencia y opacidad.
- Explica los umbrales: AA exige 4.5:1 para texto normal y 3:1 para texto grande o componentes; AAA exige 7:1 para texto normal y 4.5:1 para texto grande.
Cómo funciona
Los pares pegados se convierten a luminancia relativa y se comparan con las relaciones AA y AAA de WCAG 2.2. En modo URL, un navegador medido ejecuta axe-core y lee los colores calculados después de aplicar CSS, herencia, opacidad y valores predeterminados, evitando deducir el contraste únicamente del HTML estático.
Limitaciones
- La comprobación de color no cubre tipografía, estados de foco, imágenes de texto ni todos los requisitos de accesibilidad de WCAG 2.2; revisa también la interfaz completa.
- El modo pegado evalúa el par indicado, no el fondo final renderizado. Para resolver variables, transparencias y capas reales necesitas el modo URL y una página accesible públicamente.
Preguntas frecuentes
¿Qué relación de contraste necesito?
El nivel doble A de las pautas exige 4,5:1 para texto habitual y 3:1 para texto grande y componentes de interfaz no textuales. El nivel triple A exige 7:1 para texto habitual y 4,5:1 para texto grande.
¿Esto demuestra que mi página es accesible?
No. Comprueba pares de colores, no tipografía, estados de foco, imágenes de texto ni, en modo pegado, fondos renderizados. Úsalo durante el diseño y prueba también la interfaz terminada.
¿Dónde va mi paleta?
En modo pegado permanece en el navegador: admite propiedades personalizadas de CSS, pares de nombre y valor o listas de colores hexadecimales. Solo el modo URL envía al servidor la dirección pública introducida, no la paleta.
¿En qué se diferencia el modo URL de pegar colores?
Los tonos pegados ofrecen matemáticas exactas del par escrito. El modo URL carga la página en un navegador automatizado medido y lee el tono y fondo calculados tras cascada, herencia, opacidad y valores predeterminados. Así obtiene un veredicto genuino de una página activa.
Problemas habituales y cómo solucionarlos
- Error La combinación cromática no cumple WCAG AA para texto de tamaño habitual Solución: Cambia el primer plano o el fondo hasta que el texto de tamaño habitual alcance al menos un contraste de 4.5:1; después, vuelve a probar los estados de cursor, foco, desactivado y visitado.
- Error La combinación cromática no cumple WCAG AA para texto grande Solución: Cambia la combinación cromática hasta que el texto de al menos 24px en peso normal o 18.66px en negrita alcance un contraste de 3:1.
- Advertencia La combinación cromática no cumple WCAG AAA para texto de tamaño habitual Solución: Ajusta la combinación cromática hasta que el texto de tamaño habitual alcance un contraste de 7:1 cuando WCAG AAA sea un requisito del proyecto.
- Advertencia La combinación cromática no cumple WCAG AAA para texto grande Solución: Ajusta la combinación cromática hasta que el texto grande que cumpla los requisitos alcance un contraste de 4.5:1 cuando se exija WCAG AAA.
- Advertencia La combinación cromática no cumple la orientación de contraste para elementos no textuales Solución: Aumenta hasta al menos 3:1 el contraste de los iconos esenciales, indicadores de foco, límites de controles y objetos gráficos respecto a los tonos adyacentes.