Verificador de Contraste de Color

Comprueba ratios de contraste de color según los requisitos WCAG 2.2 AA y AAA con puntuación APCA, simulación de daltonismo y sugerencias automáticas.

Verificador de contraste de color
Texto grande (24px) — Encabezado Texto normal (16px) — El veloz murciélago hindú comía feliz cardillo y kiwi. Texto pequeño (12px) — Información secundaria y subtítulos
Componentes de IU Botón Campo de entrada
WCAG 2.2 Relación de contraste
—
APCA Contraste de luminosidad (Lc)
—
—
Conformidad WCAG 2.2
AA Texto normal (≥ 4.5:1) —
AA Texto grande (≥ 3:1) —
AAA Texto normal (≥ 7:1) —
AAA Texto grande (≥ 4.5:1) —
1.4.11 No textual (≥ 3:1) —
Simulación de deficiencia de visión cromática
Protanopía ~1% hombres
Sin células cono rojas
Texto de muestra
—
Deuteranopía ~1% hombres
Sin células cono verdes
Texto de muestra
—
Tritanopía ~0,003%
Sin células cono azules
Texto de muestra
—
Acromatopsia ~0,003%
Sin visión cromática (monocromático)
Texto de muestra
—

Acerca de esta herramienta

Verifica que tus combinaciones de colores cumplen los requisitos de accesibilidad utilizando tanto el ratio de contraste de WCAG 2.2 como la métrica más reciente APCA (Accessible Perceptual Contrast Algorithm). La herramienta también simula cómo se perciben los colores por personas con diferentes tipos de deficiencia en la visión del color y sugiere correcciones cuando el contraste es insuficiente.

Características

  • Ratio de contraste WCAG 2.2 — aprobado/suspendido para niveles AA y AAA (texto y no-texto)

  • Puntuación APCA Lc — contraste perceptual del borrador de WCAG 3.0, con recomendaciones de uso

  • Simulación de daltonismo — previsualizaciones de protanopia, deuteranopia, tritanopia y acromatopsia con ratios de contraste simulados

  • Sugerencias automáticas — cuando el contraste falla, haz clic en una sugerencia para aplicar el color más cercano que aprueba

  • Contraste no-texto — verificación WCAG 2.2 SC 1.4.11 para componentes de interfaz y objetos gráficos (≥ 3:1)

  • Visualización multiformato — consulta y copia colores en HEX, RGB y HSL

  • Previsualización en vivo — observa texto en diferentes tamaños y componentes de interfaz con tu par de colores

  • Enlaces compartibles — los colores se codifican en la URL para compartir fácilmente

  • Exportación CSS — copia los colores como propiedades personalizadas CSS

Requisitos de contraste WCAG 2.2

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 definen cuatro umbrales de contraste según el tamaño del texto y el nivel de conformidad:

  • AA Texto normal — ratio mínimo de 4.5:1. Se aplica a texto menor de 18pt (24px) o 14pt (18.66px) en negrita.

  • AA Texto grande — ratio mínimo de 3:1. Para texto de 18pt+ (24px) o 14pt+ en negrita (18.66px).

  • AAA Texto normal — ratio mínimo de 7:1 (mejorado). Mismas reglas de tamaño que AA.

  • AAA Texto grande — ratio mínimo de 4.5:1. Nivel mejorado para texto grande.

  • No-texto (SC 1.4.11) — ratio mínimo de 3:1. Se aplica a componentes de interfaz (botones, campos de entrada, bordes) y objetos gráficos que transmiten información.

APCA — La próxima generación

APCA (Accessible Perceptual Contrast Algorithm) se está desarrollando para WCAG 3.0. A diferencia de WCAG 2.x, que usa un simple ratio de luminancia, APCA tiene en cuenta la percepción visual humana, incluyendo:

  • Sensibilidad a la polaridad — el texto oscuro sobre fondo claro se percibe de forma diferente al texto claro sobre fondo oscuro

  • Conciencia del tamaño de fuente — el valor Lc se corresponde con tamaños y pesos de fuente recomendados

  • Frecuencia espacial — las fuentes finas necesitan más contraste que las negritas

