UUUP Tools

Herramientas de diseño

Comprobador de contraste de color — WCAG AA/AAA

Calcula el contraste entre primer plano y fondo con las reglas WCAG 2.0 y comprueba AA/AAA para texto normal y grande. Útil para paletas accesibles y revisión de legibilidad en interfaces web.

Cambio rápido→Conversor de color
ContrasteWCAGAccesibilidad
Cambio rápido:Conversor de colorComprobador de contraste por lotesArmonizador de color

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

  • Comprueba la legibilidad del texto del cuerpo y de los botones
  • Verifica un borrador de diseño frente a WCAG
  • Ajusta los colores de marca hasta que supere AA o AAA

Cómo usar

  1. Define el primer plano y el fondo (selector o HEX)
  2. Revisa la relación de contraste y los resultados AA/AAA
  3. Intercambia los colores si es necesario y copia el resultado de contraste

Entrada y salida de ejemplo

Entrada

Primer plano #000000 / Fondo #ffffff

Salida

Contraste 21:1, AA/AAA superado

FAQ

¿Cuál es la diferencia entre AA y AAA?

AA requiere al menos 4,5:1 para texto normal y 3:1 para texto grande. AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande.

¿Qué entradas de color se admiten?

El cálculo usa valores HEX. Usa el selector o pega #RRGGBB.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Conversor de color

Conversor de color — HEX, RGB y HSL en línea

Disponible

Convierte colores entre HEX, RGB, HSL, HWB, CMYK y variables CSS en tu navegador. Incluye un selector de color y un generador de colores aleatorios para entregas de diseño, trabajo con hojas de estilos y alineación de colores de marca.

Color HEX RGB
Abrir herramienta

Comprobador de contraste por lotes

Comprobador de contraste por lotes — Comprobaciones WCAG de múltiples pares

Disponible

Comprueba el contraste WCAG de muchos pares primer plano/fondo a la vez. Consulta los niveles AA/AAA y las vistas previas de texto: útil para auditorías de sistemas de diseño, lotes de colores de marca y revisiones de accesibilidad.

Contraste WCAG Accesibilidad
Abrir herramienta

Armonizador de color

Armonizador de color — Reglas clásicas de armonía

Disponible

Elige un color base y genera esquemas con reglas complementaria, análoga, triádica, tetradítica, complementaria dividida o monocromática. Previsualiza el uso en la interfaz y exporta variables CSS para trabajo de marca y componentes.

Paleta Color Armonía
Abrir herramienta