Comprobador de Contraste de Color
Color
Elige un color de primer plano y uno de fondo para ver la relación de contraste WCAG exacta, con aprobado/suspenso instantáneo para AA y AAA en texto normal y grande. Una vista previa en vivo muestra cómo se ve realmente la combinación. Funciona enteramente en tu navegador.
El veloz murciélago hindú comía feliz cardillo
El veloz murciélago hindú comía feliz cardillo
Cómo usar
- Elige un color de primer plano (texto).
- Elige un color de fondo.
- Lee la relación de contraste y los resultados AA/AAA.
- Revisa la vista previa para comprobar la legibilidad.
Preguntas frecuentes
- ¿Qué relaciones exigen AA y AAA?
- AA necesita 4.5:1 para texto normal y 3:1 para texto grande; AAA necesita 7:1 y 4.5:1 respectivamente.
- ¿Qué se considera texto grande?
- Aproximadamente 18pt (24px), o 14pt (18.66px) en negrita, y mayores.
- ¿Cómo se calcula la relación?
- A partir de la luminancia relativa de cada color con la fórmula oficial de WCAG 2.
- ¿Admite alfa?
- No, compara colores sólidos. Aplana cualquier transparencia sobre su fondo real primero.
Herramientas relacionadas
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.