Cómo se usa
- Elige los colores o escríbelos — hex, rgb(), hsl(), oklch() o un nombre de color.
- Consulta la relación y los cuatro resultados WCAG, y revisa la vista previa en vivo debajo.
- Si no cumple, haz clic en «Usar este color» junto a una sugerencia para aplicarla.
Opciones explicadas
- AA
- Al menos 4,5:1 para texto normal y 3:1 para texto grande (18 pt / 24 px, o 14 pt / unos 18,7 px en negrita). La mayoría de normativas y sistemas de diseño exigen AA.
- AAA
- Al menos 7:1 para texto normal y 4,5:1 para texto grande, para contenido donde la legibilidad es lo más importante.
- Color sugerido
- Mantiene el tono y la saturación en el espacio de color OKLCH y cambia solo la luminosidad para encontrar el color más cercano que justo cumple.
- Colores transparentes
- Un color de texto con transparencia se mide tal como se ve sobre el fondo.
Cómo se calcula la relación
Cada color se convierte de sRGB a luz lineal y luego a luminancia relativa:
lineal = c ÷ 12,92 si c ≤ 0,04045
lineal = ((c + 0,055) ÷ 1,055) ^ 2,4 en otro caso (c va de 0 a 1)
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
relación = (L_más_claro + 0,05) ÷ (L_más_oscuro + 0,05)El verde es el que más cuenta porque el ojo es más sensible a él. Algunos resultados sobre fondo blanco:
| Color del texto | Relación | Resultado |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5,57 : 1 | AA texto normal, no AAA texto normal |
| #767676 | 4,54 : 1 | AA texto normal |
| #777777 | 4,48 : 1 | No cumple AA para texto normal, sí para texto grande |
Las definiciones de WCAG están en Understanding Success Criterion 1.4.3.
Preguntas frecuentes
¿Cómo se calcula el contraste?
Con la fórmula WCAG 2.x: (luminancia relativa más clara + 0,05) ÷ (luminancia relativa más oscura + 0,05), lo que da de 1:1 a 21:1. Negro sobre blanco es 21:1.
¿Por qué se menciona tanto el color #767676?
Es el gris más claro que llega a 4,5:1 (unos 4,54:1) sobre blanco, así que es un límite inferior habitual para texto secundario.
¿También hay que comprobar iconos y bordes?
Sí. Desde WCAG 2.1, los componentes de interfaz y los gráficos (bordes de botones, campos, iconos) necesitan al menos 3:1 frente a los colores adyacentes.
Privacidad
Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.