Comprobador de contraste de color
Compruebe las combinaciones de colores de primer plano y de fondo para garantizar el cumplimiento de los estándares de accesibilidad WCAG 2.1 AA y AAA.
Texto normal
Texto grande (18pt / 14pt negrita)
The quick brown fox jumps over the lazy dog.
Relación de contraste
17.40:1
¿Por qué usar el comprobador de contraste de PixConvert?
Comprobación del cumplimiento de las WCAG en una sola herramienta: elige colores y ve los resultados al instante.
Cumplimiento de las WCAG 2.1
Comprueba todos los criterios de éxito relevantes de WCAG 2.1: AA normal, AA grande, AAA normal, AAA grande y componentes de la interfaz de usuario.
Vista previa en vivo
Vea el texto renderizado sobre el color de fondo real en tamaños normal, grande y de componente de interfaz de usuario.
Selector de color
Selector de color nativo del navegador, además de entrada hexadecimal para una selección de color precisa.
Relación exacta
Muestra la relación de contraste exacta con dos decimales (por ejemplo, 4,53:1) para fines de documentación.
Intercambiar colores
Intercambia el primer plano y el fondo con un solo clic para comprobar ambas combinaciones al instante.
100% privado
Fórmula WCAG pura calculada en tu navegador. Sin servidor, sin seguimiento.
¿Cuándo comprobar el contraste de color?
La accesibilidad es un requisito legal en muchas jurisdicciones. Compruébelo con antelación.
Revisión del diseño
Antes de entregar los diseños al departamento de ingeniería, verifique que la selección de colores en Figma cumpla con los requisitos de las WCAG.
- Comprobar los colores de los botones principales
- Verificar el texto en los fondos de marca
- Prueba de legibilidad del texto de marcador de posición
Auditoría de accesibilidad
Realizar una auditoría de la interfaz de usuario existente para verificar su conformidad con la norma WCAG 2.1 AA como parte de una revisión legal o de calidad.
- Identificar pares de colores defectuosos
- Relaciones de contraste de los documentos
- Priorizar las correcciones según su gravedad.
Sistema de diseño
Valida la accesibilidad de cada elemento de tu paleta de colores antes de publicarla.
- Validar pares de tokens de color
- Crea variantes de temas accesibles
- Combinaciones que cumplen con los documentos
Cómo comprobar el contraste de color
Seleccione el color del texto (primer plano) y el color de fondo utilizando los selectores de color o los campos hexadecimales.
La relación de contraste y los resultados de aprobación/rechazo de WCAG se actualizan al instante. Utilice la función Intercambiar para comprobar la combinación inversa.
Revise los resultados para los niveles de cumplimiento AA y AAA; todos los cálculos siguen la fórmula oficial WCAG 2.1 y se ejecutan completamente en su navegador.
Explora más herramientas
Descubre otras herramientas gratuitas que funcionan de maravilla junto con esta.
Generador de degradados CSS
Crea degradados CSS personalizados de forma visual.
Generador de sombras de cajas
Diseña sombras de caja CSS con vista previa en vivo
Convertidor de color
Convierta instantáneamente los códigos de color HEX, RGB y HSL.
Extractor de paleta de colores
Extrae los colores dominantes de cualquier imagen.
Formateador JSON
Formatee, valide y minimice JSON al instante.
Probador de expresiones regulares
Prueba y depura expresiones regulares en tiempo real.
Preguntas frecuentes
Se explican el contraste de color y la accesibilidad.
¿Cuál es el requisito de relación de contraste de las WCAG?
El nivel AA de WCAG 2.1 requiere: 4,5:1 para texto normal, 3:1 para texto grande (18pt o negrita de 14pt o superior) y 3:1 para componentes de interfaz de usuario y objetos gráficos. El nivel AAA requiere 7:1 para texto normal y 4,5:1 para texto grande.
¿Cómo se calcula la relación de contraste?
Relación de contraste = (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. La luminancia se calcula a partir de los valores sRGB linealizados mediante la fórmula WCAG 2.1.
¿Qué se considera "texto grande"?
Las WCAG definen el texto grande como aquel de 18 pt (24 px) o más, o de 14 pt (aproximadamente 18,67 px) o más en negrita. El texto grande tiene un requisito de contraste menos estricto (3:1 en lugar de 4,5:1) porque es inherentemente más legible.
¿Necesito reunirme con la AAA?
El nivel AA de las WCAG es el requisito legal estándar en la mayoría de las jurisdicciones (ADA en EE. UU., EN 301 549 en la UE). AAA es el objetivo avanzado: busque AA como mínimo y AAA siempre que sea posible para contenido crítico.
¿Esto funciona con imágenes y degradados?
Esta herramienta comprueba pares de colores sólidos. Para texto sobre imágenes o degradados, debe evaluar el color de fondo en el peor de los casos (el punto más claro detrás del texto para texto oscuro, y el punto más oscuro para texto claro). Las WCAG no exigen que los fondos de las imágenes cumplan con los criterios de contraste; es una buena práctica.