chevron_right

Verificador de Contraste de Color

Comprueba las relaciones de contraste WCAG 2.1 para accesibilidad.

Color de primer plano

#f8fafc

Color de fondo

#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1

Contrast Ratio

Resultados WCAG 2.1

check_circle

AA Normal Text

Min 4.5:1 — Body text, UI components

APROBADO

check_circle

AA Large Text

Min 3:1 — 18pt+ or 14pt+ bold

APROBADO

check_circle

AAA Normal Text

Min 7:1 — Enhanced: body text

APROBADO

check_circle

AAA Large Text

Min 4.5:1 — Enhanced: large text

APROBADO

Herramientas similares

Verificador de Accesibilidad PDF

Comprueba etiquetas, orden de lectura, texto alternativo, idioma y encabezados frente a reglas WCAG verificables.

Generador de color de viento de cola

Genere una escala de colores estilo Tailwind y un fragmento de configuración a partir de un color base.

Extractor de paleta de degradado

Extraiga paradas de color listas para degradado de una imagen cargada.

Convertidor de HEX a Tailwind

Convierta un color HEX en clases compatibles con Tailwind y una escala de referencia.

PNG a SVG

Envuelve una imagen raster dentro de un contenedor SVG o traza pixel art como rectangulos de color.

Validador UUID

Valida UUIDs y detecta versión, variante y forma normalizada.

Desbloquear PDF

Elimina la protección por contraseña de un PDF localmente.

apps

Mas herramientas

Explora nuestra coleccion completa de herramientas gratuitas en linea.

Revisa el contraste antes de llevar colores a producción

Una paleta puede verse bien y aun así incumplir requisitos de accesibilidad. Este verificador te ayuda a probar combinaciones de texto y fondo frente a los umbrales de contraste WCAG para detectar problemas antes de que lleguen al sistema de diseño, a la librería de componentes o al producto final.

Qué te indican los resultados

La herramienta muestra la relación de contraste y si la combinación supera los niveles WCAG habituales para:

texto normal en AA
texto grande en AA
texto normal en AAA
texto grande en AAA

Por qué importa en proyectos reales

Comprobar el contraste resulta útil para:

validar colores de marca en componentes
probar texto sobre botones, tarjetas y banners
revisar accesibilidad durante la entrega de diseño
evitar combinaciones difíciles de leer para personas con baja visión

Aprobar no siempre basta

Una combinación puede aprobar técnicamente y seguir resultando incómoda con tipografías pequeñas o pesos ligeros. Después de obtener una buena proporción, conviene mirar la vista previa con tamaños de texto realistas antes de darla por definitiva.