Comprobador de contraste de color
Texto grande de encabezado (24px)
Texto normal de 14-16px. La mayoría del texto de interfaz, etiquetas y párrafos entra en esta categoría, por lo que tiene los requisitos de contraste más estrictos.
Acerca del comprobador de contraste
El ratio de contraste mide cuán distinguible es el texto de su fondo, en una escala de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG exige al menos 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA, y 7:1 / 4.5:1 en el nivel AAA.
Este comprobador calcula el ratio a partir de la luminancia relativa exactamente como define WCAG 2.x, muestra resultados de aprobado/suspenso para cada nivel y previsualiza tus colores sobre texto real. Se aceptan las notaciones HEX, RGB y HSL.
Cómo comprobar el contraste de color
- Introduce el color del texto como HEX, RGB o HSL, o usa el selector de color.
- Introduce el color de fondo sobre el que está el texto.
- Lee el ratio de contraste y los resultados AA/AAA.
- Ajusta los colores hasta que todas las comprobaciones necesarias pasen y copia el informe.
Consejos de accesibilidad
- Texto grande significa al menos 24px normal o unos 18.66px en negrita — solo entonces aplica el umbral de 3:1.
- Revisa los estados hover, focus, disabled y placeholder — a menudo usan tonos más claros que no aprueban.
- Los componentes de interfaz y los iconos necesitan al menos 3:1 frente a los colores adyacentes (WCAG 1.4.11).
- Prueba el modo oscuro por separado; las paletas invertidas cambian todos los ratios.
Guías relacionadas
Aprenda el workflow detrás de esta herramienta y qué revisar después.
Checks de SEO técnico antes de enviar un sitio
Un checklist para asegurar que los buscadores puedan descubrir, rastrear, entender e indexar las páginas importantes.
Cómo depurar respuestas JSON de una API
Formatee la respuesta, confirme el estado HTTP, valide el schema y compare cambios del payload antes de modificar código.
Comprobaciones antes de publicar una paleta de colores
Un ratio aprobado es el punto de partida, no la meta. Revisa cómo se comporta el par en estados reales de la interfaz.
Prueba ambos temas
Un par que aprueba sobre fondo claro puede fallar tras la inversión del modo oscuro. Revisa cada tema que publiques.
Revisa los estados interactivos
Hover, focus, disabled y visited suelen usar tonos más claros que caen por debajo de 4.5:1 sin que nadie lo note.
No dependas solo del color
Combina el color con iconos, subrayados o etiquetas de texto para que la información sobreviva a las deficiencias de visión cromática.
Verifica los supuestos de texto grande
El umbral relajado de 3:1 solo aplica desde 24px, o 18.66px en negrita. Confirma el tamaño renderizado, no el token de diseño.
Privacidad y uso
Comprobaciones rápidas sin cuenta
Toolinix está pensado para tareas cortas de desarrollo: pegue una muestra segura, revise el resultado, copie lo necesario y continúe.
Sin inicio de sesión
Puede usar las herramientas sin crear una cuenta, suscribirse a un boletín ni guardar un espacio de trabajo.
Local cuando es posible
Los formateadores, generadores, codificadores y utilidades de texto suelen ejecutarse en el navegador. Los diagnósticos de red pueden necesitar una consulta asistida por servidor para comprobar URLs, dominios o IPs públicos.
No pegue secretos
No pegue contraseñas de producción, claves privadas, tokens de acceso, datos de clientes ni datos regulados en herramientas online salvo que su propia política de seguridad lo permita.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.