SITIO EN CONSTRUCCIÓN. Todo se ofrece TAL CUAL y SIN GARANTÍAS, en la medida en que la ley lo permita. Es información, no asesoría profesional. Úsalo bajo tu propia responsabilidad. Términos y límites de responsabilidad →

eThorns EN
Menú
Invítanos un caféEnglisheThorns 2026 · Hecho en Colombia
← DesarrolloEN

Herramienta 5.5

Verificador de contraste de color WCAG (AA y AAA)

Mide el contraste entre el color del texto y el del fondo según WCAG 2.2 AA y AAA, para texto normal, texto grande y componentes. Corre en tu navegador.

Funciona en tu equipoFunciona completa en tu navegador: nada de lo que escribes o subes sale de tu equipo.

Cómo usarla

  1. Escribe el color del texto y el del fondo en hexadecimal, `rgb()` o con un nombre básico, o elígelos con el selector de color.
  2. Lee la relación y la tabla: texto normal y texto grande en AA y AAA, y componentes.
  3. Mira la vista previa, y usa Invertir colores o los ejemplos rápidos para comparar.

Quién no alcanza a leer un texto con poco contraste

El contraste es la diferencia de luminancia, qué tan claro u oscuro se ve un color, entre el texto y su fondo. WCAG, las pautas de accesibilidad para el contenido web, lo mide como una relación que va de 1:1 (el mismo color dos veces) a 21:1 (negro sobre blanco). Un texto por debajo de los mínimos es difícil o imposible de leer para personas con baja visión o daltonismo, para muchas personas mayores y para cualquiera que mire el celular al sol.

Escribe los dos colores en hexadecimal (#1a365d o #fff), como rgb(26, 54, 93) o con uno de 20 nombres básicos en inglés, como white o navy. La herramienta muestra la relación con dos decimales, si pasa o no pasa cada fila de WCAG 2.2 y una vista previa del texto sobre ese fondo. El cálculo se hace en tu navegador; los colores no se envían a ninguna parte.

Ejemplo: dos grises a un paso de distancia

El gris #767676 sobre blanco da 4.54 : 1. Eso pasa AA para texto normal (4,5 o más) y no pasa AAA para texto normal (7 o más). Pasa los dos niveles para texto grande y la fila de 3:1 para componentes. Es el gris más claro que pasa AA sobre blanco, y por eso está entre los ejemplos rápidos.

Cámbialo a #777777, un paso más claro, y la relación baja a 4.48 : 1: el texto normal ya no pasa AA y el texto grande no pasa AAA. La herramienta compara el valor exacto, no el redondeado, como pide WCAG, así que una pareja que muestra 4.50 : 1 puede no pasar si la relación real es 4,497. Para AAA sobre blanco, el gris más claro es #595959 (7.00 : 1), mientras que #999999, un gris común para textos de ayuda, llega a 2.85 : 1 y no pasa ninguna fila.

Lo que la relación de contraste no mide

Cada campo recibe un solo color sólido. La transparencia se ignora: rgba(0, 0, 0, 0.5) o un hexadecimal de 8 dígitos como #00000080 se evalúa como negro sólido, y el contraste sale más alto de lo que se ve. Para texto sobre una foto, un degradado o un panel translúcido, toma el punto más claro detrás del texto oscuro (o el más oscuro detrás del texto claro) y evalúa ese color.

La relación tampoco tiene en cuenta la fuente. Un grosor delgado como 100 o 200 en tamaños pequeños puede costar leerlo incluso con 4,5:1, y el mínimo más bajo para texto grande solo aplica desde 18 pt, o 14 pt en negrita.

Preguntas frecuentes

¿Cuál es la diferencia entre WCAG AA y AAA?

AA pide 4,5:1 para texto normal y 3:1 para texto grande; es el nivel que suelen pedir las normas y auditorías de accesibilidad. AAA pide 7:1 y 4,5:1. El W3C no recomienda exigir AAA en todo un sitio, porque hay contenido que no puede cumplir todos sus criterios.

¿Qué se considera texto grande según WCAG?

Al menos 18 pt (unos 24 píxeles CSS) en grosor normal, o al menos 14 pt (unos 18,7 píxeles CSS) en negrita. Las letras grandes tienen trazos más gruesos y se leen bien con menos contraste, así que el mínimo de AA baja de 4,5:1 a 3:1.

El color de mi marca no pasa. ¿Qué puedo cambiar?

Mantén el tono y oscurece el texto, o aclara el fondo, con el selector de color hasta que la fila que necesitas diga Pasa. Un color que solo llega a 3:1 sirve igual para títulos grandes, íconos y bordes. Un texto blanco sobre un botón del color de tu marca tiene exactamente la misma relación que ese color sobre blanco: invertir los colores no cambia el resultado.

¿El contraste aplica también a botones y campos de formulario?

Sí. El criterio 1.4.11, Contraste no textual, de WCAG 2.1 y 2.2 pide 3:1 frente a los colores vecinos para lo que necesitas ver para usar un control, como los bordes de los campos, el contorno de las casillas y el indicador de foco, y para los íconos que transmiten información. La última fila de la tabla revisa ese 3:1.

¿Por qué dice "Escribe un color válido"?

La herramienta lee hexadecimal de 3, 6 u 8 dígitos (con o sin `#`), `rgb()` y `rgba()` escritos con comas, y 20 nombres básicos. No lee `hsl()`, la forma nueva `rgb(26 54 93)` sin comas, ni nombres como `rebeccapurple`: conviértelos antes a hexadecimal.

  • 5.1Formateador JSONFormatea o minifica JSON y ubica el error por línea y columna.
  • 5.2Convertidor CSV y JSONConvierte CSV a JSON o JSON a CSV con coma, punto y coma o tabulación como separador.
  • 5.3Conversor YAML a JSONConvierte YAML a JSON y viceversa en tu navegador.
  • 5.4Base64Codifica o decodifica Base64 en tu navegador: texto UTF-8, Base64 apto para URL, archivos a Base64 o data URL, y Base64 de vuelta a un archivo descargable.
  • 5.6Explicador de cronLee una expresión cron de 5 campos como una frase y ve sus próximas 5 ejecuciones en tu zona horaria.
  • 5.7Bases numéricasConvierte números enteros entre decimal, hexadecimal, binario y octal, con longitud en bits y dígitos agrupados.
  • 5.8Entidades HTMLCodifica texto como entidades HTML (con nombre, decimales o hex) o decodifícalas: <, >, &, comillas, tildes, ñ y símbolos Latin-1.
  • 5.9Codificar URLCodifica o decodifica URLs y valores de consulta (percent-encoding) y separa cualquier URL en protocolo, host, ruta, parámetros y fragmento.
  • 5.10Hash SHA-256Calcula hashes SHA-1, SHA-256, SHA-384 y SHA-512 de textos o archivos y verifica una descarga con su checksum.
  • 5.11Generador de UUIDGenera UUID v4 aleatorios o UUID v7 ordenados por tiempo (RFC 9562) en tu navegador, de 1 a 1000 a la vez, en mayúsculas o sin guiones.
  • 5.12Timestamp UnixConvierte timestamps Unix en segundos o milisegundos a ISO 8601, UTC y tu hora local, o una fecha a epoch.
  • 5.13Decodificador JWTDecodifica un JSON Web Token en tu navegador: mira el encabezado y el payload como JSON y si ya venció.
  • 5.14Probador de regexPrueba expresiones regulares en vivo: coincidencias resaltadas, grupos de captura, banderas y errores claros.

╌╌ FIN ╌╌