Figuras científicas: conserva el significado sin color
Revisa diagramas científicos en grises con etiquetas, formas y estilos de línea. Usa un SVG completo para conservar la identidad de condiciones sin cambiar datos.
En esta página
Para que un diagrama científico funcione sin color, da a cada condición importante una identidad visible más allá del tono. Añade etiquetas directas, distingue símbolos o estilos de línea adecuados y revisa una copia en escala de grises al tamaño previsto. Otra paleta puede ayudar, pero no puede dar nombre a una condición sin etiqueta.
Esta guía aborda diagramas explicativos de categorías: esquemas de dos condiciones, grupos o rutas. Usa un archivo SVG (Scalable Vector Graphics) original de dos filas sin datos experimentales. Los mapas de calor continuos, las micrografías y los gráficos medidos requieren un tratamiento propio que tenga en cuenta los datos; no traces sus marcas como formas nuevas para que parezcan más claras.
Decide qué comunica el color al lector
Empieza con el original editable, la leyenda de la figura y la reproducción más pequeña prevista. Enumera las distinciones que el lector debe recuperar: a qué condición pertenece un símbolo, adónde lleva una ruta o qué panel describe una etiqueta.
Después elimina mentalmente el color. Si las instrucciones se vuelven «sigue la línea naranja» o «compara los círculos azules», sustituye esa dependencia por nombres localizables en la figura. Usa nombres significativos de condiciones en una entrega real. «Condición A» y «Condición B» son ejemplos provisionales para demostrar el diseño.
Las indicaciones del W3C sobre uso del color piden una señal visible, como texto o forma, cuando el color transmite información. Son indicaciones de accesibilidad web, no una prueba de aceptación de una revista científica. Aquí sirve el mismo principio de diseño: conservar la distinción mediante otra señal.
Da a cada condición una segunda identidad
Usa el mínimo de señales que aclare la correspondencia. Una etiqueta breve junto a cada ruta puede bastar para un esquema sencillo. Los marcadores repetidos o conectores de distinto estilo pueden ayudar a seguir una ruta larga sin regresar a la leyenda.
| Condición | Color del ejemplo | Símbolo | Conector | Etiqueta directa |
|---|---|---|---|---|
| A | Azul | Círculo | Continuo | Condición A |
| B | Naranja | Triángulo | Discontinuo | Condición B |
Mantén esa correspondencia en todos los paneles. Si un triángulo ya representa un componente específico en tu disciplina, conserva ese significado y elige otra señal. Tampoco reutilices una línea discontinua que ya signifique una conexión hipotética. La codificación redundante expresa la misma identidad mediante más de una señal; no asigna significados contradictorios a símbolos conocidos.
Elige una paleta apropiada para el destino y mantén legibles las etiquetas sobre el fondo. Las especificaciones de figuras de Nature piden una paleta accesible y muestran recuadros de color en la leyenda junto a texto negro. También desaconsejan patrones y adornos innecesarios. Eso respalda etiquetas sencillas y símbolos con propósito en lugar de llenar cada objeto con tramas.

