Convierte códigos de color, compara dos tonos y comprueba el contraste de texto con una calculadora gratuita en el navegador.
Calculadora de colores y contraste WCAG
RGB texto:
HSL texto:
Contraste:
Texto normal AA:
Texto grande AA:
Admite valores HEX de 3 o 6 caracteres.
HEX, RGB y HSL son distintas formas de describir color
HEX usa números hexadecimales para representar rojo, verde y azul. RGB utiliza componentes enteros y HSL describe tono, saturación y luminosidad. Para combinar colores de marca puedes trabajar en el formato más cómodo, pero revisa su aspecto real y no presupongas que distintas pantallas muestran exactamente el mismo color.
El contraste importa en diseño web
Dos colores bonitos pueden producir texto ilegible. Los criterios de WCAG habituales utilizan una relación mínima de 4.5:1 para texto normal y 3:1 para texto grande bajo nivel AA. La relación depende de luminancia relativa, no de la distancia aparente entre colores de un selector.
Cómo usar esta herramienta
Introduce un primer color en HEX y otro para el fondo. Obtendrás su RGB y HSL, una muestra de texto y la relación de contraste. Los cálculos se realizan localmente, sin enviar los colores a un servidor. Para trabajos profesionales evalúa además focus, estados hover, enlaces y componentes completos.
Limitaciones de la comprobación
El contraste textual es solo una parte de accesibilidad. Tamaño, peso tipográfico, luminosidad de pantalla, uso de iconos y contexto pueden cambiar la percepción. Una puntuación AA no equivale por sí sola a un sitio web accesible.
Preguntas frecuentes
¿El convertidor necesita registro?
No. Funciona en tu navegador.
¿Sirve el contraste 3:1 para cualquier texto?
No. Se aplica a determinados casos, como texto grande, con criterios específicos.
Documentación y fuentes para ampliar
¿Quieres aplicar estas ideas en tu proyecto?
Cuéntanos tu sector, objetivo y web actual. Prepararemos una propuesta con el alcance y las prioridades que realmente necesites, sin compromisos ni tarifas inventadas.
Solicitar información ↗