Go Toolstack

Comprobador de Contraste WCAG

Evalúa la legibilidad de combinaciones de color según las pautas WCAG 2.1 AA y AAA.

Comprobador de Contraste WCAG

Evalúa la legibilidad de combinaciones de color según las pautas WCAG 2.1 AA y AAA.

Cómo funciona

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Descubre más utilidades del lado del cliente en esta categoría

Centro de Herramientas de Desarrollo • Flujos de trabajo y guía de comparación

Explore todas las herramientas de herramientas de desarrollo, límites y guía de selección.

Explorar centro →
Formateador y Validador JSON

Formatea, comprime y valida datos JSON con precisión de 64 bits y reglas de JSON Schema (Draft-07 / 2020-12).
Codificador y Decodificador Base64

Codifica y decodifica texto plano y cadenas binarias seguras para URLs y APIs.
Formateador y Embellecedor SQL

Formatea y organiza consultas complejas para PostgreSQL, MySQL, SQLite y T-SQL.

Guías relacionadas del blog

Guías técnicas, solución de problemas y tutoriales de buenas prácticas

Centro de Conocimiento y Conceptos

Verificador de Contraste de Color, Accesibilidad WCAG 2.1 y Ratios de Luminancia

La accesibilidad digital exige garantizar que los contenidos textuales y los elementos interactivos presenten un contraste cromático suficiente respecto al fondo sobre el que se disponen. Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) establecen fórmulas matemáticas basadas en la luminancia relativa para prevenir que personas con baja agudeza visual, daltonismo o usuarios en pantallas móviles con reflejos solares queden excluidos de la lectura.

Un diseñador de interfaces audita la legibilidad de un botón de llamada a la acción que utiliza un texto en color gris claro (#94A3B8) sobre un fondo blanco puro (#FFFFFF). Al introducir ambos códigos hexadecimales en la herramienta, el motor calcula la luminancia relativa de cada color en el espacio sRGB linealizado y determina un ratio de contraste de 2,36:1. La herramienta emite un aviso de incumplimiento general (Fallo en niveles AA y AAA). Al oscurecer el tono del texto a un gris grafito pizarra (#475569), el ratio asciende a 5,57:1, superando con holgura el umbral mínimo de 4,5:1 exigido para texto normal en nivel AA y certificando la conformidad legal del componente para auditorías de accesibilidad.

El verificador calcula simultáneamente los requisitos para texto normal, texto grande (más de 18 pt o 14 pt negrita) y componentes gráficos de interfaz, ofreciendo sugerencias de ajuste en tiempo real.

Arquitectura Central y Fórmula Matemática

Luminancia Relativa (L) = 0,2126R' + 0,7152G' + 0,0722B' ; Ratio Contraste = (L1 + 0,05) / (L2 + 0,05)

Donde L1 es la luminancia del color más claro y L2 la del más oscuro. Los valores R', G' y B' se desgammaízan a espacio sRGB lineal según la fórmula de la W3C.

Mejores Prácticas y Pautas Esenciales

  • Exigir un ratio mínimo de 4,5:1 para el cuerpo de texto general: El nivel AA de WCAG 2.1 requiere este contraste para fuentes de tamaño estándar; el nivel más exigente AAA demanda un ratio de 7:1.
  • Aplicar el umbral reducido de 3:1 para titulares y texto grande: Para textos de más de 24 px (o 18,6 px si tienen peso negrita), el ratio mínimo admisible desciende a 3:1 en nivel AA.
  • No apoyarse únicamente en el color para transmitir información o estados: Acompañe los mensajes de alerta o error con iconos, subrayados o etiquetas textuales para no discriminar a usuarios daltónicos.
  • Comprobar el contraste en estados interactivos :hover y :focus: Asegúrese de que los cambios de tonalidad al pasar el cursor o navegar con tabulador sigan respetando los ratios de contraste reglamentarios.

Preguntas Frecuentes (FAQ)

¿Qué significa cumplir el nivel AA frente al nivel AAA en contraste de color?
El nivel AA es el estándar legal obligatorio exigido por directivas europeas y normativas internacionales de accesibilidad (4,5:1). El nivel AAA (7:1) es una recomendación reforzada para entornos de máxima accesibilidad.
¿Cómo se calcula el contraste sobre fondos con degradados o fotografías?
Debe evaluarse el punto del degradado o imagen que ofrezca la luminancia más desfavorable respecto al texto. Si no se alcanza el ratio mínimo, añada una capa semitransparente o sombra de soporte.
¿Aplica la normativa de contraste a los logotipos o marcas registradas?
No. La especificación WCAG excluye explícitamente logotipos corporativos y textos incidentales integrados en imágenes fotográficas de los requisitos obligatorios de ratio de contraste.
¿Permite la herramienta evaluar colores definidos en formatos RGB o HSL?
Sí. Admite la introducción de valores en hexadecimal, RGB funcional (rgb(37, 99, 235)) y HSL, normalizándolos internamente para el cálculo matemático de luminancia.