Color
Comprobador de contraste
Dos colores y te dice la razón de contraste, si cumple AA y AAA en texto normal y grande, y cómo se ve de verdad. Y si no cumple, te propone el color más parecido que sí, que es lo que hace falta cuando ya tienes una marca y no puedes cambiarla entera.
Tus imágenes y tus colores no salen de esta página.
Por qué importa que esto no se suba
Dos de estas cuatro herramientas trabajan con imágenes, y lo que se arrastra aquí casi nunca es una foto cualquiera: es el logotipo de un cliente antes del lanzamiento, una captura de un panel interno o una foto de producto sin publicar. Mandarla al servidor de un desconocido para sacarle un color es un intercambio malo, y encima innecesario: leer los píxeles de una imagen no necesita ningún servidor, lo hace el propio navegador con el lienzo que ya trae. Aquí no hay a dónde enviarla.
Para qué la usa la gente
- Revisar una web antes de publicarlaLos pares de texto y fondo que de verdad se usan, uno por uno.
- Arreglar un gris que no llegaEl caso clásico: un gris claro sobre blanco que se veía bien en el monitor del diseñador.
- Defender una decisión de diseñoUn número es más fácil de discutir que «a mí me parece que se lee».
- Ajustar un color de marcaEncontrar la variante más cercana que cumple sin dejar de ser el color de la marca.
- Comprobar un modo oscuroEl contraste en oscuro casi nunca es el mismo que en claro, y hay que medirlo aparte.
- Elegir el color de un botónQue el texto del botón se lea sobre su fondo, que es donde más falla.
Por qué esto importa
Alrededor de una de cada doce personas ve los colores de forma distinta, y prácticamente todo el mundo pierde capacidad de distinguir contrastes con la edad. A eso se suma lo cotidiano: un móvil al sol, una pantalla vieja, el brillo bajado para ahorrar batería. Un texto con poco contraste no es un problema de una minoría: es un problema de casi todos en algún momento.
Y es de los pocos problemas de accesibilidad que se arreglan con un número. No hace falta interpretar nada: se mide, y o pasa o no pasa.
Qué mide la razón de contraste
Compara la luminancia de los dos colores —cuánta luz emite cada uno— y da un número entre 1 y 21. El 1 es el mismo color contra sí mismo; el 21 es negro puro sobre blanco puro, el máximo posible.
El detalle que hace que este cálculo no sea trivial: no se usan los valores del color tal cual. Antes hay que deshacer la corrección que aplican las pantallas, porque el 128 de un canal no emite la mitad de luz que el 255, sino bastante menos. Hacerlo con los números directos da resultados que parecen razonables y son falsos, y es un error frecuente en calculadoras caseras.
Los niveles, y cuál te toca
AA pide 4,5:1 en texto normal y 3:1 en texto grande. Es el nivel que exige la mayoría de las normativas y el mínimo razonable para cualquier web.
AAA pide 7:1 y 4,5:1. Es exigente y no siempre se puede alcanzar conservando la identidad de una marca; se aplica cuando el contenido es crítico.
«Texto grande» significa 18 puntos —unos 24 píxeles— o 14 puntos en negrita —unos 18,7 píxeles—. La lógica es que un trazo más grueso se distingue con menos contraste, y por eso los titulares tienen manga ancha y el texto de un párrafo no.
El ajustador
Es lo que de verdad busca quien llega aquí. Saber que un color no cumple no sirve de nada por sí solo: lo que hace falta es uno parecido que sí cumpla, porque normalmente hay una marca detrás y no se puede cambiar entera.
Cuando el par no llega al 4,5:1, la herramienta busca el color más cercano que sí lo alcanza moviendo únicamente la luminosidad y conservando el matiz —así el resultado sigue siendo reconociblemente tu color—, y ofrece las dos opciones: cambiar el texto o cambiar el fondo, ordenadas por cuánto hay que moverse. Antes de proponer nada comprueba que la propuesta cumple de verdad; y cuando es imposible llegar sin cambiar el matiz, lo dice en vez de ofrecer algo que no vale.
Los umbrales, en una tabla
| Qué | AA | AAA | Nota |
|---|---|---|---|
| Texto normal | 4,5:1 | 7:1 | Todo lo que no sea grande: párrafos, etiquetas, pies de foto, menús. |
| Texto grande | 3:1 | 4,5:1 | Desde 18 puntos (≈24 px), o 14 puntos en negrita (≈18,7 px). |
| Iconos y controles | 3:1 | — | Bordes de campos, indicadores de foco, iconos con significado. |
| Texto decorativo | — | — | Un texto puramente decorativo o invisible no tiene umbral. |
| Logotipos | — | — | Los nombres de marca y los logotipos quedan fuera de la exigencia. |
Preguntas frecuentes
¿Qué razón de contraste necesito?
4,5:1 para texto normal y 3:1 para texto grande. Ese es el nivel AA, que es el que exige la mayoría de las normativas y el mínimo razonable para cualquier web.
El nivel AAA pide 7:1 y 4,5:1 respectivamente. Es exigente y no siempre se puede alcanzar sin renunciar a la identidad de una marca; se reserva para contenido crítico.
¿Qué cuenta como «texto grande»?
18 puntos, que son unos 24 píxeles; o 14 puntos en negrita, que son unos 18,7 píxeles.
La lógica es que un trazo más grueso se distingue con menos contraste. Por eso un titular puede permitirse un color que en un párrafo no se leería.
¿Por qué el número no coincide con el de otra herramienta?
Casi siempre porque la otra calcula la luminancia con los valores del color tal cual, sin deshacer antes la corrección que aplican las pantallas. Da números que parecen razonables y no son los de la norma.
Aquí se hace como manda el cálculo oficial. Se puede comprobar con dos casos conocidos: negro sobre blanco tiene que dar exactamente 21, y el gris #767676 sobre blanco tiene que dar 4,54, que es justo lo que lo deja pasar AA por los pelos.
¿El contraste también se aplica a los iconos?
Sí, pero con otro umbral: los elementos que no son texto —iconos, bordes de un campo de formulario, el indicador de foco— piden 3:1.
Es un criterio distinto y más flexible, porque un icono suele ser una forma más grande y gruesa que una letra. La tabla de la herramienta lo incluye.
Si cambio el color que me propone, ¿sigue siendo mi color de marca?
Se parece lo máximo posible. La propuesta mueve solo la luminosidad y conserva el matiz y la saturación, así que sigue siendo reconociblemente el mismo color, más claro o más oscuro.
Y busca el mínimo movimiento que hace falta: un punto menos ya no cumpliría. Si aun así el cambio es demasiado para tu marca, la alternativa es cambiar el fondo, que la herramienta también calcula.
¿Cumplir AA me hace accesible?
No, es una parte. El contraste es de los pocos criterios que se miden con un número, y por eso es un buen sitio por donde empezar, pero la accesibilidad de verdad incluye muchas más cosas: navegar con teclado, textos alternativos en las imágenes, encabezados en orden, formularios con etiquetas.
Dicho eso: un contraste malo lo padece todo el mundo con una pantalla al sol, así que arreglarlo tiene un retorno inmediato.
Las otras herramientas de color
Selector y conversor
Rueda de color y los valores en HEX, RGB, HSL, HSV, CMYK y nombre CSS, sincronizados. Con lector desde una foto.
Generador de paletas
La escala del 50 al 900 y las cinco combinaciones clásicas, listas para copiar como CSS, Tailwind, JSON o imagen.
Extraer de una imagen
Los colores dominantes de una foto con el porcentaje que ocupa cada uno. La imagen no sale del navegador.