Comprobador de contraste de color
Asegúrese de que su texto y botones sean legibles para todos. — y fija los colores que fallan.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo comprobar el contraste de color
- Haga clic en Texto o Fondo y seleccione o pegue un color.
- Lea la relación, los resultados de AA / AAA y APCA, y vea la vista previa en vivo.
- Aplique una solución sugerida o compruebe una paleta completa en la cuadrícula.
Acerca de Comprobador de contraste
Compruebe el texto y los colores de fondo contra las WCAG 2.2 AA y AAA y la nueva APCA.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Sitios web y aplicaciones accesibles (WCAG / ADA / EN 301 549)
- Colores de marca para botones y enlaces
- Modo oscuro y colores de visualización de datos
Consejo: Ajuste la vista previa a su tamaño de fuente real y el peso — El texto grande o en negrita necesita menos contraste.
Preguntas frecuentes
¿Qué relación de contraste necesito?
WCAG 2.2 nivel AA necesita 4.5:1 para texto normal y 3:1 para texto grande (24 px, o 18.66 px en negrita) y para partes de la interfaz de usuario como bordes e iconos. Nivel AAA necesita 7:1 y 4.5:1.
¿Qué es APCA?
El algoritmo de contraste perceptual accesible propuesto para WCAG 3. Proporciona un valor de Lc que tiene en cuenta el tamaño de fuente y el modo oscuro mejor que la relación 2.x. Lc 75+ se adapta al texto del cuerpo, 60+ texto de contenido, 45+ titulares.
Mis colores fallan — ¿Ahora qué?
Usa “Fix it”: encuentra el texto o color de fondo más cercano (mismo tono, luminosidad ajustada) que pasa AA o AAA. Haz clic en uno para aplicarlo.
¿Puedo revisar toda la paleta?
Sí — cambie a "Rejilla de paleta", enumere sus colores y vea cada combinación de texto / fondo con su relación y grado.
¿Importa el contraste para iconos y botones?
Las WCAG solicitan al menos 3:1 para las partes de la interfaz de usuario y gráficos significativos, como iconos, bordes de entrada y contornos de enfoque.