Calculadora de Contraste
Verifica el contraste de colores para accesibilidad WCAG online gratis. Calcula la relacion de contraste, prueba conformidad AA/AAA y simula daltonismo.
Colores para Probar
Relacion de Contraste
Excelente! Pasa todos los niveles WCAG
Texto Pequeno
4.5:1
Texto Grande
3:1
Texto Pequeno
7:1
Texto Grande
4.5:1
Vista Previa del Texto
Este es un ejemplo de texto pequeno (14px). La accesibilidad es importante.
Texto mediano (18px) con fuente normal
Texto Grande (24px Bold)
Simulacion de Daltonismo
Sobre Contraste y Accesibilidad
El contraste de colores es fundamental para la accesibilidad web. Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen algun tipo de deficiencia en la vision de colores. Un contraste adecuado garantiza que tu contenido sea legible para todos los usuarios.
Niveles WCAG
- AA Texto Pequeno: Relacion minima de 4.5:1 para texto normal (menor que 18px o 14px bold)
- AA Texto Grande: Relacion minima de 3:1 para texto grande (18px+ o 14px+ bold)
- AAA Texto Pequeno: Relacion minima de 7:1 para texto normal - nivel mas estricto
- AAA Texto Grande: Relacion minima de 4.5:1 para texto grande - nivel mas estricto
Tipos de Daltonismo
Deuteranopia (ceguera al verde) y protanopia (ceguera al rojo) son los tipos mas comunes. Tritanopia (ceguera al azul) es mas rara. Probar tus colores con simulaciones ayuda a garantizar que tu diseno funcione para todos.
Consejos de Accesibilidad
Nunca dependas solo del color para transmitir informacion - usa tambien iconos, texto o patrones. Prueba tu diseno con diferentes simulaciones de daltonismo. Usa herramientas de contraste durante el desarrollo, no solo al final.
Preguntas Frecuentes
WCAG (Web Content Accessibility Guidelines) son directrices de accesibilidad web. Definen requisitos mínimos de contraste para legibilidad.