UtiliHub
English

Validador de contraste WCAG

Validá el contraste de color según WCAG.

Cargando herramienta…

Siguiente paso recomendado

Diseñá y validá tu interfaz

Después de usar Validador de contraste WCAG, continúa con Calculadora contraste color.

Abrir siguiente

Herramientas relacionadas

Mismo tipo de tarea, para seguir en el sitio.

4

Guía de la herramienta

Validador de contraste WCAG: cómo funciona

Información práctica para entender el resultado y usar bien esta herramienta.

Sobre Validador de contraste WCAG

El contraste WCAG 2 usa luminancia relativa, no una resta de brillo. El ratio es (más claro + 0.05) / (más oscuro + 0.05).

El texto normal pide 4.5:1 para AA y 7:1 para AAA. El texto grande (18 pt, o 14 pt negrita) y los componentes UI piden 3:1 para AA.

Excel compara dígitos hex, pero no linealiza sRGB ni muestra una vista previa. Esta comprobación queda en el navegador.

Cómo usarla

  1. 1Ingresá texto y fondo como #RGB o #RRGGBB. Vacío, texto y hex cortos se rechazan.
  2. 2Cargá texto de cuerpo, gris límite o rojo que falla.
  3. 3Leé el ratio y las insignias AA/AAA. Si falla AA normal, usá el color de texto sugerido.
  4. 4Copiá el par o reiniciá. No se sube nada.

Preguntas frecuentes

¿Cuánto es negro #000000 sobre blanco #FFFFFF?
21.00:1. La luminancia relativa es 0 y 1, así que (1+0.05)/(0+0.05) = 21. Pasa AA y AAA en texto normal y grande.
¿Cuánto es #767676 sobre blanco y #FF6B6B sobre blanco?
#767676 sobre #FFFFFF es unos 4.54:1: pasa AA normal y falla AAA normal (7:1). #FF6B6B sobre #FFFFFF es unos 2.78:1 y falla AA normal y grande.
¿Qué fórmula y unidades se usan?
Los canales sRGB se linealizan (≤0.04045 se divide por 12.92; si no, ((c+0.055)/1.055)^2.4). L = 0.2126 R + 0.7152 G + 0.0722 B. El ratio no tiene unidad.
¿Qué pasa con vacío, cero, negativo o NaN?
Los dos campos vacíos son un error. #000 es negro válido, no un cero numérico. Un signo menos, palabras o NaN no son hex válido. El hex con alfa se rechaza; usá #RRGGBB opaco.