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.

Calculadora de relación de aspecto

Calcule relaciones de aspecto y dimensiones escaladas para imágenes y videos.

Generador de sprites SVG

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

Texto a PascalCase

Convierte texto a PascalCase para nombres de clases e identificadores.

Generador de URI de datos

Genere URI de datos a partir de archivos locales sin cargarlos.

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.