Calculadora de Contraste WCAG
Contraste WCAG 2.1 + APCA con input multi-formato, desglose detallado, sugerencia automática y preview en vivo
Calcula contraste WCAG 2.1 y APCA (WCAG 3.0) entre dos colores. Acepta HEX, RGB, HSL, OKLCH, LAB y nombres CSS. Desglose detallado AA/AAA, sugerencia automática de color accesible y preview en vivo con componentes UI.
Pares Rápidos
Colores
WCAG 2.1 Ratio de Contraste
14.89
:1WCAG 2.1 Desglose
Legibilidad excelente
Previsualización
Ejemplo de Título
Así se verá tu texto con los colores seleccionados. Un buen contraste garantiza la legibilidad para todos los usuarios, incluidos aquellos con discapacidades visuales.
Texto secundario con opacidad reducida
Cómo funciona
Esta herramienta calcula el contraste de color según dos estándares: WCAG 2.1 (el actual) y APCA (WCAG 3.0) (el futuro). Acepta colores en cualquier formato (HEX, RGB, HSL, OKLCH, LAB, nombres CSS) y muestra cada color en 5 formatos simultáneamente.
Funcionalidades de esta herramienta
- Input multi-formato: Escribe en HEX, RGB, HSL, OKLCH, LAB o nombres CSS (ej: "steelblue")
- Display multi-formato: Cada color se muestra en HEX, RGB, HSL, OKLCH y LAB con copia individual
- Desglose WCAG 2.1: Badges individuales para Texto Normal AA/AAA, Texto Grande AA/AAA y Componentes UI
- APCA (WCAG 3.0): Puntuación Lc con interpretación de legibilidad
- Sugerencia automática: Cuando el contraste falla, sugiere el color más cercano que pasa AA
- Preview en vivo: Títulos, párrafos, botones, enlaces, checkboxes, radios y toggles
- Pares rápidos: 6 combinaciones predefinidas para pruebas rápidas
- Swap de colores: Intercambia texto/fondo con un clic
WCAG 2.1 vs APCA (WCAG 3.0)
- WCAG 2.1: Ratio simple (4.5:1 para AA, 7:1 para AAA). No considera tamaño ni peso de fuente.
- APCA: Algoritmo avanzado que produce un valor Lc. Considera dirección del contraste (texto sobre fondo vs fondo sobre texto). Lc ≥60 = bueno para texto, Lc ≥75 = excelente.
Niveles de conformidad WCAG 2.1
- Nivel AA: 4.5:1 para texto normal, 3:1 para texto grande (≥24px o ≥18.5px bold)
- Nivel AAA: 7:1 para texto normal, 4.5:1 para texto grande
- Componentes UI: 3:1 para iconos, bordes, estados de focus
💡 Ejemplos de uso prácticos
Caso 1: Botón CTA con sugerencia automática
Tu botón naranja #FF6B35 con texto blanco tiene ratio 3.2:1. La herramienta sugiere automáticamente un naranja más oscuro que pasa AA.
Caso 2: Verificar con OKLCH
Pega directamente oklch(0.55 0.15 265) en el input y la herramienta lo convierte automáticamente. Verás el equivalente en HEX, RGB, HSL y LAB al instante.
Caso 3: Preview de componentes UI
La previsualización muestra títulos, párrafos, botones primarios/secundarios, enlaces, checkboxes, radios y toggles — todo con tus colores. Ajusta tamaño y peso de fuente para ver cómo afecta la legibilidad.