Grado letra del ratio de contraste
Convierta el contraste de una pareja de colores en una letra para sus revisiones: #111827 sobre blanco alcanza 17.74 a 1 y obtiene una A, porque la A empieza en 12 a 1. Las notas van de la A a la E y, por debajo, suspenso. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Primer plano
- #111827
- Fondo
- #ffffff
- Relación de contraste
- 17,74
- Calificación
- A
- Etiqueta de calificación
- Excellent
- Banda mínima
- 12
Esta herramienta de nota con letra del ratio de contraste toma dos colores hexadecimales —primer plano y fondo—, calcula el ratio de contraste oficial WCAG 2.x y lo sitúa en una escala fija de letras de A a E hasta fail. Diseñadores, desarrolladores y revisores de accesibilidad suelen necesitar una sola letra para una revisión de diseño, una hoja de tokens o el resumen de un pull request, no solo el ratio bruto y los booleanos AA/AAA. El motor sigue la luminancia relativa: cada canal sRGB se lineariza, la luminancia se pondera con los coeficientes 0.2126, 0.7152 y 0.0722, y el ratio es (más claro más 0.05) entre (más oscuro más 0.05). Las bandas son deterministas: A empieza en doce a uno, B en siete (AAA texto normal), C en cuatro coma cinco (AA texto normal), D en tres (AA texto grande), E en dos, y lo más débil es fail. Los resultados no dependen de red, muestreo aleatorio ni del reloj.
Qué significa una nota con letra de contraste y qué contiene la respuesta
Una nota con letra de contraste comprime el ratio WCAG continuo en una etiqueta ordinal breve que las partes interesadas pueden leer sin memorizar tablas de umbrales. La nota A significa que el par alcanza al menos doce a uno —muy por encima de AAA para texto normal y cerca del tope práctico de pares sRGB legibles, salvo negro puro sobre blanco puro—. La nota B significa al menos siete a uno, el umbral AAA para texto normal.
La nota C significa al menos cuatro coma cinco a uno, el umbral AA habitual del cuerpo de texto. La nota D significa al menos tres a uno, que aún supera AA para texto grande pero es demasiado débil para tipografía de cuerpo pequeña bajo las mismas pautas. La nota E significa al menos dos a uno: queda algo de diferencia de luminancia, pero el par falla todos los criterios WCAG de contraste de texto.
La nota fail significa un ratio inferior a dos a uno —incluidos colores idénticos a uno a uno—, de modo que el par no debe usarse para texto o iconos significativos sobre esa superficie. No hay rastreo de página, mezcla de opacidad ni muestreo de degradados: usted aporta dos hex explícitos y recibe una nota reproducible apta para tickets, tokens de diseño y controles automatizados.
Contrato de entrada, análisis hex y lógica de bandas reproducible
Ambos valores deben ser hex: almohadilla opcional, tres dígitos que se expanden a seis (#abc se convierte en #aabbcc) o seis dígitos completos, sin distinguir mayúsculas. Sufijos alfa, funciones rgb(), hsl(), colores CSS con nombre y enteros sueltos se rechazan con un mensaje que nombra el campo y muestra lo recibido. Cada color se limita a treinta y dos caracteres para validar barato y bloquear pegados accidentales de CSS largo.
Tras el análisis, los canales se linearizan con la curva sRGB por partes de WCAG —dividir entre 12.92 bajo el umbral 0.04045; si no, elevar ((c más 0.055) entre 1.055) a la potencia 2.4— y se combinan en luminancia relativa. La nota se elige del ratio en coma flotante sin redondear, de modo que un 6.99 mostrado no pueda reclamar la banda B si el ratio real sigue por debajo de siete.
Dónde encajan las notas con letra en sistemas de diseño, revisiones y CI
Los equipos de producto suelen necesitar una puntuación de un carácter para paneles y listas de revisión de diseño cuando una matriz AA/AAA completa es demasiado ancha para una columna de hoja de cálculo o una insignia de estado. Los ingenieros conectan el mismo contrato a comprobaciones de pull request que bloquean un cambio de token si el texto principal del cuerpo cae por debajo de la nota C, o advierten cuando los titulares grandes bajan a D.
Especialistas de QA y accesibilidad adjuntan la nota más el ratio numérico a los informes de error para que se corrija el par exacto en lugar de adivinar desde una captura. Los equipos de contenido y marketing verifican que los hex de campaña sigan logrando al menos C sobre fondos claros u oscuros del sitio. Combínelo con un comprobador completo de matriz AA/AAA cuando necesite banderas booleanas de cumplimiento, y con utilidades de conversión de color cuando deba obtener hex desde RGB o HSL antes de calificar.
Qué puede hacer con ella
Cuadros de mando de tokens de diseño
Califique con una sola letra cada par de primer plano/fondo de una paleta de marca para temas claros y oscuros antes de fijar los tokens.
Preguntas frecuentes
¿Cuánto cuesta la herramienta de nota con letra del ratio de contraste?
Es gratis en su navegador en esta página.
¿Cómo se mapean las notas con letra desde el ratio de contraste?
A ≥ 12, B ≥ 7 (AAA normal), C ≥ 4.5 (AA normal), D ≥ 3 (AA grande), E ≥ 2, fail por debajo de 2. Las bandas usan el ratio WCAG sin redondear; el ratio mostrado se redondea a dos decimales.
¿En qué se diferencia de un comprobador de contraste WCAG AA/AAA?
Un comprobador AA/AAA devuelve booleanos de aprobado/reprobado para texto normal y grande. Esta herramienta mapea el mismo ratio WCAG a una escala de letras A–E/fail para cuadros de mando e insignias.
¿Esta herramienta rastrea mi sitio web en busca de problemas de contraste?
No. Solo califica dos colores hex que usted proporciona.
¿Qué formatos de color acepta la herramienta de nota de contraste?
Solo colores hexadecimales de tres o seis dígitos, con o sin almohadilla inicial y en mayúsculas o minúsculas. Los nombres de color, la notación RGB o HSL y la transparencia se rechazan, así un valor erróneo nunca recibe nota.
Herramientas relacionadas
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
¿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/color/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast-grade",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast-grade", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast-grade", 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": "#111827",
"background": "#ffffff"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"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
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
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. |
Notas técnicas
Use la vía gratuita del navegador para talleres de paleta y tokens, o la API a $0.002 por solicitud exitosa cuando la CI y los sistemas de diseño necesiten la misma matriz de notas siempre.
Qué significa una nota con letra de contraste y qué contiene la respuesta
La respuesta repite cada color como hex #rrggbb en minúsculas normalizado y una cadena rgb(r, g, b), informa contrast_ratio redondeado a dos decimales, devuelve las cadenas grade y grade_label, expone band_min como el suelo numérico de la banda ganadora y etiqueta method como wcag_contrast_letter_grade para que los enrutadores distingan esta página de un comprobador solo AA/AAA. Hex inválido, campos ausentes, valores no cadena y cadenas demasiado largas provocan invalid_input y nunca se cobran.
Contrato de entrada, análisis hex y lógica de bandas reproducible
Envíe un objeto JSON con foreground para el color de texto o icono y background para la superficie detrás. Los alias fg, color1, text y hex1 mapean al primer color; bg, color2 y hex2 al segundo, para que formularios y hojas de cálculo conserven sus nombres de columna. Las bandas son constantes fijas en el código; no hay un interruptor de configuración que cambie la escala por solicitud, lo que mantiene goldens, aserciones de CI y rúbricas estables bit a bit.
Dónde encajan las notas con letra en sistemas de diseño, revisiones y CI
Los diseñadores pegan pares hex desde Figma o un JSON de tokens y leen de A a fail antes de fijar una escala para temas claros y oscuros. En esta página el trabajo corre por completo en su navegador; por la API cada consulta exitosa cuesta $0.002, la validación fallida no se cobra y nada se guarda tras la respuesta. Esa separación —exploración interactiva gratuita y una API de pago idéntica— coincide con el catálogo tier A del KIT.
Casos de integración
Insignias de contraste en pull requests
Llame a la API desde la CI para hacer fallar las compilaciones cuando los pares hex del cuerpo principal caigan por debajo de la nota C (banda AA de texto normal).
Resúmenes de revisión de accesibilidad
Adjunte grade, grade_label y contrast_ratio a los tickets para que revisores e ingenieros compartan una nota breve más el ratio numérico.
Preguntas técnicas
¿Qué formatos de color se aceptan?
Solo hex: #RGB o #RRGGBB, con o sin la almohadilla inicial, sin distinguir mayúsculas. rgb(), hsl(), colores con nombre y hex con alfa se rechazan con invalid_input.