Reverzereverze

Color Contrast Ratio Calculator

Calculadora gratuita

Verifica la relación de contraste WCAG entre el texto y el fondo para asegurar un diseño legible y accesible.

100% privado

Se ejecuta en tu navegador — ningún número sale de tu dispositivo.

Tus colores (RGB)

Canal rojo del color del texto.

Canal verde del color del texto.

Canal azul del color del texto.

Canal rojo del color de fondo.

Canal verde del color de fondo.

Canal azul del color de fondo.

Relación de contraste

15.43 : 1

WCAG AA requiere 4.5:1 (3:1 para texto grande); AAA requiere 7:1.

Cómo funciona

1

colorContrast.how.s1.title

colorContrast.how.s1.desc

2

colorContrast.how.s2.title

colorContrast.how.s2.desc

3

colorContrast.how.s3.title

colorContrast.how.s3.desc

4

colorContrast.how.s4.title

colorContrast.how.s4.desc

Diseña capturas que la gente sí puede leer

Reverze reconstruye las capturas de la App Store en creatividades legibles y con mayor conversión.

Por qué importa el contraste de color

La relación de contraste mide qué tan diferente es el color de tu texto respecto al fondo, en una escala de 1:1 (idéntico) a 21:1 (negro sobre blanco). Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones mínimas para que las personas con baja visión o daltonismo puedan leer tu contenido. El texto normal necesita al menos 4.5:1 para cumplir AA, mientras que el texto grande (alrededor de 18pt, o 14pt en negrita) solo requiere 3:1.

El nivel AAA, más estricto, pide 7:1 para texto normal y 4.5:1 para texto grande. Esta calculadora aplica la fórmula oficial de luminancia relativa de WCAG a tus valores RGB, para que verifiques cualquier par de texto y fondo antes de publicarlo — sin adivinar a simple vista.

Preguntas frecuentes

¿Qué es una buena relación de contraste?
Apunta a al menos 4.5:1 para el texto de cuerpo normal y 3:1 para el texto grande a fin de cumplir WCAG AA. Para el nivel AAA, más estricto, usa 7:1 para texto normal y 4.5:1 para texto grande.
¿Qué cuenta como texto grande?
WCAG define el texto grande como al menos 18pt (unos 24px) en peso normal, o 14pt (unos 18.66px) en negrita. El texto grande tiene un requisito de contraste menor porque las formas más grandes se leen con más facilidad.
¿Cómo se calcula la relación de contraste?
Se calcula la luminancia relativa de cada color a partir de sus canales RGB, y la relación es (L_más claro + 0.05) / (L_más oscuro + 0.05). El resultado va de 1:1 a 21:1.
¿La relación de contraste depende de cuál color es el texto?
No. La relación es simétrica — intercambiar texto y fondo da el mismo número. WCAG solo considera la diferencia de luminancia entre los dos colores.