El veloz murciélago hindú comía feliz cardillo y kiwi.
AaBbCcDdEeFf 0123456789 - texto de vista previa en este par de colores.
Qué hace
Calcula la razón de contraste WCAG 2.2 entre un color de primer plano y un color de fondo, y la evalúa contra los umbrales de accesibilidad: AA para texto normal (≥ 4.5:1), AA grande para texto grande (≥ 3:1) y AAA (≥ 7:1). La matemática es la fórmula real de luminancia relativa - cada canal sRGB se linealiza, se combina con los coeficientes WCAG, y la razón es (lighter + 0.05) / (darker + 0.05).
Acepta colores hex #rgb y #rrggbb (sin distinguir mayúsculas, con o sin # inicial), muestra insignias de superación o fallo para los tres umbrales a la vez, y renderiza un panel de vista previa en vivo - un pangrama y una línea de glifos y números pintados con tu par exacto de colores. 100% en el cliente.
Cómo usarlo
- Fija el color de Primer plano: haz clic en la muestra para abrir un selector de color, o escribe un valor hex en el campo de texto.
- Fija el color de Fondo de la misma forma. La herramienta se abre con
#e9e9f1sobre#07070b, un par que supera AAA por diseño. - Haz clic en Intercambiar para permutar los dos colores - útil para comprobar tanto la variante oscuro-sobre-claro como la claro-sobre-oscuro de un tema.
- Lee el resultado: la razón (2 decimales) más las tres insignias AA, AA grande, AAA, cada una verde (supera) o roja (falla).
- Comprueba el bloque de vista previa de abajo - tu texto renderizado con el par elegido - para juzgarlo con tus propios ojos.
- Si cualquiera de los dos valores no es un color hex válido, la herramienta muestra un error y oculta los resultados hasta que lo corrijas.
Ejemplos
Verificado ejecutando contrastRatio() de src/lib/color.ts (la función exacta que usa la herramienta):
#e9e9f1 on #07070b 16.65:1 AA pass · AA large pass · AAA pass (tool defaults)
#ffffff on #000000 21.00:1 AA pass · AA large pass · AAA pass (the maximum)
#f8fafc on #1e293b 13.98:1 AA pass · AA large pass · AAA pass
#abc on #000000 10.69:1 AA pass · AA large pass · AAA pass (3-digit shorthand works)
#767676 on #ffffff 4.54:1 AA pass · AAA fail (the classic "just barely AA" gray)
#777777 on #ffffff 4.48:1 AA fail · AA large pass (one notch darker fails AA)
#3b82f6 on #ffffff 3.68:1 AA fail · AA large pass (Tailwind blue-500 on white)El par #767676 frente a #777777 muestra por qué la matemática exacta vence al ojo: una diferencia de 1 unidad hex cruza la línea AA de 4.5:1.
Buen saber
- Privado: toda la matemática se ejecuta en tu navegador; nada se envía a ningún sitio.
- Los colores con nombre (
red,white) y otros formatos de color CSS se rechazan - solo hex. Introduce#rgbo#rrggbb. - No existe una insignia AAA-grande aparte; la herramienta muestra AA (normal), AA grande y AAA (normal) exactamente como está codificado.
- La razón es simétrica - permutar primer plano y fondo nunca cambia el número, solo la dirección en que lees la vista previa.
- Herramientas relacionadas: Selector y conversor de colores, Generador de paletas de colores, Generador de degradados CSS