CLIENT ENGINE // AIR-GAPPED

Verificador de Contraste de Color WCAG 2.1

Verifica pares de colores de primer plano y fondo frente a los umbrales de accesibilidad W3C WCAG 2.1 AA y AAA con vistas previas en vivo de tipografía y componentes UI.

APPARATUS // CONTRAST-CHECKER VERIFIED OK // 0.0ms

Tabla de Referencia Rápida

Texto Normal WCAG AA Relación ≥ 4.5 : 1

Texto Normal WCAG AAA Relación ≥ 7.0 : 1

Texto Grande WCAG AA Relación ≥ 3.0 : 1

Componentes UI e Iconos ≥ 3.0 : 1 (SC 1.4.11)

Relación Máxima Teórica 21.0 : 1 (#000 vs #FFF)

Fórmula Matemática

C = \frac{L_{\max} + 0.05}{L_{\min} + 0.05}, \quad L = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}

Relación de contraste W3C WCAG 2.1 obtenida a partir de los valores de luminancia relativa sRGB linealizados por gamma.

Descripción General y Contexto Técnico

Las normativas internacionales de accesibilidad digital —incluidas las Pautas de Accesibilidad para el Contenido Web del W3C (WCAG 2.1 / ISO/IEC 40500), el Acta Europea de Accesibilidad (EN 301 549), la Sección 508 y la ley ADA (Títulos II y III)— exigen relaciones estrictas de contraste de luminancia entre el texto en primer plano o los elementos gráficos de la interfaz de usuario y las superficies de fondo sobre las que se apoyan. Un contraste suficiente garantiza que las personas con baja visión moderada, degeneración macular asociada a la edad, protanopía, deuteranopía o pantallas móviles bajo luz solar intensa puedan leer el contenido sin depender de lupas de asistencia.

