Comprobador de contraste de color
Elige un color de texto y un fondo para obtener la relación de contraste WCAG 2 exacta, con resultados de aprobado o suspenso para AA, AAA y gráficos de interfaz. Si una combinación no pasa, la herramienta sugiere el color más cercano que sí cumple.
Última actualización:
Vista previa en vivo
Texto normal (16px): El veloz murciélago hindú comía feliz cardillo y kiwi. Un texto como este necesita una relación de al menos 4.5:1.
Texto grande (24px)
Texto grande en negrita (18.66px negrita)
Sugerir el color válido más cercano
Conserva el tono y la saturación y cambia solo la luminosidad, en la menor cantidad necesaria.
Cómo usar Comprobador de contraste de color
- Elige el color del texto con el selector o escribe un valor HEX, RGB o HSL.
- Elige el color de fondo de la misma forma. Usa Intercambiar para invertir ambos.
- Lee la relación de contraste y las etiquetas de aprobado o suspenso para AA, AAA y componentes de interfaz.
- Revisa la vista previa en vivo para ver texto normal, texto grande, un botón, un enlace e iconos.
- Corrige una combinación que no pasa: pulsa Aplicar en un color de texto o de fondo sugerido que cumpla AA o AAA.
- Copia el resultado o el enlace para compartir y envía los colores exactos a un compañero.
Requisitos de contraste WCAG de un vistazo
| Criterio | Se aplica a | Relación mínima |
|---|---|---|
| 1.4.3 Contraste (mínimo), AA | Texto normal | 4.5:1 |
| 1.4.3 Contraste (mínimo), AA | Texto grande (24px, o 18.66px en negrita) | 3:1 |
| 1.4.6 Contraste (mejorado), AAA | Texto normal | 7:1 |
| 1.4.6 Contraste (mejorado), AAA | Texto grande | 4.5:1 |
| 1.4.11 Contraste sin texto, AA | Iconos, bordes de campos de formulario, anillos de foco, líneas de gráficos | 3:1 |
Los logotipos, las imágenes puramente decorativas y los controles desactivados están exentos. El texto que forma parte de una foto sigue contando si transmite información.
La fórmula, paso a paso
Para cada color, divide los valores de rojo, verde y azul entre 255. Linealiza cada canal: si el valor es 0.04045 o menos, divídelo entre 12.92; si no, calcula ((valor + 0.055) / 1.055) elevado a 2.4. Después combínalos en la luminancia relativa:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
La relación de contraste es (L1 + 0.05) / (L2 + 0.05), siendo L1 el más claro de los dos colores. El blanco tiene L = 1 y el negro L = 0, así que negro sobre blanco da (1.05 / 0.05) = 21:1, el máximo. El verde domina la fórmula porque el ojo es más sensible a él, y por eso el verde puro (#00ff00) es mucho más "claro" que el azul puro (#0000ff).
Ejemplos resueltos
| Texto | Fondo | Relación | Resultado |
|---|---|---|---|
| #000000 | #ffffff | 21:1 | Pasa todo |
| #595959 | #ffffff | 7.0:1 | Pasa AAA texto normal |
| #767676 | #ffffff | 4.54:1 | Pasa AA texto normal |
| #777777 | #ffffff | 4.48:1 | No pasa AA normal, pasa AA grande |
| #ffffff | #0000ff | 8.59:1 | Pasa AAA |
| #ffffff | #ff0000 | 4.0:1 | Solo texto grande e interfaz |
| #ffffff | #00ff00 | 1.37:1 | No pasa nada |
Consejos para combinaciones de colores accesibles
- Cambia la luminosidad, no el tono. El contraste depende casi solo de la luminancia. Oscurecer unos pasos un color de marca suele mantenerlo reconocible y a la vez cumplir AA.
- Comprueba todos los estados. Hover, foco, enlaces visitados, texto de marcador de posición y mensajes de error necesitan su propia comprobación.
- Prueba el texto sobre imágenes frente a las zonas más claras y más oscuras que tenga detrás, o añade un fondo sólido o semiopaco.
- No dependas solo del color para transmitir significado. Acompaña los estados de color con texto, iconos o subrayados (SC 1.4.1).
¿Necesitas colores que cumplan desde el principio? Elige primero el tono de tu marca y después usa las sugerencias de arriba para encontrar el tono más claro que alcance 4.5:1 sobre blanco para el texto normal y otro más oscuro que alcance 7:1 para lecturas largas.
Preguntas frecuentes
¿Qué relación de contraste exige WCAG?
El nivel AA de WCAG 2 exige al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA exige 7:1 para texto normal y 4.5:1 para texto grande. Los componentes de interfaz y los gráficos significativos, como iconos, bordes de campos e indicadores de foco, necesitan al menos 3:1 frente a los colores adyacentes.
¿Qué se considera texto grande?
El texto grande mide al menos 18 puntos (24 píxeles CSS) en peso normal, o al menos 14 puntos (unos 18.66 píxeles CSS) en negrita. Todo lo que sea más pequeño es texto normal y necesita la relación más estricta.
¿Por qué #777777 sobre blanco no pasa AA?
Su relación de contraste es de unos 4.48:1, que esta herramienta muestra como 4.47 porque los umbrales de WCAG son estrictos y los valores nunca se redondean hacia arriba. 4.48 está por debajo de 4.5, así que no pasa para texto normal. #767676 es el gris más claro que pasa sobre blanco, con unos 4.54:1.
¿Cómo se calcula la relación de contraste?
Cada color se convierte a luminancia relativa: los canales sRGB se linealizan y se ponderan con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul. La relación es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro. Va de 1:1 para colores idénticos a 21:1 para negro sobre blanco.
¿Cómo afecta la opacidad del texto al contraste?
El texto semitransparente se mezcla con el fondo que tiene detrás, así que su color visible es más claro o más oscuro que el original. La herramienta mezcla el color del texto sobre el fondo con la opacidad elegida y mide ese color resultante, que es lo que realmente ven los usuarios.
¿Cumplir el contraste WCAG garantiza que el texto sea legible?
Es un mínimo, no una garantía. Las fuentes muy finas, los tamaños pequeños, las imágenes de fondo recargadas y algunas deficiencias en la visión del color pueden seguir dificultando la lectura. Siempre que puedas, apunta por encima del mínimo en textos largos.
¿Se usa aquí el nuevo método APCA?
No. Esta herramienta usa la fórmula de contraste de WCAG 2.x, que es la que citan las leyes y normas actuales como WCAG 2.1 y 2.2, EN 301 549 y la Sección 508. APCA es un método propuesto para una futura versión de WCAG y da cifras diferentes.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.