Verificador de contraste de color (WCAG)

Por qué importa el contraste de color

Un gris claro sobre blanco queda elegante en la pantalla del diseñador, pero cuesta leerlo en el móvil a pleno sol, en un portátil antiguo o si tienes baja visión. Además, la sensibilidad al contraste disminuye con la edad. Unos colores legibles ayudan a mucha gente.

Este verificador de contraste calcula la relación de contraste WCAG 2.x entre el color del texto y el del fondo, indica criterio por criterio si la pareja cumple el nivel AA o AAA y propone el color corregido más cercano cuando no llega.

Cómo se usa

1. En «Color del texto» y «Color del fondo», usa el selector o escribe un código: HEX (#767676), RGB, HSL o un nombre CSS como rebeccapurple. El control «Opacidad» gestiona la transparencia.
2. Lee la relación de contraste y la tabla de resultados: cada casilla muestra un símbolo y la palabra «Cumple» o «No cumple», no solo un color.
3. Mira la «Vista previa en directo»: texto normal, texto grande, negrita, botón, enlace, campo de texto e icono.
4. Si no cumple, «Colores corregidos» propone un color de texto o de fondo que alcanza AA o AAA; «Aplicar» lo coloca. «Invertir» intercambia los dos colores.
5. Para revisar muchas, pega tus parejas en «Comprobar una lista de pares», una por línea, y pulsa «Comprobar la lista».

«Copiar el enlace de estos colores» crea una dirección que vuelve a abrir la misma pareja.

La relación de contraste, explicada sin complicaciones

Cada color recibe una luminancia relativa, de 0 para el negro a 1 para el blanco, calculada a partir de su rojo, verde y azul. La relación es (luminancia más clara + 0,05) dividida entre (luminancia más oscura + 0,05). Va de 1:1 a 21:1, negro sobre blanco. El umbral se aplica al valor exacto, sin redondear: 4,499 no llega a 4,5.

Con un color semitransparente, la herramienta calcula primero el color que se ve de verdad: negro al 50 % sobre blanco da #808080, de ahí 3,95:1. Un fondo transparente se coloca sobre blanco.

Umbrales AA y AAA

• Texto normal: 4,5:1 para AA y 7:1 para AAA.
• Texto grande: 3:1 para AA y 4,5:1 para AAA. Se considera grande a partir de 18 puntos, unos 24 px, o de 14 puntos en negrita, unos 18,66 px.
• Componentes de interfaz y gráficos: 3:1 para el borde de un campo, un icono suelto, el indicador de foco o las líneas de un gráfico. Este criterio no tiene nivel AAA.

AA es el nivel que buscan la mayoría de las webs. En la Unión Europea hay directivas que exigen accesibilidad a las webs del sector público y a muchos servicios privados, y en España la normativa y la norma técnica que se aplican remiten a estos criterios WCAG. Las obligaciones concretas dependen de tu actividad: si tienes dudas, consulta a un especialista.

La casilla «Mostrar la puntuación APCA» añade una puntuación de un método todavía experimental, pensado para futuras pautas y sin valor oficial hoy.

Consejos para unos colores legibles

• Mantén el tono de tu marca y cambia solo la luminosidad, como hace «Colores corregidos». Ejemplo: #999999 sobre blanco solo da 2,85:1; la herramienta propone #767676, el gris más claro que llega a 4,5:1.
• No transmitas información solo con el color: añade una palabra, un icono o un subrayado. La «Simulación de daltonismo» muestra cómo ve la pareja quien confunde el rojo y el verde.
• Sobre una foto, mide la zona más clara.
• Si tienes tema oscuro, revisa también las parejas invertidas.

Preguntas frecuentes

¿Qué relación de contraste debo buscar?

Al menos 4,5:1 para el texto corrido y 3:1 para el texto grande y los elementos de interfaz: es el nivel AA. Apunta a 7:1 en el cuerpo de texto si tu público es mayor.

¿Por qué #777777 no cumple si se parece a #767676?

El umbral es estricto: #777777 da 4,48:1 y #767676 da 4,54:1. El límite cae justo entre los dos.

¿El texto de ejemplo de un campo necesita contraste?

Sí, es texto y debe llegar a 4,5:1. Solo los controles desactivados quedan exentos según las pautas WCAG.

¿Se envían mis colores a algún sitio?

No. La pareja actual y tu lista solo se guardan en este dispositivo para la próxima visita.