Relación de contraste
Relación = (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminancia del color más claro
El 0,05 representa la luz ambiente reflejada por la pantalla.
Verificador de contraste
Compara un color de texto con un color de fondo, calcula su relación de contraste y verifica rápidamente los umbrales WCAG AA y AAA.
- Portapapeles
Aa
Relación de contraste:
- AA texto normal:
- AA texto grande:
- AAA texto normal:
¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Este comprobador calcula la relación de contraste entre un color de texto y un color de fondo con el método de las WCAG e indica si la combinación supera los umbrales AA y AAA. Sirve para validar una paleta antes de llevarla a una maqueta, una hoja de estilos o un componente, sin enviar los colores a ningún servidor.
Cada color hexadecimal se convierte en luminancia relativa: los canales rojo, verde y azul se linealizan y se ponderan según la sensibilidad del ojo (el verde aporta más del 70 % de la luminancia).
La relación divide la luminancia más clara más 0,05 entre la más oscura más 0,05. Va de 1:1 (dos colores iguales) a 21:1 (negro sobre blanco) y no depende del orden de los colores.
El resultado se compara con tres umbrales: 4,5:1 para texto normal en AA, 3:1 para texto grande en AA y 7:1 para texto normal en AAA. Una vista previa muestra el texto con los dos colores elegidos.
Cómo utilizar esta herramienta
Elige el color del texto
Introduce o selecciona el color de los caracteres.
Elige el color de fondo
Indica el color del fondo sobre el que se muestra el texto.
Lee la relación y los niveles
La relación aparece con Cumple o No cumple para AA texto normal, AA texto grande y AAA texto normal.
Ajusta hasta el nivel buscado
Oscurece el texto o aclara el fondo poco a poco y vuelve a comprobar.
Fórmula de la relación de contraste WCAG
La relación compara la luminancia relativa de los dos colores.
Luminancia relativa
L = 0,2126 × R + 0,7152 × G + 0,0722 × B, con canales linealizados entre 0 y 1
Un canal c (valor sobre 255 dividido entre 255) vale c ÷ 12,92 si es menor o igual que 0,03928; si no, ((c + 0,055) ÷ 1,055)^2,4.
- L_1
- Luminancia del color más claro
- L_2
- Luminancia del color más oscuro
- R_s, G_s, B_s
- Canales rojo, verde y azul linealizados
Casos de uso
Validar una identidad visual
Comprobar que un color de marca sigue siendo legible como texto sobre fondo blanco u oscuro antes de aplicarlo en todo un sitio.
Corregir una auditoría de accesibilidad
Encontrar el tono más cercano que llega a 4,5:1 cuando una auditoría señala un gris demasiado claro.
Elegir el color de un botón
Comparar el texto de un botón con su fondo y probar después los estados de hover y desactivado.
Ejemplos
Gris #777777 sobre fondo blanco
Este gris tan habitual se queda justo por debajo de AA: sirve para un título grande, no para un párrafo.
Entrada
Color del texto: #777777 · Color de fondo: #ffffffResultado
Relación de contraste: 4.48:1 · AA texto normal: No cumple · AA texto grande: Cumple · AAA texto normal: No cumpleGris #595959 sobre fondo blanco
Un gris más intenso alcanza exactamente el umbral AAA de 7:1 sin la dureza del negro puro.
Entrada
Color del texto: #595959 · Color de fondo: #ffffffResultado
Relación de contraste: 7.00:1 · AA texto normal: Cumple · AA texto grande: Cumple · AAA texto normal: CumpleConsejos y buenas prácticas
- Se considera texto grande el de 24 px (18 pt) normal o 18,66 px (14 pt) en negrita; por debajo, apunta a 4,5:1.
- Para texto sobre imagen o degradado, prueba con la zona del fondo más desfavorable.
- Los iconos y bordes de campos siguen otro criterio WCAG (1.4.11), que pide 3:1 frente a los colores vecinos.
- Una relación correcta no lo resuelve todo: un texto muy fino o muy pequeño puede seguir siendo difícil de leer.
Fuentes y referencias
- Web Content Accessibility Guidelines (WCAG) 2.2 (se abre en una pestaña nueva), W3CPágina en inglés
Preguntas frecuentes
¿Qué es una relación de contraste?
Es la luminancia del color más claro dividida entre la del más oscuro, cada una más 0,05. Va de 1:1 para dos colores iguales a 21:1 para negro sobre blanco.
¿Qué umbrales hay que alcanzar?
Para el nivel AA, 4,5:1 en texto normal y 3:1 en texto grande. Para el nivel AAA, 7:1 en texto normal. AA es el nivel que exigen la mayoría de normativas, entre ellas la norma europea EN 301 549.
¿Por qué #777777 sobre blanco no cumple?
Su relación es 4.48:1, justo por debajo de 4,5:1. La herramienta no redondea a tu favor: con 4,48 el texto normal no llega a AA.
¿Importa el orden de los dos colores?
No. La fórmula siempre pone el color más claro en el numerador: texto blanco sobre azul y texto azul sobre blanco dan la misma relación.
¿Se tiene en cuenta la transparencia?
No. La herramienta compara dos colores opacos. Para un color semitransparente, calcula primero el color que resulta sobre el fondo y comprueba ese color.
¿Se envían mis colores a algún sitio?
No. El cálculo se hace en tu navegador y los colores no salen de tu dispositivo.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Codifica o decodifica una URL, sus parámetros y los caracteres especiales que contiene.
Web y SEOUsar esta herramienta
Convierte un título o una frase en un slug limpio y listo para utilizar en una URL.
Web y SEOUsar esta herramienta
Valida, normaliza e inspecciona direcciones web localmente.
Web y SEOUsar esta herramienta
También te puede interesar
GuíaBuenas prácticasPrincipiante
Contraste WCAG: ¿cómo hacer accesibles los colores?
Comprende los umbrales de contraste WCAG, mide una combinación de colores y corrige los casos que dificultan la lectura o el uso de una interfaz.
31 de agosto de 202625 min
GuíaBuenas prácticasPrincipiante
Cómo optimizar 50 imágenes para la Web de una sola vez
Redimensiona un lote de imágenes, conviértelo a WebP y elimina metadatos con un único Pipeline.
6 de septiembre de 20262 min
TutorialBuenas prácticasPrincipiante
Optimizar imágenes para la Web sin perder calidad
Redimensiona, comprime y elige entre WebP, AVIF y otros formatos con un flujo práctico que reduce peso sin degradar innecesariamente la imagen.
30 de agosto de 20262 min
ActualidadConceptos y tecnologíasIntermedio
¿El procesamiento local en el navegador está sustituyendo a las herramientas online?
WebAssembly, APIs del navegador y dispositivos más potentes permiten procesar más datos localmente. ¿Hasta dónde puede sustituir a los servicios con subida de archivos?
30 de agosto de 20262 min