Kit de Herramientas de Color y Accesibilidad
Solo localVerifica el contraste WCAG, repara pares de colores, crea paletas y extrae colores de imágenes localmente.
Relación de contraste WCAG
14.68:1
WCAG 2.2 requiere al menos 4.5:1 para el texto normal, 3:1 para los componentes de IU de texto grande y no textual, y 7:1 para el contraste de texto normal mejorado.
Vista previa en vivo
Diseño que más personas pueden leer
El contraste es sólo una parte de la accesibilidad, pero es un lugar medible para empezar. Revise los encabezados, párrafos, controles y estados de enfoque juntos.
Primer plano más cercano a los requisitos
Estas sugerencias conservan la dirección de color cuando es posible, luego se mueven hacia blanco o negro hasta que se alcanza el contraste solicitado.
Cómo usarla
- 01
Introduzca un par de colores
Pegar HEX o RGB en primer plano y colores de fondo y ver la relación de contraste exacta actualizar inmediatamente.
- 02
Comprobar o explorar
Revise los resultados de WCAG 2.2 AA/AAA, genere paletas armoniosas, simule deficiencias comunes de visión de color o extraiga colores de imagen.
- 03
Aplicar colores accesibles
Utilice la sugerencia de primer plano AA o AAA más cercana, copiar valores de color o exportar la paleta como variables CSS.
Preguntas frecuentes
¿Qué estándar utiliza el verificador de contraste?
Utiliza la fórmula de contraste normativa WCAG 2.2 relativo-luminancia y los umbrales 3:1, 4.5:1 y 7:1.
¿Garantiza el contraste de paso la accesibilidad?
No. El contraste es un requisito. La tipografía, los estados focales, la semántica, el movimiento, el lenguaje y las pruebas con tecnología de asistencia siguen siendo importantes.
¿Las imágenes subidas son privadas?
Sí. La extracción de color utiliza un lienzo del navegador temporal y no carga la imagen.
¿La vista previa de color es diagnostico?
No. Es una simulación práctica para la revisión del diseño, no un diagnóstico médico o un sustituto para las pruebas de usuario.
Herramientas relacionadas
Continúa con otras utilidades web específicas.