Verificador de contraste de colores
Comprobá si tu combinación de texto y fondo cumple WCAG 2.1 AA o AAA. Calculamos el ratio exacto y te mostramos preview con el texto real para que veas cómo se lee.
Texto grande de muestra
Este es un párrafo de muestra para que veas cómo se lee tu combinación de colores en un texto normal de cuerpo. La accesibilidad arranca acá.
Cómo se calcula el contraste WCAG
WCAG 2.1 define el contraste como un ratio entre la luminancia relativa del texto
y la del fondo. La luminancia relativa de un color RGB se obtiene primero
linealizando cada canal (compensando la curva gamma sRGB) y luego ponderándolos:
0.2126·R + 0.7152·G + 0.0722·B. El verde pesa más porque el ojo
humano lo percibe como más luminoso.
El ratio final es (L1 + 0.05) / (L2 + 0.05), donde L1 es la
luminancia del color más claro y L2 la del más oscuro. Va de 1:1
(mismo color, ilegible) a 21:1 (negro puro sobre blanco puro).
Niveles WCAG explicados
- AA texto normal: 4.5:1 — el mínimo legal en muchas leyes (EAA en Europa, ADA en EE.UU. para sitios públicos).
- AA texto grande: 3:1 — texto desde 18pt regular o 14pt bold (≈ 24px / 18.6px en pantalla).
- AAA texto normal: 7:1 — el ideal. Requerido en gobierno y salud en muchos países.
- AAA texto grande: 4.5:1 — coincide con AA normal.
- Componentes UI: 3:1 — bordes de inputs, iconos, gráficos. Es una norma aparte (1.4.11).
Errores frecuentes
El más común: gris claro sobre blanco. #999999 sobre #FFFFFF
da 2.85:1 y falla incluso en texto grande AA. Si tu placeholder o
texto secundario está en #9CA3AF (gris-400 de Tailwind) sobre blanco,
falla. Usá #6B7280 (gris-500) o más oscuro.
El segundo: texto sobre imágenes. Una foto con luminosidad variable nunca garantiza
contraste consistente. Solución: overlay sólido rgba(0,0,0,0.5) entre
imagen y texto.
Por qué AAA no siempre es factible
Llegar a 7:1 con marca propia es difícil. Muchas marcas tienen colores corporativos que no superan AA. La salida pragmática: usar el color de marca solo en elementos no críticos (decoración, headers grandes), y para texto de cuerpo usar negro o gris muy oscuro contra fondo claro. Apple, Stripe y la mayoría de SaaS hacen esto.
Tres reglas de oro para diseño accesible
- Verificá texto pequeño primero. Si pasa AA, casi todo lo demás también pasa.
- No dependas solo del color para transmitir información. Errores en rojo + ícono. Status en verde + texto. Daltónicos te lo agradecen.
- Probá en pantalla real, no solo en monitor calibrado de diseñador. El brillo de un celular bajo sol cambia todo.
Preguntas frecuentes
¿Qué es el ratio WCAG?
La relación entre la luminancia del texto y la del fondo. De 1:1 a 21:1. AA exige 4.5:1, AAA 7:1 para texto normal.
¿Texto grande tiene umbral menor?
Sí: 3:1 en AA, 4.5:1 en AAA. Aplica desde 18pt regular o 14pt bold.
¿Qué nivel apuntar?
AA es el estándar legal mínimo. AAA es el ideal accesible y se exige en gobierno y salud.
¿Mi marca no supera AA, qué hago?
Usá el color de marca solo en decoración o headers grandes. Para texto de cuerpo, negro o gris muy oscuro.