Guía de uso del valor APCA Lc:

  • Lc ≥ 90 — Preferido para texto de cuerpo

  • Lc ≥ 75 — Bueno para texto de cuerpo, perfecto para texto grande

  • Lc ≥ 60 — Solo para texto grande y encabezados

  • Lc ≥ 45 — Solo para elementos grandes no-texto

  • Lc ≥ 30 — Elementos no-texto (iconos, bordes, divisores)

  • Lc < 15 — No utilizable para ningún propósito

Deficiencia en la visión del color

Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen alguna forma de deficiencia en la visión del color. La simulación utiliza matrices de transformación Brettel/Viénot para mostrar cómo se percibe tu par de colores por personas con:

  • Protanopia (~1% de los hombres) — ausencia de células cono rojas. El rojo se ve oscuro, se pierden las diferencias rojo-verde.

  • Deuteranopia (~1% de los hombres) — ausencia de células cono verdes. La forma más común. Confusión verde-rojo.

  • Tritanopia (~0,003%) — ausencia de células cono azules. Se ven afectados el azul y el amarillo.

  • Acromatopsia (~0,003%) — ceguera al color completa. Solo se perciben diferencias de luminancia.

Cada tarjeta de simulación muestra el ratio de contraste simulado para que puedas verificar que tus colores funcionan para todos los usuarios.

Cómo usar

  1. Selecciona o escribe los colores de primer plano (texto) y fondo en formato HEX

  2. Consulta las puntuaciones WCAG 2.2 y APCA, junto con el indicador visual de contraste

  3. Revisa las simulaciones de daltonismo — cada tarjeta muestra el ratio de contraste percibido

  4. Si el contraste falla, haz clic en una sugerencia para aplicar automáticamente el color más cercano que aprueba

  5. Pulsa los botones RGB/HSL para copiar el color en ese formato

  6. Usa Copy CSS para exportar como propiedades personalizadas o Share Link para compartir la URL con los colores codificados

  7. Usa el botón de intercambio para invertir los colores de primer plano y fondo

Privacidad

Todos los cálculos de contraste se realizan íntegramente en tu navegador. Ningún dato de color se transmite a ningún servidor. El enlace compartible solo codifica los colores en los parámetros de la URL.

Referencia de comandos Linux

Puedes calcular ratios de contraste desde la terminal usando Python u otras herramientas:

Calcular ratio de contraste WCAG

python3 -c " def lum(h): r,g,b = [int(h[i:i+2],16)/255 for i in (0,2,4)] r,g,b = [(c/12.92 if c<=0.04045 else ((c+0.055)/1.055)**2.4) for c in (r,g,b)] return 0.2126*r + 0.7152*g + 0.0722*b fg,bg = lum('1a1a2e'), lum('ffffff') ratio = (max(fg,bg)+0.05)/(min(fg,bg)+0.05) p = lambda ok: 'Pass' if ok else 'Fail' print(f'Ratio: {ratio:.2f}:1') print(f'AA Normal: {p(ratio>=4.5)}') print(f'AAA Normal: {p(ratio>=7)}') "
Ratio: 17.06:1AA Normal: PassAAA Normal: Pass

Extraer colores dominantes de una imagen

convert image.png -colors 5 -unique-colors txt:- | tail -n +2
0,0: (26,26,46) #1A1A2E srgb(26,26,46)0,1: (22,78,99) #164E63 srgb(22,78,99)0,2: (240,240,240) #F0F0F0 srgb(240,240,240)

Comprobar varios pares de colores por lotes

echo "1a1a2e:ffffff 333333:f5f5f5 ff0000:ffffff 777777:ffffff" | while IFS=: read fg bg; do python3 -c " def lum(h): r,g,b=[int(h[i:i+2],16)/255 for i in(0,2,4)] r,g,b=[(c/12.92 if c<=.04045 else((c+.055)/1.055)**2.4)for c in(r,g,b)] return .2126*r+.7152*g+.0722*b l1,l2=lum('$fg'),lum('$bg') r=(max(l1,l2)+.05)/(min(l1,l2)+.05) ok='✓' if r>=4.5 else '✗' print(f'#$fg on #$bg → {r:.1f}:1 {ok}') " done
#1a1a2e on #ffffff → 17.1:1 ✓#333333 on #f5f5f5 → 11.6:1 ✓#ff0000 on #ffffff → 4.0:1 ✗#777777 on #ffffff → 4.5:1 ✗