Analizador de Accesibilidad de Paletas de Colores
Una herramienta moderna y profesional para analizar la accesibilidad de paletas de colores según los estándares WCAG AA y AAA. ColorCheck te ayuda a crear diseños inclusivos verificando automáticamente el contraste entre colores y generando combinaciones accesibles.
- Verificación WCAG: Cumple con estándares AA Normal (4.5:1), AA Large (3:1) y AAA Normal (7:1)
- Análisis en Tiempo Real: Los resultados se actualizan automáticamente al cambiar los colores
- Múltiples Estándares: Soporte para diferentes niveles de accesibilidad según el tipo de contenido
- Armonías de Color: Complementario, Análogo, Triádico, Tetrádico y Monocromático
- Color Base Personalizable: Selecciona cualquier color como punto de partida
- Generación Inteligente: Algoritmos basados en teoría del color para crear paletas armónicas
- Panel de Estadísticas: Métricas completas de accesibilidad y contraste
- Advertencias Inteligentes: Detecta problemas potenciales en la paleta
- Sugerencias de Mejora: Recomendaciones automáticas para optimizar la accesibilidad
- Múltiples Formatos: CSS, SCSS, Tailwind CSS, JSON
- Integración con Figma: Exportación en formato Markdown y JSON para Figma
- Código Listo para Usar: Variables CSS y clases pre-generadas
- Endpoint
/api/pairs: Analiza paletas y devuelve combinaciones accesibles - Endpoint
/api/tokens: Información sobre tokens de color - Documentación Integrada: Interfaz de usuario con ejemplos de uso
- Node.js 18+
- pnpm (recomendado) o npm
# Clonar el repositorio
git clone https://github.com/franlopezmora/colorcheck.git
cd colorcheck
# Instalar dependencias
pnpm install
# Ejecutar en modo desarrollo
pnpm devLa aplicación estará disponible en http://localhost:3000
# Construir la aplicación
pnpm build
# Ejecutar en producción
pnpm start- Usa el selector de color visual
- Ingresa códigos HEX directamente
- Importa colores desde otras herramientas
- AA Normal (4.5:1): Para textos de párrafo estándar
- AA Large (3:1): Para textos grandes (24px+)
- AAA Normal (7:1): Para máxima accesibilidad
- Ve las combinaciones accesibles encontradas
- Revisa los niveles de contraste
- Copia el código CSS directamente
- Selecciona un color base
- Elige el tipo de armonía
- Genera automáticamente una paleta armónica
Analiza una paleta de colores y devuelve combinaciones accesibles.
Parámetros:
{
"palette": ["#0EA5E9", "#111827", "#F59E0B"],
"threshold": "aa_normal",
"limit": 20
}Respuesta:
{
"ok": true,
"threshold": "aa_normal",
"pairs": [
{
"fg": "#111827",
"bg": "#0EA5E9",
"ratio": 4.8,
"passes": ["aa_normal", "aa_large"]
}
]
}Obtiene información sobre tokens de color y variables CSS.
Respuesta:
{
"ok": true,
"tokens": {
"primary": "#0EA5E9",
"secondary": "#111827",
"accent": "#F59E0B"
}
}colorcheck/
├── src/
│ ├── app/
│ │ ├── api/ # API Routes
│ │ │ ├── analyze/ # Análisis de colores
│ │ │ ├── pairs/ # Combinaciones accesibles
│ │ │ └── tokens/ # Tokens de color
│ │ ├── components/ # Componentes React
│ │ │ ├── ColorPalette.tsx # Selector de colores
│ │ │ ├── PaletteGenerator.tsx # Generador de paletas
│ │ │ ├── AnalysisPanel.tsx # Panel de análisis
│ │ │ ├── ExportPanel.tsx # Panel de exportación
│ │ │ └── ...
│ │ ├── hooks/ # Custom Hooks
│ │ └── globals.css # Estilos globales
├── lib/ # Lógica de negocio
│ ├── colors.ts # Manipulación de colores
│ ├── contrast.ts # Cálculo de contraste
│ ├── wcag.ts # Estándares WCAG
│ └── index.ts # API principal
└── public/ # Assets estáticos
- Next.js 15.5.3: Framework React con App Router
- React 19.1.0: Biblioteca de interfaz de usuario
- TypeScript: Tipado estático
- Tailwind CSS 4: Framework de estilos utilitarios
- Node.js: Runtime de JavaScript para el servidor
- Next.js API Routes: API REST integrada
- Algoritmos de Color: Conversión HEX/HSL/RGB
- Cálculo de Contraste: Implementación WCAG 2.1
- ESLint: Linting de código
- pnpm: Gestor de paquetes
- PostCSS: Procesamiento de CSS
| Estándar | Contraste Mínimo | Uso Recomendado |
|---|---|---|
| AA Normal | 4.5:1 | Textos de párrafo (~18px) |
| AA Large | 3:1 | Textos grandes (~24px) |
| AAA Normal | 7:1 | Máxima accesibilidad |
| AAA Large | 4.5:1 | Textos grandes AAA |
| UI Graphic | 3:1 | Elementos de interfaz |
- Armonía Complementaria: Colores opuestos en el círculo cromático
- Armonía Análoga: Colores adyacentes para transiciones suaves
- Armonía Triádica: Tres colores separados 120° para máximo contraste
- Armonía Tetrádica: Cuatro colores para paletas complejas
- Armonía Monocromática: Variaciones de un solo tono
- Detección de Problemas: Identifica colores problemáticos automáticamente
- Métricas de Accesibilidad: Porcentaje de combinaciones accesibles
- Análisis de Temperatura: Detecta paletas cálidas/frías
- Sugerencias Contextuales: Recomendaciones basadas en el análisis
- CSS Variables: Variables CSS listas para usar
- SCSS: Compatible con preprocesadores
- Tailwind CSS: Clases utilitarias personalizadas
- JSON: Datos estructurados para integración
- Figma: Formatos específicos para diseño
Las contribuciones son bienvenidas. Por favor:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
- 🐛 Bug Fixes: Corrección de errores
- ✨ Nuevas Features: Funcionalidades adicionales
- 📚 Documentación: Mejoras en la documentación
- 🎨 UI/UX: Mejoras en la interfaz
- ⚡ Performance: Optimizaciones de rendimiento
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
Francisco López Mora
- 📧 Email: franciscolopezmora3@gmail.com
- 🐙 GitHub: @franlopezmora
- 💼 LinkedIn: Francisco López Mora
¿Te gusta ColorCheck? ¡Dale una ⭐ al repositorio!