A diferencia de las fórmulas simples de diferencia RGB, el estándar WCAG 2.1 calcula el contraste a partir de la luminancia relativa sRGB linealizada (L). Dado que los conos fotorreceptores del ojo humano son mucho más sensibles a las longitudes de onda verdes (71.52%) que a las rojas (21.26%) o azules (7.22%), el azul puro saturado (#0000FF) tiene una luminancia relativa de apenas 0.0722, mientras que el verde puro (#00FF00) alcanza 0.7152. Cada canal sRGB de 8 bits se somete primero a una expansión gamma hacia intensidad lumínica lineal y se pondera antes de calcular la relación de contraste (L1 + 0.05) / (L2 + 0.05), produciendo una escala que va desde 1:1 (colores idénticos invisibles) hasta 21:1 (negro puro sobre blanco puro).

El Verificador de Contraste de Color WCAG 2.1 de Kitiverse evalúa Texto Normal, Texto Grande (18pt+ o 14pt+ en negrita) y Componentes de Interfaz No Textuales en tiempo real a medida que ajustas los códigos hexadecimales o los selectores visuales. Todos los cálculos se ejecutan de manera 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo.

Cómo comprobar las relaciones de contraste de color WCAG 2.1 online

Pon a prueba cualquier color de texto en primer plano y superficie de fondo para verificar el cumplimiento de accesibilidad AA y AAA.

Introduce el código HEX de Primer Plano (Texto) y el código HEX de la Superficie de Fondo, o selecciona los colores visualmente mediante los selectores de muestras nativos.

Inspecciona la Relación de Contraste WCAG 2.1 en vivo y las cuatro insignias APROBADO/FALLO para AA Normal (4.5:1), AAA Normal (7.0:1), AA Grande (3.0:1) e Iconos UI (3.0:1).

Haz clic en 'Intercambiar' para invertir los roles de primer plano y fondo y comprobar cómo se comporta tu par de colores en botones o insignias invertidas.

Haz clic en 'Copiar informe CSS' para llevar al portapapeles las declaraciones CSS color y background-color verificadas junto con un comentario que documenta su relación exacta de contraste WCAG.

Preguntas Frecuentes

¿Cuál es la relación de contraste mínima exigida para el Nivel AA de WCAG 2.1?

Según el Criterio de Conformidad 1.4.3 de WCAG 2.1 (Contraste mínimo), el texto de cuerpo normal inferior a 18pt (24px) o inferior a 14pt en negrita (18.66px en negrita) debe alcanzar una relación de contraste de al menos 4.5:1 frente a su fondo. El texto a gran escala y los bordes o iconos activos de la interfaz requieren al menos 3.0:1.

¿Cuándo se requiere el Nivel AAA de WCAG 2.1 (7.0:1)?

El Nivel AAA de WCAG exige una relación de contraste mínima de 7.0:1 para el texto normal y de 4.5:1 para el texto grande. Aunque el Nivel AA constituye el estándar legal habitual para la mayoría de los sitios web públicos y gubernamentales, se recomienda encarecidamente el Nivel AAA para portales médicos, estados financieros, documentación jurídica y plataformas de lectura prolongada.

¿Intercambiar el color de primer plano y el de fondo modifica la relación de contraste WCAG?

No. La fórmula matemática de WCAG 2.1 divide (L_más_claro + 0.05) entre (L_más_oscuro + 0.05), por lo que resulta simétrica con independencia de qué color se asigne al texto o al fondo. No obstante, la percepción visual humana (abordada en el futuro algoritmo APCA de WCAG 3.0) puede percibir el texto claro sobre fondos oscuros de forma ligeramente distinta debido al efecto de halación.

¿Qué se considera 'Texto Grande' según las especificaciones WCAG del W3C?

El W3C define el texto a gran escala como aquel que tiene al menos 18 puntos tipográficos (lo que equivale a 24 píxeles CSS a 96 PPP) en fuentes de grosor regular, o al menos 14 puntos (aproximadamente 18.66 píxeles CSS) en fuentes en negrita (font-weight: 700 o superior).

¿Deben los bordes de los campos de formulario y los iconos superar las pruebas de contraste?

Sí. El Criterio de Conformidad 1.4.11 de WCAG 2.1 (Contraste no textual) exige que los componentes activos de la interfaz de usuario (como bordes de entradas de texto, anillos de enfoque, casillas de verificación e iconos interactivos independientes) mantengan una relación de contraste mínima de 3.0:1 respecto a los colores adyacentes.

¿Se almacenan o rastrean los colores de mi sistema de diseño en servidores externos?

No. Kitiverse es 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo. Cada cálculo de luminancia y contraste se realiza localmente dentro de tu propio navegador.

Instrumentos Relacionados en Este Banco

Todas las herramientas de Color y Diseño →

Color y Diseño →

Conversor de Color HEX, RGB, HSL y CMYK

Conversor bidireccional de códigos de color de 24 bits que traduce entre notación hexadecimal (#RRGGBB), CSS RGB/RGBA, HSL cilíndrico y CMYK sustractivo para imprenta.

Color y Diseño →

Selector de Color y Generador de Paletas

Conversión de color multiformato (HEX, RGB, HSL, OKLCH), cálculo instantáneo de contraste de accesibilidad WCAG 2.1 y generación de paletas armónicas pastel.

Imagen y Gráficos →

Redimensionador de Imágenes y Calculadora de Relación de Aspecto

Cambia el tamaño de imágenes PNG, JPEG y WebP a dimensiones exactas en píxeles, bloquea la relación de aspecto mediante simplificación MCD (16:9, 4:5, 1:1) y calcula tamaños de impresión a 300 DPI localmente.

Estudio de Video →

Recortador de Vídeo

Recorta archivos de vídeo online a formato 9:16 para TikTok y Reels, 1:1 para Instagram o proporciones personalizadas directamente en tu navegador. Rápido, 100% privado y sin subidas al servidor.

Estudio de Video →

Eliminador de Audio de Vídeo

Elimina pistas de audio y sonido de vídeos MP4, MOV y WebM online directamente en tu navegador. Rápido, 100% privado y con cero subidas al servidor.

Documentos y PDF →

Organizador y Divisor de PDF

Organiza, reordena, rota, divide y combina páginas PDF directamente en tu navegador. Incluye reordenamiento visual con miniaturas, extracción de rangos personalizados, unión multidocumento y procesamiento 100% privado sin subidas.

Nota de Ejecución y Verificación en el Cliente:

Esta utilidad se ejecuta 100% localmente en tu navegador con almacenamiento en tu dispositivo y cero envíos a servidores. Todos los resultados se proporcionan "tal cual"; por favor valida los datos, códigos y archivos críticos antes de usarlos en producción.