Comprobador de contraste
Local only — nothing is uploaded unless you save or share it.
Un comprobador de contraste de color para los niveles de accesibilidad WCAG.
- Introduce tu color de texto y el color de fondo
- Lee la relación y qué niveles WCAG supera
- Si no pasa, usa el color sugerido que sí pasa
Muestra de texto grande
Muestra de texto corrido normal — el tamaño que usa de verdad la mayor parte de tu contenido.
Guardar esta herramienta
Ten Comprobador de contraste a mano
Usa el menú Compartir de tu navegador y luego «Añadir a pantalla de inicio».
Sobre esta herramienta
Úsalo como simple comprobador de dos colores, o como comprobador de contraste con opacidad: un primer plano semitransparente se compone sobre el fondo antes de calcular la relación, en lugar de ignorar su alfa en silencio. La relación de contraste de color mide cuánto se distingue el texto del fondo que tiene detrás, en una escala de 1 a 21. Las Pautas de Accesibilidad para el Contenido Web ponen el listón en 4,5 a 1 para el texto corrido normal en el nivel AA, lo bajan a 3 a 1 para el texto grande y lo suben a 7 a 1 para el nivel AAA, más estricto. Esas cifras no son preferencias arbitrarias: el contraste bajo es uno de los fallos de accesibilidad más comunes de la web y afecta a mucha más gente de lo que parece, incluida cualquier persona con visión reducida, cualquiera de más de unos cuarenta años y cualquiera que lea una pantalla a pleno sol. Este comprobador calcula la relación como es debido, linealizando primero los valores sRGB, que es el paso que se saltan las calculadoras ingenuas y la razón de que sus resultados no coincidan con las auditorías de accesibilidad reales. Trata el texto translúcido componiéndolo antes sobre el fondo, ya que un color con alfa no tiene por sí solo un valor de contraste verdadero. Cuando un par se queda corto, sugiere el tono más cercano de tu color de texto que sí pasa.
Preguntas frecuentes
¿Cuál es una buena relación de contraste?
4,5:1 o mejor para el texto corrido normal, que es el nivel AA de las WCAG. El texto grande puede bajar a 3:1, y el nivel AAA, más estricto, pide 7:1. Cualquier cosa por debajo de 3:1 cuesta trabajo a la mayoría y resulta ilegible para algunos.
¿Cuál es una buena relación de contraste?
4,5:1 o mejor para el texto corrido normal, que es el nivel AA de las WCAG. El texto grande puede bajar a 3:1, y el nivel AAA, más estricto, pide 7:1. Cualquier cosa por debajo de 3:1 cuesta trabajo a la mayoría y resulta ilegible para algunos.
¿Qué cuenta como texto grande?
18pt, que son 24px, o 14pt en negrita, que son unos 18,66px. Todo lo que llegue a ese tamaño solo necesita una relación de 3 a 1 en el nivel AA en vez de 4,5 a 1. Aplicar el umbral de texto grande al texto corrido normal es una de las formas más comunes de suspender una auditoría después de que todos creyeran haberla aprobado.
¿Debo apuntar a AA o a AAA?
AA es el estándar práctico y es lo que referencia la mayor parte de la legislación, incluida la Ley Europea de Accesibilidad. AAA es más estricto y difícil de alcanzar en todo un sistema de diseño, así que suele tratarse como una aspiración para el texto corrido y no como una obligación general.
¿Por qué tu relación difiere de la de otra calculadora que usé?
Casi siempre porque la otra promedia los valores RGB en bruto en lugar de linealizarlos primero. El sRGB está codificado con gamma, así que la fórmula WCAG aplica una transformación concreta a cada canal antes de ponderarlos. Saltárselo produce números que parecen plausibles y suspenden las auditorías reales.
¿Cómo se trata el texto transparente?
Se compone primero sobre el color de fondo y luego se mide. Un color con canal alfa no tiene por sí solo una relación de contraste con sentido, porque lo que ves en realidad es una mezcla. Las herramientas que ignoran el alfa dan por aprobado un texto que en la práctica es invisible.
¿El contraste también importa en iconos y bordes?
Sí. Las WCAG 2.1 exigen 3 a 1 para los componentes de interfaz y los gráficos con significado, lo que cubre los bordes de los campos de formulario, los indicadores de foco y los botones con icono. Aquí se comprueban junto a los niveles del texto.
Ayuda a mejorar esta herramienta
¿Has encontrado un fallo, quieres un cambio o te falta alguna herramienta?
Tienes un mensaje sin enviar.
Gracias — nos ha llegado. Encontrarás la respuesta en tu bandeja.Go to my messages