Funcionamiento del Comprobador de contraste
Esta herramienta permite introducir un color de texto y un color de fondo para determinar su relación de contraste de acuerdo con los estándares WCAG 2.1 / 2.2. A continuación, muestra qué niveles de accesibilidad (AA y AAA) cumple la combinación de colores para texto normal, texto grande y componentes de interfaz de usuario (UI).
Al iniciar la herramienta, los colores iniciales establecidos son el #4f46e5 para el texto y el #ffffff para el fondo, lo que da como resultado una relación de contraste de 6.29. Si desea invertir estas tonalidades, el botón de intercambio le permite alternar rápidamente los colores de texto y fondo.
Valores de entrada admitidos
Para realizar la comprobación, debe indicar los siguientes datos en los campos correspondientes:
- Color de texto: Un valor de color.
- Color de fondo: Un valor de color.
Los formatos aceptados para ambos campos son los valores hexadecimales (por ejemplo, #1a1a1a), los valores rgb() (por ejemplo, rgb(26, 26, 26)) o los valores hsl().
En caso de introducir un formato incorrecto, la herramienta mostrará los siguientes mensajes de error:
- Si el color de texto no es válido: «Introduce un color de texto válido, como #1a1a1a o rgb(26, 26, 26).»
- Si el color de fondo no es válido: «Introduce un color de fondo válido, como #ffffff o rgb(255, 255, 255).»
Resultados y niveles de conformidad
Una vez procesados los colores, la herramienta ofrece un desglose detallado con los siguientes resultados:
- Relación de contraste: Muestra la proporción calculada entre el color del texto y el del fondo, representada en el formato "X:1". Esta relación oscila entre un mínimo de 1:1 (cuando no hay contraste) y un máximo de 21:1 (que corresponde al negro sobre blanco).
- Texto normal: Indica «Cumple» o «No cumple» para los niveles AA y AAA.
- Texto grande: Indica «Cumple» o «No cumple» para los niveles AA y AAA.
- UI y gráficos: Indica «Cumple» o «No cumple» frente a un único umbral de 3:1. Esta fila no presenta una distinción entre los niveles AA y AAA, por lo que la herramienta muestra un único resultado para ella.
- Veredicto: Un mensaje de resumen que señala el nivel de conformidad más alto que se ha superado. Los mensajes posibles son:
- «Cumple AA y AAA para texto normal.»
- «Cumple AA para texto normal.»
- «Solo cumple AA para texto grande.»
- «Por debajo del mínimo AA: sube el contraste.»
Reglas de contraste y requisitos de WCAG 2.1 / 2.2
La herramienta realiza sus cálculos aplicando la fórmula oficial de las directrices WCAG 2.1 / 2.2. Para determinar si una combinación es accesible, se aplican de forma estricta las siguientes reglas y umbrales de contraste:
- Texto normal: El nivel AA requiere una relación de contraste mínima de al menos 4.5:1, mientras que el nivel AAA exige una relación de al menos 7:1.
- Texto grande: El nivel AA requiere una relación de al menos 3:1, y el nivel AAA exige un mínimo de 4.5:1. Se define como texto grande aquel que tiene un tamaño a partir de 18pt (aproximadamente 24px), o a partir de 14pt (aproximadamente 18.5px) si se utiliza en negrita.
- UI y gráficos: Este apartado requiere una relación de contraste mínima de al menos 3:1. A diferencia de las categorías de texto, esta es la única fila que cuenta con un único umbral en lugar de niveles AA y AAA separados.
Destinatarios de la herramienta
El análisis de contraste es un paso fundamental para diferentes perfiles profesionales que participan en la creación de productos digitales:
- Diseñadores: Les permite comprobar de forma rápida la legibilidad de los textos y de los diferentes componentes visuales que integran sus interfaces.
- Desarrolladores: Les ayuda a asegurar que el código y los estilos implementados cumplen rigurosamente con los estándares de accesibilidad requeridos.
- Equipos de contenido: Les sirve para verificar que el contraste de color en sus materiales y publicaciones es el adecuado antes de su difusión.
Privacidad y procesamiento de datos
La privacidad de los datos introducidos está totalmente protegida durante el uso de la herramienta. Cada comprobación se realiza de manera local directamente en su navegador web, lo que significa que nada de lo que introduce se sube a los servidores de BroBroGo.
Preguntas frecuentes
¿Qué significan los resultados AA y AAA? AA es el nivel al que apunta la mayoría de los sitios: exige una relación de al menos 4.5:1 para texto normal y 3:1 para texto grande. AAA es más exigente: 7:1 para texto normal y 4.5:1 para texto grande. La relación va de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
¿Qué se considera texto grande? El texto a partir de 18pt (unos 24px), o de 14pt (unos 18.5px) si está en negrita. El texto grande sigue siendo legible con menos contraste, así que cumple AA a 3:1 y AAA a 4.5:1, en lugar de los umbrales más estrictos del texto normal.
¿Qué formatos de color puedo introducir? Escribe un valor hex como #1a1a1a, un valor rgb() como rgb(26, 26, 26) o un valor hsl(); también puedes hacer clic en cualquiera de las muestras para elegir un color. Usa el botón de intercambio para invertir los colores de texto y fondo.
¿Es WCAG 2 o el método APCA más reciente? Usa la fórmula de WCAG 2.1 / 2.2, la que hoy toman como referencia las normas de accesibilidad y las auditorías. APCA es un método más nuevo y perceptual, todavía en borrador para WCAG 3: prometedor, pero aún no es un estándar de conformidad, así que los resultados de aquí no se basan en él.