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

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.

Herramienta de reemplazo de color

Reemplaza un color en una imagen por otro. Tolerancia ajustable para la distancia de color. Totalmente privado, funciona en tu navegador.

Generador de sprites SVG

Combina varios archivos SVG en una sola hoja de sprites con definiciones <symbol> para usar iconos de forma eficiente.

Generador de palabras aleatorias

Genere palabras aleatorias para nombrar, indicaciones, pruebas y textos de relleno.

Generador de Numeros Aleatorios

Genera numeros aleatorios entre rangos personalizados.

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.