Verificador de Contraste de Color
Verificá el ratio de contraste entre un color de texto y uno de fondo según WCAG AA y AAA. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
¿Qué es el ratio de contraste de color?
El ratio de contraste compara la luminancia relativa de dos colores en una escala de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las pautas de accesibilidad WCAG lo usan para decidir si un texto es legible para personas con baja visión o deficiencias de color: el nivel AA pide al menos 4.5:1 para texto normal y 3:1 para texto grande, el nivel AAA lo sube a 7:1 y 4.5:1, y los íconos, bordes de inputs y otros gráficos con significado necesitan 3:1. Este verificador calcula el ratio con la fórmula de WCAG, te dice qué criterios cumple un par de colores y, cuando no llega, sugiere el color de texto más cercano que cumple, conservando su tono.
Ejemplos
La fórmula de luminancia relativa y contraste de WCAG, y dónde más encontrarla:
const lin = (c) => (c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
const lum = ([r, g, b]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
const [hi, lo] = [lum(fg), lum(bg)].sort((a, b) => b - a);
const ratio = (hi + 0.05) / (lo + 0.05);def lin(c):
c /= 255
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def lum(r, g, b):
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)function lin($c) { $c /= 255; return $c <= 0.04045 ? $c / 12.92 : (($c + 0.055) / 1.055) ** 2.4; }
function lum($r, $g, $b) { return 0.2126 * lin($r) + 0.7152 * lin($g) + 0.0722 * lin($b); }func lin(_ c: Double) -> Double {
let v = c / 255
return v <= 0.04045 ? v / 12.92 : pow((v + 0.055) / 1.055, 2.4)
}Casos de uso
Revisar un diseño antes de pasarlo a desarrollo
Verificá cada par de texto y fondo de un mockup, así los problemas de accesibilidad se corrigen en el diseño y no aparecen en una auditoría después del lanzamiento.
Elegir colores de marca accesibles
Averiguá si un color de marca sirve para texto de cuerpo o solo para títulos grandes y decoración, y ajustá su luminosidad hasta que cumpla.
Corregir hallazgos de una auditoría
Las auditorías automáticas como Lighthouse marcan texto con bajo contraste. Pegá acá los colores reportados para ver por cuánto fallan y probar un reemplazo.
Verificar estados y modo oscuro
El texto en hover, deshabilitado y los placeholders, y cada color del tema oscuro, necesitan su propia verificación. Invertí los colores para probar pares al revés rápido.