Tools Hub
Englishالعربية
Herramienta en Imágenes

Comprobador de Contraste WCAG

Asegura la legibilidad de tus diseños verificando el ratio de contraste frente a las normas WCAG.

Comenzar ahoraTodas las herramientas en Imágenes

Privacidad: Los cálculos de luminancia relativa y contraste se ejecutan en local según las fórmulas oficiales de W3C.

Procesamiento seguro sin conexión

Los datos y archivos que proceses nunca se transfieren a ningún servidor remoto.

View in English

Colours

Result

Large heading sample

Body text sample: the quick brown fox jumps over the lazy dog.

Large text sample at 18.66px bold

Contrast ratio
14.68:1Higher is better. Body text needs at least 4.5:1.
Verdict for body text
Passes AA2.5:1 would be the bare minimum for decorative graphics only.
WCAG checks
CheckNeedsResult
AA body text (4.5:1)4.5:1Pass
AA large text (3:1)3:1Pass
AAA body text (7:1)7:1Pass
AAA large text (4.5:1)4.5:1Pass
UI component or graphic (3:1)3:1Pass

Evalúa el contraste cromático entre el color de texto (primer plano) y el fondo según las directrices de accesibilidad web WCAG 2.1. Calcula el ratio numérico exacto (desde 1:1 hasta 21:1) y determina si cumple los niveles de conformidad AA y AAA para texto normal (mínimo 4.5:1), texto grande (mínimo 3:1) e interfaces interactivas.

Cómo usar Comprobador de Contraste WCAG

  1. Introduce o selecciona el color del texto en formato hexadecimal o RGB.
  2. Introduce o selecciona el color de fondo sobre el que se mostrará.
  3. Consulta el ratio numérico de contraste calculado en tiempo real.
  4. Revisa las insignias de aprobación para los niveles AA y AAA en texto normal y grande.

Qué obtienes

  • Ratio numérico exacto de contraste (ej. 7.42:1).
  • Indicadores de cumplimiento para WCAG 2.1 niveles AA y AAA.
  • Muestra visual interactiva con simulación de lectura a diferentes tamaños.

Casos de uso de Comprobador de Contraste WCAG

  • Verificar paletas de color corporativas antes de aplicarlas en sitios web y apps.
  • Auditar la accesibilidad visual de botones, enlaces y campos de formulario.
  • Asegurar el cumplimiento de normativas de accesibilidad legal en portales públicos.

Preguntas frecuentes sobre Comprobador de Contraste WCAG

¿Cuál es el ratio mínimo exigido para texto estándar en nivel AA?

La norma internacional WCAG 2.1 exige un ratio de contraste de al menos 4.5:1 para texto estándar o pequeño, y de al menos 3:1 para texto de gran tamaño (equivalente a 18 puntos o 14 puntos en negrita) y componentes interactivos de interfaz.

¿Qué significa el nivel AAA de accesibilidad?

Es el estándar más riguroso de accesibilidad web de la W3C. Exige un ratio mínimo de 7:1 para texto normal y de 4.5:1 para texto grande, garantizando una legibilidad óptima para personas con baja agudeza visual o pérdidas severas de percepción cromática.

¿Cómo se calcula matemáticamente la luminancia relativa entre dos colores?

La luminancia relativa normaliza los componentes RGB según la percepción visual humana de los colores verde, rojo y azul. El ratio de contraste se calcula sumando 0.05 a la luminancia del color más claro y dividiéndola entre la del más oscuro.

¿Se envían los colores de mi marca a algún servidor para comprobarlos?

No, la fórmula de contraste se resuelve de forma instantánea mediante JavaScript en el navegador del usuario. Puedes experimentar con todas las combinaciones cromáticas de tu marca corporativa con total tranquilidad y privacidad.

Herramientas relacionadas

  • Calculadora de Relación de Aspecto

    Calcula y simplifica proporciones de imagen, halla dimensiones faltantes y comprueba relaciones de aspecto estándar.

  • Base64 a Imagen

    Decodifica cadenas Base64 y data URLs en imágenes PNG, JPG, WebP o ICO descargables.

  • Simulador de Daltonismo

    Simula deuteranopía, protanopía, tritanopía y acromatopsia en imágenes para evaluar accesibilidad.

  • Convertidor de colores

    Convierte valores de color entre HEX, RGB, HSL y CMYK con vista previa en vivo.

⚡Incrustar Comprobador de Contraste WCAG en tu sitio web↓

Copia el código de inserción o la insignia para integrar esta herramienta en tu sitio web, blog o documentación.

Altura:
<iframe src="https://salaq.com/embed/image/contrast-checker" title="Comprobador de Contraste WCAG — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Desarrollado con <a href="https://salaq.com/es/tools/image/contrast-checker" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Comprobador de Contraste WCAG en Tools Hub</a></p>

Volver a Imágenes