Saltar al contenido
Empezar

Comprobación de contraste de color

Do4U comprueba el contraste de los colores de tu marca y de tu sitio web. Introduces tus colores, uno por línea, y dices para qué sirve cada color: texto, fondo, acento (por ejemplo, un botón) o borde. El código calcula la relación de contraste de cada par con la fórmula WCAG y muestra qué niveles alcanza: AA y AAA para texto normal y grande, y 3:1 para bordes, iconos y áreas de botones. Los valores no se redondean. Para cada par que no cumpla, obtienes el color más cercano que sí lo cumpla, una vez más oscuro y otra más claro, en el mismo tono. Do4U también crea una paleta ajustada y la vuelve a comprobar como un todo. Exportas la paleta como propiedades personalizadas de CSS, variables SCSS o JSON, y la exportación se realiza en tu navegador. Todo se ejecuta mediante código, sin IA, y es gratuito.

Pruébalo ahora Precios

Gratis y sin cuenta: Calculadora de ratio de contraste →

Para quién es

Para diseñadores, desarrolladores, agencias y propietarios de sitios web que eligen colores de marca o crean una guía de estilo y quieren textos y botones que todos puedan leer.

Usos típicos

  • Comprueba una nueva paleta de marca antes de empezar el diseño
  • Encuentra un gris para texto secundario que cumpla con AA
  • Comprueba los colores de botones, enlaces y bordes frente al fondo de la página
  • Exporta los colores ajustados como variables CSS para tu hoja de estilos

Ejemplo

Entrada

#1a1a1a texto #777777 texto Secundario #ffffff fondo #cccccc borde

Resultado

#1a1a1a sobre #ffffff: 17.4:1, cumple AA y AAA #777777 sobre #ffffff: 4.47:1, no cumple AA para texto normal (cumple para texto grande). Más oscuro: #767676 → 4.54:1. Más claro: no es posible #cccccc sobre #ffffff: 1.6:1, no cumple el contraste de no-texto de 3:1. Más oscuro: #949494 → 3.03:1 Exportar (ajustado): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Un ejemplo fijo, acortado. Los resultados reales son generados por IA: por favor, compruébalos.

Precio y límites

Precio
gratis, hasta 30 comprobaciones por día
Disponible con
Gratis, Con paquete
Límite de entrada
Hasta 3 000 caracteres por archivo

Privacidad

Procesado en nuestros propios servidores en la UE (Polonia). Las entradas y los resultados se eliminan después de 7 días (Gratis) o 30 días (paquetes), o justo después de que veas el resultado si eliges no guardarlos. Las imágenes se eliminan justo después del procesamiento.

En la API

Nombre de la herramienta: contrast_check. Crea un trabajo con POST /api/v1/jobs y obtén el resultado con GET /api/v1/jobs/{id}. Encuentra tu clave de API en tu cuenta.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Documentación completa de la API →

Preguntas y respuestas

¿Cómo se calcula la relación de contraste?

Con la fórmula de WCAG 2.2: primero la luminancia relativa de cada color, luego (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro. El resultado está entre 1:1 y 21:1. Los valores se comparan sin redondear, por lo que 4.49:1 no alcanza 4.5:1, y la pantalla nunca redondea hacia arriba.

¿Qué pares se comprueban?

El texto se comprueba sobre cada fondo y sobre colores de acento, con un ratio de 4.5:1 y 7:1 para texto normal, y 3:1 y 4.5:1 para texto grande. Los colores de acento y de borde se comprueban sobre el fondo con un ratio de 3:1 para el contraste de elementos que no son texto. Un color sin un rol específico se compara con todos los demás colores.

¿Cómo se encuentran los colores sugeridos?

Solo cambia la luminosidad, en el espacio de color OKLCH; el tono se mantiene igual. Do4U busca el color más cercano que pase la prueba, una vez más oscuro y otra más claro, y lo comprueba de nuevo como código hex. Si ningún color puede pasar contra un fondo, te lo indica.

¿Se guarda mi texto?

Solo el tiempo necesario: 7 días en el plan Free, 30 días con un paquete – o nada si decides no guardarlo. El procesamiento se realiza en nuestros propios servidores en la UE (Polonia).

¿Puedo usar el resultado de inmediato?

Los resultados son generados por IA. Por favor, léelos antes de publicarlos o enviarlos.

Herramientas relacionadas

  • Comprobación de accesibilidad

    Comprueba una página en busca de barreras comunes y explica cómo solucionarlas.

  • Feedback de diseño de una captura de pantalla

    Sube una captura de pantalla de una página o aplicación y obtén hallazgos concretos y numerados sobre el tamaño de los botones, el contraste, el texto en imágenes, la jerarquía y el espaciado, cada uno con un recuadro en la imagen. Una evaluación de IA, no una medición.

  • Textos alternativos

    Descripciones cortas de imágenes para lectores de pantalla y motores de búsqueda.

Todas las herramientas →