colorize
ColorKit
CK

Verificador de Contraste de Color

Evalúa combinaciones de colores de texto y fondo para cumplir con las normativas de accesibilidad WCAG y APCA.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

¿Qué hace este verificador de contraste?

Esta herramienta calcula el ratio matemático exacto entre el color del texto y el fondo para determinar si tu interfaz cumple con las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) y el algoritmo avanzado APCA.

¿A quién va dirigida esta herramienta?

Está diseñada para diseñadores UI/UX, desarrolladores frontend y auditores de accesibilidad que necesitan garantizar que sus aplicaciones y sitios web sean inclusivos y cumplan con legislaciones vigentes.

Requisitos WCAG AA y AAA

  • WCAG AA (Texto normal): Exige un ratio mínimo de 4.5:1.
  • WCAG AA (Texto grande): Exige al menos 3.0:1 para fuentes de 18pt o 14pt en negrita.
  • WCAG AAA (Texto normal): El estándar más estricto, requiriendo 7.0:1.

Función de autoajuste inteligente

Si tu combinación no supera el test, nuestro botón de ajuste automático analiza el matiz y la saturación originales y desplaza la luminosidad (Lightness) en pasos microscópicos del 1% hasta alcanzar el ratio reglamentario exacto sin desvirtuar la identidad visual de tu marca.

Base de Conocimiento & FAQ

Preguntas Frecuentes

Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.

¿Cuál es la relación de contraste mínima legal para textos según WCAG y normativas de accesibilidad?expand_more
Según WCAG 2.1 / 2.2 Nivel AA (el estándar legal internacional de accesibilidad digital):
  • Texto normal (< 18pt o 14pt negrita): Debe alcanzar una relación mínima de 4.5:1 frente a su fondo.
  • Texto grande (≥ 18pt normal o 14pt negrita): Requiere al menos un ratio de 3.0:1.
  • Componentes de interfaz y gráficos: Bordes de campos de formulario, indicadores de foco e iconos independientes deben cumplir al menos 3.0:1.
¿Cuál es la diferencia entre el cumplimiento WCAG AA y WCAG AAA?expand_more
WCAG AA es el estándar legal obligatorio globalmente para comercio electrónico, banca, administraciones públicas y SaaS corporativos (4.5:1 en texto de lectura). WCAG AAA es el nivel de máxima exigencia recomendado para portales de salud, accesibilidad para personas de la tercera edad y servicios críticos, exigiendo un ratio estricto de 7.0:1 en texto normal y 4.5:1 en encabezados.
¿Por qué los textos de marcador de posición (placeholders) suelen fallar las auditorías?expand_more
El color gris por defecto de los navegadores en los placeholders (como #9CA3AF sobre fondo blanco) suele arrojar una relación de 2.0:1 a 2.5:1, suspendiendo el Nivel AA. Buena práctica: nunca dependas del placeholder como etiqueta única; utiliza siempre elementos <label> explícitos y aplica estilos CSS con suficiente contraste para el placeholder.
¿Cómo calcula la fórmula W3C la luminancia relativa?expand_more
La luminancia relativa (L) mide el brillo percibido normalizado de 0.0 (negro absoluto) a 1.0 (blanco puro). Al ser el ojo humano más sensible a las longitudes de onda verdes, la fórmula pondera los canales lineales sRGB: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
El ratio final se obtiene calculando (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro.
¿Se puede utilizar texto blanco sobre botones amarillos (#FFFF00) o cian (#00FFFF)?expand_more
No. El amarillo puro y el cian tienen una luminancia intrínseca muy elevada. Combinarlos con texto blanco produce un pésimo contraste de 1.07:1 a 1.25:1, haciendo que el texto sea completamente ilegible para personas con visión reducida o bajo la luz solar. Al combinarlos con texto oscuro (#0F172A), el ratio asciende a 16.8:1, superando con creces los criterios AA y AAA.