Saltar al contenido
helpyself

Arreglador de contraste

Local only — nothing is uploaded unless you save or share it.

Un arreglador de contraste de color — el color accesible más cercano que supera la AA de las WCAG.

  1. Introduce el color del texto y el color de fondo que están suspendiendo.
  2. Elige el nivel WCAG que necesitas — AA es el objetivo habitual para el texto corrido.
  3. Decide qué color puede cambiar, o deja que mueva el que esté más cerca.
  4. Copia el color sugerido, o elige otra opción de la lista.
Guardar esta herramienta

Ten Arreglador de contraste a mano

Añadir a marcadores

Sobre esta herramienta

Saber que un par de colores suspende es solo media respuesta. Este es el arreglador de contraste para la otra mitad: dale un par que no pasa y te devuelve el color accesible más cercano que sí pasa. Un comprobador de contraste te dice que 3,1:1 no basta y te deja adivinando tonos hasta que alguno cuaje — así es como los colores de marca se convierten en silencio en lo primero que aprobó. Esto encuentra el color más cercano que funciona. Mueve la luminosidad y nada más, así que tu tono y tu saturación sobreviven: el resultado es reconociblemente el color que elegiste, un poco más claro o más oscuro, y no otro color que casualmente pasa el listón. Y mira todas las luminosidades posibles en lugar de parar en el primer acierto, así que un color al que le basta un cambio del 3 % recibe un cambio del 3 %. Tú eliges qué color puede moverse. Las paletas de marca suelen fijar uno de los dos — el fondo es la página, o el color del texto es el logotipo — y una sugerencia que cambia el equivocado no sirve de nada. Pide un arreglo al texto, al fondo, o al que esté más cerca. Están los cuatro grados WCAG: AA a 4,5:1 para el texto corrido, AA Grande a 3:1 para titulares de 18pt o 14pt en negrita, y los niveles AAA más estrictos a 7:1 y 4,5:1. Todo funciona en tu navegador.

Preguntas frecuentes

¿Por qué solo cambia la luminosidad?

Porque el contraste es una función de la luminancia relativa, y de tono, saturación y luminosidad solo la luminosidad mueve la luminancia de forma apreciable. Cambiar el tono daría un color que pasa y que no es el tuyo. Mantener tono y saturación significa que el arreglo sigue pareciéndose al color que elegiste.

¿Cuál es el color más cercano que pasa?

Aquel cuya luminosidad se movió menos. Se prueban todos los valores de 0 a 100 y gana el cambio más pequeño que supera tu nivel, así que nunca se te pide oscurecer más de lo necesario.

¿Y si no pasa nada?

Lo dice. Sobre un fondo gris medio, la AAA a 7:1 es inalcanzable incluso con negro puro o blanco puro: ningún tono de ningún color lo logra. La respuesta honesta entonces es cambiar el otro color, y para eso está la opción de ajuste.

¿A qué nivel WCAG debería apuntar?

AA a 4,5:1 para el texto corrido normal es la exigencia legal en la mayoría de los sitios, incluida la directiva europea de accesibilidad. La AAA a 7:1 vale la pena para lecturas largas. El texto grande — 18pt, o 14pt en negrita — tiene permitido 3:1 en AA.

¿Esto sustituye al comprobador de contraste?

No, va detrás de él. El comprobador te dice dónde estás y frente a qué niveles; este te dice qué hacer con un suspenso. Comparten las mismas cuentas de contraste, así que los dos nunca se contradirán.

Ayuda a mejorar esta herramienta

¿Has encontrado un fallo, quieres un cambio o te falta alguna herramienta?

/contrast-fixer

↑↓ para moverte · Enter para abrir · Esc para cerrar