ForHosting KIT · Web: scraping y monitoreo

Comprobar contraste de colores

Este comprobador compara un color de primer plano con uno de fondo mediante la fórmula de luminancia relativa de WCAG.

● BetaGratis · en su navegador

Úselo desde WebAPIEmailTelegramApp pronto

Introduzca colores hexadecimales de tres o seis dígitos para obtener la relación de contraste y resultados claros de aprobado o suspenso para AA y AAA en texto normal y grande. Resulta útil para revisar componentes, documentar decisiones de accesibilidad y detectar combinaciones ilegibles antes de publicarlas.

Interprete correctamente el resultado

La relación devuelta expresa la diferencia de luminancia relativa entre el color más claro y el más oscuro. Un resultado de 1:1 indica luminancias idénticas; el máximo es 21:1 para negro sobre blanco. WCAG aplica umbrales distintos porque el texto grande o grueso se lee con menos contraste. AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande; AAA eleva esos valores a 7:1 y 4.5:1. La respuesta evalúa cada criterio por separado. WCAG considera grande un texto de al menos 18 puntos, o 14 puntos si está en negrita. No redondee al alza para decidir conformidad: aunque la relación se presenta con dos decimales, cada aprobado se calcula con el valor completo, algo esencial cerca de un límite.

Seleccione el primer plano y el fondo reales

Compruebe los colores que la persona ve realmente, no dos muestras próximas en una paleta. Para un párrafo, el primer plano es el color renderizado del texto y el fondo es el color sólido final situado detrás. Revise también enlaces en sus estados normal, visitado, activo, enfocado y deshabilitado cuando comuniquen información. Haga lo mismo con botones, avisos, insignias, formularios, gráficos y menús. Esta herramienta admite colores opacos en formato #RGB o #RRGGBB. Si hay transparencia, degradados, imágenes, sombras o modos de fusión, determine primero el color renderizado en el punto analizado. En fondos variables, mida la zona con menor contraste. Recuerde que el enfoque visible, el contraste no textual y no depender solo del color requieren revisiones adicionales.

Integre la comprobación en su proceso

Compruebe el contraste desde el diseño, cuando cambiar un token o componente todavía es sencillo, y repita la prueba al modificar temas o colores de marca. El equipo de diseño puede comparar pares antes de la entrega; desarrollo puede llamar al mismo cálculo determinista desde pruebas y guardar los indicadores junto a capturas del componente. Una auditoría sólida enfrenta cada color semántico de primer plano con todos los fondos permitidos, no solo con una combinación de muestra. Registre también el tamaño y peso previstos, pues un par válido para texto grande puede fallar en etiquetas normales. La API cuesta $0.002 por solicitud y el ejecutor del navegador facilita comprobaciones puntuales. Las entradas mal formadas se rechazan, lo que descubre dígitos inválidos, canales alfa o nombres CSS antes de contaminar un informe.

Qué puede hacer con ella

Revisar una entrega de diseño

Confirme que los colores propuestos para texto y superficies cumplen el nivel WCAG previsto antes de implementarlos.

Auditar tokens de diseño

Pruebe cada token semántico de primer plano contra todos los fondos autorizados por el sistema de componentes.

Proteger una publicación

Llame al comprobador determinista desde pruebas automáticas y bloquee cambios que rebajen pares obligatorios.

Preguntas frecuentes

¿Qué formatos de color se admiten?

Use notación hexadecimal opaca #RGB o #RRGGBB. Se rechazan nombres CSS, canales alfa, funciones rgb(), degradados y valores mal formados.

¿Cuáles son los umbrales WCAG AA?

AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande.

¿Cuáles son los umbrales WCAG AAA?

AAA exige como mínimo 7:1 para texto normal y 4.5:1 para texto grande.

¿Por qué una relación mostrada en el límite puede fallar?

La pantalla usa dos decimales, pero la decisión conserva toda la precisión y no convierte en aprobado un valor apenas inferior.

¿Cambia la relación si intercambio los colores?

No. La fórmula compara las luminancias clara y oscura; invertir dos colores opacos conserva la relación y los resultados.

Para desarrolladores — acceso por API

Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.

Endpoint de API

POSThttps://api.kit.forhosting.com/web/color-contrast-check

¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.

Llámela desde su stack

curl -X POST https://api.kit.forhosting.com/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Ejemplo de solicitud

{
  "foreground": "#1a1a1a",
  "background": "#ffffff"
}

Ejemplo de respuesta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.

Precio

Por solicitud$0.002

Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.

Límites

`timeout_sec`	30
`max_crawl_pages`	25

Errores

HTTP	Código	Significado
`401`	`unauthorized`	API key ausente o inválida.
`402`	`insufficient_balance`	El saldo no cubre el precio de la tarea.
`404`	`unknown_type`	El tipo de tarea no existe.
`429`	`rate_limited`	Demasiadas peticiones. Use el webhook en vez de sondear.

Ver la documentación completa del KIT →