Prueba el SVG de dos condiciones
Guarda este ejemplo completo como conditions.svg. Ábrelo en un navegador o editor vectorial. Tiene fondo blanco, dos filas etiquetadas y ninguna imagen externa ni fuente importada. Los símbolos diferentes son deliberadamente genéricos; no representan un mecanismo biológico.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="240" viewBox="0 0 600 240">
<rect width="600" height="240" fill="white"/>
<g fill="white" stroke-width="4">
<g stroke="#0072B2">
<path d="M80 70H320"/>
<circle cx="80" cy="70" r="16"/><circle cx="320" cy="70" r="16"/>
</g>
<g stroke="#D55E00">
<path d="M80 170H320" stroke-dasharray="12 8"/>
<polygon points="80,150 62,180 98,180"/><polygon points="320,150 302,180 338,180"/>
</g>
</g>
<g fill="black" font-family="sans-serif" font-size="24">
<text x="370" y="78">Condition A</text>
<text x="370" y="178">Condition B</text>
</g>
</svg>El original conserva las etiquetas como texto. Su stroke-dasharray="12 8" da al conector inferior un patrón repetido de guiones y espacios; la especificación de guiones en trazos SVG define cómo recorren el trazado esas longitudes. Ni la etiqueta ni el triángulo dependen de reconocer el naranja.
- Abre la versión de 600 × 240. Confirma que están ambas etiquetas, que los círculos pertenecen a A y los triángulos a B.
- Exporta una copia en color y después crea una copia en grises de esa exportación. Guarda el maestro en color. Revisa si puedes identificar ambas condiciones por nombre y seguir sus conectores sin consultar una descripción de colores.
- Crea una copia más pequeña del original con
width="300"yheight="120", dejando elviewBoxintacto. Repite ambas exportaciones. Esto comprueba una reducción, no un tamaño mínimo universal. - Inspecciona el archivo que colocarás realmente en el manuscrito o diapositiva. Confirma que etiquetas, símbolos y estilos de conectores sobreviven a esa exportación y a cualquier cambio posterior de tamaño.
Para un control deliberadamente más débil, elimina el grupo de texto, sustituye los triángulos por círculos en las mismas posiciones y elimina stroke-dasharray. Todavía contiene dos filas de colores. La pregunta es si sus nombres de condición siguen disponibles, no si ambos grises parecen idénticos por casualidad.
Renderizamos ambas versiones con librsvg a 600 × 240 y 300 × 120 píxeles y convertimos cada resultado a grises con la ponderación RGB 0.299R + 0.587G + 0.114B. En las cuatro versiones redundantes, las etiquetas, la distinción círculo/triángulo y los conectores continuos/discontinuos siguieron visibles y sin recortes. El azul y el naranja del control se convirtieron en grises distintos, 87 y 119 en una escala de 0–255. Por eso no describimos el control como indistinguible. La mejora es una identidad explícita de las condiciones que no depende del tono.
Son comprobaciones digitales de este SVG creado directamente. No probamos una impresión física ni realizamos un estudio con lectores. Una conversión a grises tampoco reproduce todas las formas de deficiencia de visión del color. Trátala como una vista de inspección junto a comprobaciones adecuadas para tu audiencia y revista.
Repara la señal que falle al tamaño final
Si una etiqueta queda demasiado pequeña, abréviala con cuidado o deja espacio para texto mayor. Si los guiones se unen y parecen una línea continua, ajusta su separación o usa otra señal apropiada. Si un marcador pierde su forma, simplifícalo o agrándalo. Vuelve a revisar la figura completa tras cada cambio para que la reparación no cree solapamientos en otra zona.
Para cálculos de tamaño físico, usa la guía independiente sobre tamaño de fuente y ancho de línea en figuras científicas. El ejemplo de 300 píxeles de este artículo es una revisión renderizada en pantalla, no una recomendación de ancho de columna de revista.
Mantén sincronizadas la leyenda y la ilustración. Sustituye «línea naranja» por el nombre de la condición y su señal visible, como «Condición B, conector discontinuo». Para figuras en línea, aporta también un texto alternativo o pie apropiado que describa la comparación sustantiva. Las etiquetas visibles por sí solas no garantizan accesibilidad para quienes no pueden ver la figura.
Conserva la ciencia al editar la presentación
Modifica los gráficos medidos en su código o archivo original de graficación y vuelve a exportarlos conservando los valores subyacentes. Para micrografías, guarda las imágenes originales y sigue las reglas de procesamiento de la revista. La política de integridad de imágenes de Nature exige que la imagen final represente con exactitud los datos originales y describe los requisitos para declarar el procesamiento. Redibujar una imagen hasta que parezca más ordenada no sustituye ese flujo.
Si solo tienes un esquema ráster independiente, el flujo de diagrama científico a SVG de PerfectVector puede ayudar a recuperar formas editables. Revisa la vista previa y desbloquea el resultado para editar y exportar el SVG. Compara cada conexión y símbolo recuperados con el original y reconstruye las etiquetas como texto donde sea necesario. Una forma recuperada solo sirve si conserva su significado científico. Si ya tienes ilustración editable, modifícala directamente; cambiar colores SVG trata esa tarea de edición más acotada.
Termina cuando cada condición tenga un nombre inequívoco, sus señales no basadas en color sigan legibles en la figura colocada y la leyenda coincida. Si falta el original vectorial de un esquema independiente, recupera sus formas con PerfectVector y repite la revisión de identidad en el resultado exportado.
Preguntas frecuentes
¿Basta una paleta apta para personas con daltonismo en un diagrama científico? Una paleta apropiada ayuda, pero la identidad de las condiciones también debe estar disponible mediante etiquetas directas u otras señales adecuadas. Revisa la figura completa al tamaño previsto, incluida la leyenda.
¿Una revisión en grises demuestra que la figura es accesible? No. Comprueba un renderizado sin tono. No abarca todas las diferencias de visión del color, la baja visión, el acceso con lectores de pantalla ni los requisitos de una revista concreta.
¿Debo cambiar todos mis símbolos científicos por círculos y triángulos? No. El ejemplo usa símbolos genéricos provisionales. Conserva los símbolos y estilos de línea que ya tengan significado científico y añade etiquetas u otra señal compatible.
Fuentes
- W3C — Comprender el uso del color — Explica las alternativas visibles al color y los límites de este criterio de accesibilidad.
- Nature — Preparación de figuras: nuestras especificaciones — Aporta las indicaciones citadas de paleta, texto de leyenda y eliminación de adornos en figuras de Nature.
- W3C — Guiones en trazos SVG — Define el patrón de guiones y espacios usado en el ejemplo completo.
- Nature — Integridad y estándares de imágenes — Establece los límites sobre datos originales y procesamiento que sustentan las indicaciones de imágenes científicas.
Más del blog

Cómo hacer un logo de un color sin perder su diseño
Convierte un logo multicolor en un solo color sólido sin perder sus detalles esenciales. Usa espacio negativo, prueba fondos claros y oscuros y revisa la versión pequeña.
Iconos SVG personalizados en Shopify: prepara una marca limpia
Prepara un icono SVG personalizado para un tema de Shopify y elige entre un recurso de imagen o un snippet Liquid en línea. Comprueba trazados, control de color, tamaño y accesibilidad.
