♀

contraste colores WCAG

Prueba varios pares de color de texto/fondo con los estándares WCAG 2.1 AA y AAA. La vista previa en vivo muestra exactamente cómo se verá el texto en distintos tamaños y pesos.

Herramientas de diseño Se ejecuta localmente No se envían datos
WCAGaccesibilidadrelación de contrastea11y
Exportar pares de colores 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18 pt o 14 pt en negrita). WCAG AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. Apuntar a AA es el mínimo legal en la mayoría de las regulaciones de accesibilidad.
    

  


  



  

    
¿Qué es el verificador contraste WCAG AA?

    
Comprueba las relaciones de contraste de color según los estándares WCAG AA y AAA. Prueba varios pares de color texto/fondo a la vez. Gratis, basado en el navegador, sin enviar datos.

  


  

    
Cómo usar el verificador contraste WCAG

    
    
      
  1. Introduce un color de primer plano (texto) y un color de fondo con los selectores de color o escribiendo valores HEX.
    2. 
      
  2. La herramienta calcula al instante la relación de contraste entre los dos colores.
    3. 
      
  3. Comprueba los resultados de aprobado/fallido de AA y AAA para texto normal y texto grande.
    4. 
      
  4. Ajusta los colores hasta que tu combinación cumpla el nivel WCAG que necesitas.
    5. 
      
  5. Copia los valores de color que cumplen para usarlos en tu CSS.
    6. 
    

  






  
Herramientas relacionadas

  

    👁️
simulador daltonismo
Simula protanopía, deuteranopía y tritanopía en cualquier imagen

    🎨
selector de color
Convierte colores entre HEX, RGB, HSL y CMYK

    🎨
generador paleta colores
Genera paletas de colores complementarias, análogas y triádicas

  






  
    Entiende el contraste WCAG AA
    ▾
  
  

    

      Ejemplo
      

        

          

            Entrada
            Primer plano #1F2937 sobre fondo #FFFFFF
          

          

            Salida
            Cumple WCAG AA para texto normal y texto grande
          

        

      

    

    

      Casos de uso comunes
      

        
    
          
  • Comprueba los colores de texto frente a WCAG AA antes del lanzamiento
    • 
          
  • Revisa regresiones de accesibilidad en los tokens del sistema de diseño
    • 
          
  • Verifica por separado el contraste del texto de encabezado y del cuerpo
    • 
          
  • Entrega pares de colores conformes a los equipos de producto
    • 
        

      

    

    

      Preguntas frecuentes
      

        
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel de conformidad estándar exigido por la mayoría de las normativas. AAA es mejorado —no se exige para todo el contenido, pero mejora la legibilidad.

        
¿Comprueba el contraste de elementos no textuales?
WCAG 1.4.11 exige un contraste de 3:1 para componentes de interfaz y elementos gráficos —este comprobador cubre ese requisito.

        
¿Qué hace contraste colores WCAG - prueba por lotes AA/AAA?
La herramienta contraste colores WCAG - prueba por lotes AA/AAA se ejecuta completamente en tu navegador y te ayuda a completar esta tarea sin subir datos a un servidor.

        
¿Es gratuita la herramienta contraste colores WCAG - prueba por lotes AA/AAA?
Sí. Esta herramienta es gratis y no requiere registro.