# Verificador de Contraste de Color

> Una página de jmrp.io, publicada como markdown. Índice: https://jmrp.io/llms.txt

Canonical: https://jmrp.io/es/tools/color-contrast-checker/
Language: es
Alternate: https://jmrp.io/tools/color-contrast-checker/index.md
Updated: 2026-09-03
License: https://jmrp.io/es/license/
Category: developer
Tags: accesibilidad, wcag, contraste, color, a11y, apca

Comprueba ratios de contraste de color para WCAG 2.2 AA y AAA con soporte APCA, simulación de daltonismo y sugerencias automáticas. Todo en el navegador.
Build-Date: 2026-09-06

Características:
- Comprueba contraste WCAG 2.2 AA y AAA
- Puntúa contraste perceptual con APCA Lc
- Simula cuatro tipos de daltonismo
- Sugerencias automáticas para colores que fallan
- Exporta CSS y comparte por URL

Preguntas que responde:

**¿Cuál es el ratio de contraste mínimo de WCAG 2.2 para texto normal?**

El texto normal necesita al menos 4.5:1 para AA y 7:1 para AAA. El texto grande (18pt+, o 14pt+ en negrita) solo necesita 3:1 para AA y 4.5:1 para AAA.

**¿Cuál es la diferencia entre el contraste de WCAG 2.2 y APCA?**

WCAG 2.x usa un simple ratio de luminancia, mientras que APCA (previsto para WCAG 3.0) modela la percepción humana, teniendo en cuenta la polaridad del texto, el tamaño y el peso de la fuente. Esta herramienta muestra ambos para que puedas compararlos.

**¿El verificador de contraste se ejecuta en mi navegador?**

Sí. Todos los cálculos de contraste se realizan íntegramente en el lado del cliente y ningún dato de color se envía a ningún servidor. Los enlaces compartibles solo codifican los colores en los parámetros de la URL.

**¿Por qué comprobar los colores frente a las simulaciones de daltonismo?**

Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen alguna deficiencia en la visión del color, por lo que un par que aprueba para visión típica puede fallar para ellos. Cada tarjeta de simulación muestra el ratio de contraste percibido para protanopia, deuteranopia, tritanopia y acromatopsia.

**¿Qué cubre la comprobación de contraste no-texto (SC 1.4.11)?**

Aplica el mínimo de WCAG 2.2 de 3:1 a componentes de interfaz como botones, campos de entrada y bordes, además de objetos gráficos que transmiten información "con significado".


---

**Herramienta interactiva** — esta página contiene la aplicación en funcionamiento, no una descripción de ella.

## 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

### ¿Cuáles son los 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:

- **Protanopía** (~1% de los hombres) — ausencia de células cono rojas. El rojo se ve oscuro, se pierden las diferencias rojo-verde.
- **Deuteranopía** (~1% de los hombres) — ausencia de células cono verdes. La forma más común. Confusión verde-rojo.
- **Tritanopía** (~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 se usa?

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 **Copiar CSS** para exportar como propiedades personalizadas o **Enlace para compartir** 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:

#### ¿Cómo se calcula el ratio de contraste WCAG?

```bash
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)}')
"
```

**Salida — Resultado de contraste**

```text
Ratio: 17.06:1
AA Normal: Pass
AAA Normal: Pass
```

#### ¿Cómo se extraen los colores dominantes de una imagen?

```bash
convert image.png -colors 5 -unique-colors txt:- | tail -n +2
```

**Salida — Colores dominantes**

```text
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)
```

#### ¿Cómo se comprueban varios pares de colores por lotes?

```bash
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
```

**Salida — Resultados por lotes**

```text
#1a1a2e on #ffffff → 17.1:1 ✓
#333333 on #f5f5f5 → 11.6:1 ✓
#ff0000 on #ffffff → 4.0:1 ✗
#777777 on #ffffff → 4.5:1 ✗
```