search

Found

info Descripción

Calcula la relación de contraste WCAG 2.1 entre dos colores con 6 verificaciones AA y AAA: texto normal, texto grande y componentes UI.

📘 Cómo usar

  1. Introduce los códigos hexadecimales o selecciona visualmente el color de texto (primer plano) y el color de fondo.
  2. Utiliza el botón de intercambio para invertir rápidamente ambos colores si es necesario.
  3. Revisa la relación de contraste calculada y verifica si la combinación aprueba los niveles AA y AAA.

Verificador de contraste de colores (WCAG 2.1)

Texto normal (16px) — The quick brown fox jumps over the lazy dog. El rápido zorro marrón salta sobre el perro perezoso.

Texto grande (24px negrita)

Relación de contraste

21.00 : 1

AA Nivel

Texto normal (≥ 4.5:1)
Texto grande (≥ 3:1)
Componentes UI (≥ 3:1)

AAA Nivel

Texto normal (≥ 7:1)
Texto grande (≥ 4.5:1)

grid_view Relacionados

Article

Comprobador de Contraste de Color | Verifica la Accesibilidad WCAG

Esta herramienta permite a diseñadores y desarrolladores web calcular la relación de contraste entre dos colores, validando si la combinación es accesible. Es esencial para garantizar que los textos y elementos de la interfaz cumplan con las directrices de legibilidad para todos los usuarios.

💡 Sobre esta herramienta

  • Cálculo de luminancia relativa: Implementa la fórmula estándar para calcular la relación de contraste exacta basándose en la luminancia de los códigos de color introducidos.
  • Evaluación bajo WCAG 2.1: Muestra instantáneamente si la combinación aprueba (PASS) o reprueba (FAIL) los requisitos de los niveles AA y AAA para diferentes tipos de elementos.
  • Previsualización en tiempo real: Observa cómo se ve el texto normal y el texto grande con los colores seleccionados directamente en el área de vista previa.
  • Formatos de entrada flexibles: Soporta códigos hexadecimales de 3 y 6 caracteres y cuenta con selectores de color nativos que se sincronizan automáticamente con el texto ingresado.

🧐 Preguntas frecuentes

Q. ¿Cuáles son los valores requeridos para pasar las pruebas de contraste?

A. Según el estándar WCAG 2.1, para cumplir con el nivel AA, se requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande o componentes de la interfaz de usuario (UI). Para alcanzar el nivel AAA, la relación debe ser mayor o igual a 7:1 para texto normal y 4.5:1 para texto grande.

Q. ¿Qué significa el valor numérico de la relación de contraste (ej. 21.00 : 1)?

A. Es una medida matemática que compara la luminancia del color más claro con la del color más oscuro. La escala va desde 1:1 (no hay contraste, ambos colores son exactamente iguales) hasta 21:1 (el contraste máximo posible, como negro puro sobre blanco puro).

📚 Entendiendo los Niveles AA y AAA de WCAG

Asegurar un buen contraste de color es un pilar fundamental en el desarrollo web moderno y en el diseño de interfaces de usuario (UI). Las métricas calculadas por esta herramienta provienen de algoritmos de conversión sRGB a luminancia lineal, lo que refleja cómo el ojo humano percibe realmente la diferencia de luz entre dos colores.

El nivel AA es el estándar de cumplimiento general requerido para la mayoría de los sitios web y aplicaciones comerciales, asegurando que el contenido sea legible para personas con pérdida de visión moderada. El nivel AAA es el estándar más estricto, diseñado para proporcionar la máxima accesibilidad. Dependiendo de si la relación calculada cae por debajo de 3, supera el 4.5 o alcanza el 7, la herramienta ajustará visualmente los indicadores de aprobación para ayudarte a tomar decisiones de diseño informadas y basadas en datos técnicos precisos.