Verificador de Contraste de Color
Verifica ratios de contraste de color para cumplimiento WCAG 2.1. Valida estándares AA y AAA al instante.
¿Qué es la relación de contraste WCAG?
La relación de contraste WCAG mide la diferencia de luminancia entre colores de primer plano y fondo. Va de 1:1 a 21:1. Ratios más altos significan mejor legibilidad.
¿Cuáles son los requisitos WCAG AA y AAA?
WCAG AA requiere un mínimo de 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.
¿Qué cuenta como texto grande?
Texto grande se define como 18pt (24px) o mayor, o 14pt (18.66px) negrita o mayor. Tiene requisitos de contraste más bajos.
¿Por qué es importante el contraste de color?
El contraste adecuado asegura que el texto sea legible para personas con discapacidades visuales y mejora la legibilidad para todos en diversas condiciones.
¿Cómo calculo la relación de contraste?
Se calcula usando los valores de luminancia relativa. La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro.
¿Cuál es el contraste mínimo para elementos UI?
WCAG requiere un mínimo de 3:1 para componentes UI y objetos gráficos. Esto asegura que botones e iconos sean visibles.
¿Puedo usar cualquier combinación de colores?
No todas las combinaciones cumplen estándares de accesibilidad. Use este verificador para validar sus elecciones de color.
¿Qué es la luminancia relativa?
Es el brillo percibido de un color, de 0 (negro) a 1 (blanco). Se calcula usando el espacio de color sRGB.
¿Debo verificar el contraste en imágenes?
El texto dentro de imágenes debe cumplir los mismos requisitos. Para imágenes decorativas no aplica.
¿Qué herramientas ayudan con el contraste?
Use herramientas de desarrollador del navegador, plugins de diseño o verificadores online como este.
Cómo usar Verificador de Contraste de Color
Verifica al instante si el contraste de tu texto e interfaz cumple los umbrales AA y AAA de WCAG 2.1, todo en tu navegador. Introduce dos colores y la relación se calcula localmente: nada sale de tu dispositivo.
- Escribe o pega el color del texto en el campo Foreground Color, en cualquier formato admitido como HEX o RGB.
- Rellena el campo Background Color con el color que hay detrás del texto para calcular la relación de contraste.
- Consulta la relación resultante y las insignias de aprobación AA y AAA para texto normal y texto grande.
- Ajusta cualquiera de los dos colores hasta superar 4,5:1 en texto de cuerpo o 3:1 en texto grande y componentes de interfaz.
- Intercambia los valores de Foreground Color y Background Color para probar la combinación inversa, por ejemplo texto claro sobre tema oscuro.
AAA (7:1) es un gran objetivo para lecturas largas, pero 4,5:1 (AA) es el mínimo que exigen la mayoría de las guías de accesibilidad.
Herramientas relacionadas
- Selector de Color Selecciona cualquier color de la pantalla con el cuentagotas. Copia códigos HEX, RGB, HSL al instante. Herramienta gratuita.
- Generador de Paleta de Colores Crea paletas de colores hermosas y armoniosas al instante con nuestro generador online gratuito. Soporta modos monocromático, análogo, complementario, triádico, split-complementario y tetradício. Ajusta colores con controles HSL, bloquea favoritos y exporta como CSS, Tailwind, JSON o SVG. 100% basado en navegador, tus datos nunca salen de tu dispositivo.
- Simulador de Daltonismo Simulador gratuito de daltonismo online. Pruebe diseños para Protanopía, Deuteranopía, Tritanopía y otros tipos. 100% privado, funciona en su navegador.
- GIF Extraer Fotogramas Extrae y descarga fotogramas individuales de animaciones GIF como PNG o sprite sheet. Herramienta online gratuita con vista previa y exportación ZIP.
- GIF Invertido Invierte el orden de reproducción de animaciones GIF online gratis. Sube, previsualiza y descarga GIFs invertidos al instante.
- Cambiador de Velocidad GIF Cambia la velocidad de animación GIF en línea. Acelera o ralentiza archivos GIF al instante.
- Video a GIF Convierte vídeo a GIF animado online. Ajusta calidad, velocidad de fotogramas y resolución directamente en tu navegador sin subir archivos.
- Creador de Memes Creador de memes gratis en línea. Añade textos clásicos arriba y abajo a cualquier imagen, arrastra el texto y descarga tu meme en PNG o JPEG al instante.