> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# ภาพวิทยาศาสตร์: คงความหมายแม้ไม่มีสี

> ตรวจแผนภาพวิทยาศาสตร์ในระดับเทาด้วยป้าย รูปทรง และสไตล์เส้น ใช้ตัวอย่าง SVG ครบถ้วนเพื่อคงเอกลักษณ์ของเงื่อนไขโดยไม่เปลี่ยนข้อมูล

Source: https://perfectvector.com/th/blog/scientific-figure-color-redundancy

Language: th
Author: Irene Kim
Published: 2026-10-15T08:00:00+09:00

เพื่อให้แผนภาพวิทยาศาสตร์ใช้ได้โดยไม่มีสี ให้แต่ละเงื่อนไขสำคัญมีเอกลักษณ์ที่มองเห็นได้นอกเหนือจากสี เพิ่มป้ายตรงจุด แยกสัญลักษณ์หรือสไตล์เส้นที่เหมาะสม แล้วตรวจสำเนาระดับเทาที่ขนาดแสดงที่ต้องการ พาเลตต่างออกไปอาจช่วยได้ แต่ตั้งชื่อให้เงื่อนไขที่ไม่มีป้ายไม่ได้

คู่มือนี้ครอบคลุมแผนภาพอธิบายแบบหมวดหมู่ เช่น ผังแสดงสองเงื่อนไข กลุ่ม หรือเส้นทาง ใช้ไฟล์ SVG (Scalable Vector Graphics) สองแถวที่สร้างเองและไม่มีข้อมูลทดลอง ฮีตแมปต่อเนื่อง ภาพกล้องจุลทรรศน์ และกราฟวัดต้องจัดการตามข้อมูลของตน อย่าลากรอยเหล่านั้นเป็นรูปทรงใหม่เพื่อให้ดูชัดขึ้น

## ตัดสินว่าสีกำลังบอกอะไรผู้อ่าน

เริ่มจากต้นฉบับแก้ไขได้ คำอธิบายภาพ และขนาดทำซ้ำเล็กที่สุดที่ตั้งใจ ระบุความต่างที่ผู้อ่านต้องเข้าใจ เช่น สัญลักษณ์เป็นของเงื่อนไขใด เส้นทางนำไปไหน หรือป้ายอธิบายช่องใด

แล้วนึกภาพว่าเอาสีออก หากคำสั่งกลายเป็น “ตามเส้นส้ม” หรือ “เปรียบเทียบวงกลมน้ำเงิน” ให้แทนการพึ่งนั้นด้วยชื่อที่หาพบในภาพ ใช้ชื่อเงื่อนไขมีความหมายในงานส่งจริง “เงื่อนไข A” และ “เงื่อนไข B” ด้านล่างเป็นคำแทนเพื่อสาธิตเลย์เอาต์

[คำแนะนำการใช้สีของ W3C](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) กำหนดให้มีสัญญาณมองเห็น เช่น ข้อความหรือรูปทรงเมื่อสีสื่อข้อมูล นี่เป็นแนวทางการเข้าถึงเว็บ ไม่ใช่การทดสอบรับงานของวารสารวิทยาศาสตร์ หลักออกแบบเดียวกันมีประโยชน์ที่นี่ คือคงความต่างด้วยสัญญาณอื่น

## ให้แต่ละเงื่อนไขมีเอกลักษณ์ที่สอง

ใช้สัญญาณน้อยที่สุดที่ทำให้การจับคู่ชัด ป้ายสั้นข้างแต่ละเส้นทางอาจพอสำหรับผังง่าย เครื่องหมายซ้ำหรือเส้นเชื่อมต่างรูปแบบช่วยให้ตามเส้นทางยาวโดยไม่ต้องกลับไปดูคำอธิบาย

| เงื่อนไข | สีในตัวอย่าง | สัญลักษณ์  | เส้นเชื่อม | ป้ายตรงจุด |
| -------- | ------------ | ---------- | ---------- | ---------- |
| A        | น้ำเงิน      | วงกลม      | ทึบ        | เงื่อนไข A |
| B        | ส้ม          | สามเหลี่ยม | ประ        | เงื่อนไข B |

คงการจับคู่นี้ทุกช่อง หากสามเหลี่ยมมีความหมายเป็นองค์ประกอบเฉพาะในสาขาแล้ว ให้เก็บความหมายนั้นและเลือกสัญญาณอื่น เช่นเดียวกัน อย่าใช้เส้นประที่หมายถึงการเชื่อมสมมติอยู่แล้วเพื่อความหมายใหม่ การเข้ารหัสซ้ำซ้อนคือแสดงเอกลักษณ์เดียวด้วยหลายสัญญาณ ไม่ใช่กำหนดความหมายขัดแย้งให้สัญลักษณ์คุ้นเคย

เลือกพาเลตเหมาะกับปลายทางและให้ป้ายอ่านได้บนพื้นหลัง [ข้อกำหนดภาพของ Nature](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/) ขอพาเลตเข้าถึงได้และแสดงกล่องสีคำอธิบายคู่กับข้อความดำ อีกทั้งไม่สนับสนุนลวดลายและของตกแต่งรก จึงรองรับป้ายเรียบและสัญลักษณ์มีจุดประสงค์แทนเติมลายเส้นในทุกวัตถุ

![ภาพประกอบเปรียบเทียบสองเงื่อนไขในผังที่ระบุด้วยสีอย่างเดียวกับเงื่อนไขที่แยกด้วยป้าย รูปทรง และสไตล์เส้นเชื่อม](https://perfectvector.com/blog/scientific-figure-color-redundancy/condition-labels-and-shapes.webp)

*ภาพประกอบ: ป้ายตรงจุดกับรูปทรงหรือสไตล์เส้นต่างกันให้สัญญาณเอกลักษณ์ควบคู่สี การตรวจ SVG เรนเดอร์ด้านล่างใช้ตัวอย่างที่สร้างแยก*

## ลอง SVG สองเงื่อนไข

บันทึกตัวอย่างครบนี้เป็น `conditions.svg` เปิดในเบราว์เซอร์หรือตัวแก้ไขเวกเตอร์ มีพื้นหลังขาว สองแถวมีป้าย และไม่มีภาพภายนอกหรือฟอนต์นำเข้า สัญลักษณ์ต่างกันตั้งใจเป็นแบบทั่วไป ไม่แทนกลไกชีววิทยา

```xml
<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>
```

ต้นฉบับเก็บป้ายเป็นข้อความ `stroke-dasharray="12 8"` ให้เส้นเชื่อมล่างเป็นแบบขีดกับช่องซ้ำ [ข้อกำหนดเส้นประ SVG](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing) นิยามว่าความยาวตามพาธอย่างไร ทั้งป้ายและสามเหลี่ยมไม่พึ่งการเห็นสีส้ม

1. เปิดรุ่น 600 × 240 ยืนยันว่ามีทั้งสองป้าย วงกลมเป็นของ A และสามเหลี่ยมเป็นของ B
2. ส่งออกสำเนาสี แล้วทำสำเนาระดับเทาจากไฟล์นั้น เก็บไฟล์หลักสี ตรวจว่าระบุทั้งสองเงื่อนไขตามชื่อและตามเส้นเชื่อมได้โดยไม่ดูคำอธิบายสีหรือไม่
3. ทำสำเนาต้นฉบับเล็กโดยใช้ `width="300"` และ `height="120"` คง `viewBox` เดิม ทำการส่งออกทั้งสองซ้ำ นี่ตรวจการย่อหนึ่งแบบ ไม่ใช่ขนาดขั้นต่ำสากล
4. ตรวจไฟล์ที่จะวางในบทความหรือสไลด์จริง ยืนยันว่าป้าย สัญลักษณ์ และสไตล์เส้นเชื่อมคงอยู่ผ่านการส่งออกและการเปลี่ยนขนาดภายหลัง

สำหรับตัวควบคุมที่ตั้งใจอ่อนกว่า ลบกลุ่มข้อความ แทนสามเหลี่ยมด้วยวงกลมในตำแหน่งเดิม และลบ `stroke-dasharray` ยังมีสองแถวสี คำถามคือยังมีชื่อเงื่อนไขหรือไม่ ไม่ใช่ระดับเทาสองค่าบังเอิญดูเหมือนกันหรือไม่

เราเรนเดอร์ทั้งสองรุ่นด้วย librsvg ที่ 600 × 240 และ 300 × 120 พิกเซล แล้วแปลงแต่ละผลเป็นระดับเทาด้วยน้ำหนัก RGB `0.299R + 0.587G + 0.114B` ทั้งสี่รุ่นที่มีสัญญาณซ้ำ ป้าย ความต่างวงกลม/สามเหลี่ยม และเส้นทึบ/ประยังเห็นและไม่ถูกตัด สีน้ำเงินและส้มของตัวควบคุมกลายเป็นระดับเทาต่างกัน คือ 87 และ 119 ในสเกล 0–255 เราจึงไม่อธิบายว่าตัวควบคุมแยกไม่ออก สิ่งที่ดีขึ้นคือเอกลักษณ์เงื่อนไขชัดเจนโดยไม่พึ่งสี

นี่เป็นการตรวจดิจิทัลของ SVG ที่สร้างเอง ไม่ได้ทดสอบพิมพ์จริงหรือศึกษาผู้อ่าน การแปลงระดับเทายังไม่จำลองความบกพร่องการเห็นสีทุกแบบ ใช้เป็นมุมตรวจหนึ่งร่วมกับการตรวจที่เหมาะกับผู้ชมและวารสาร

## แก้สัญญาณที่ล้มเหลวเมื่อขนาดสุดท้าย

หากป้ายเล็กเกิน ให้ย่อคำอย่างระมัดระวังหรือเว้นที่สำหรับข้อความใหญ่ หากขีดประรวมดูเป็นเส้นทึบ ให้ปรับช่องหรือใช้สัญญาณเหมาะสมอื่น หากเครื่องหมายเสียรูป ให้ทำง่ายหรือใหญ่ขึ้น ตรวจทั้งภาพใหม่หลังทุกการเปลี่ยนเพื่อไม่ให้การแก้สร้างส่วนซ้อนที่อื่น

สำหรับคำนวณขนาดกายภาพ ใช้คู่มือแยกเรื่อง[ขนาดฟอนต์และความหนาเส้นภาพวิทยาศาสตร์](https://perfectvector.com/th/blog/scientific-figure-font-size-line-width) ตัวอย่าง 300 พิกเซลในบทความเป็นการตรวจเรนเดอร์จอ ไม่ใช่คำแนะนำความกว้างคอลัมน์วารสาร

ให้คำอธิบายตรงงานภาพ เปลี่ยน “เส้นส้ม” เป็นชื่อเงื่อนไขและสัญญาณที่เห็น เช่น “เงื่อนไข B เส้นเชื่อมประ” สำหรับภาพออนไลน์ ให้ข้อความทดแทนหรือคำบรรยายที่เหมาะสมอธิบายการเปรียบเทียบสาระด้วย ป้ายมองเห็นอย่างเดียวไม่ยืนยันการเข้าถึงของผู้ที่มองภาพไม่ได้

## เก็บความถูกต้องวิทยาศาสตร์ขณะแก้การนำเสนอ

ปรับกราฟวัดในต้นฉบับพล็อตและส่งออกใหม่โดยรักษาค่าข้อมูล สำหรับภาพกล้องจุลทรรศน์ เก็บภาพเดิมและทำตามกฎประมวลผลภาพของวารสาร [นโยบายความถูกต้องภาพของ Nature](https://www.nature.com/nature/editorial-policies/image-integrity) กำหนดให้ภาพสุดท้ายแทนข้อมูลต้นฉบับอย่างถูกต้องและอธิบายข้อกำหนดเปิดเผยการประมวลผล วาดภาพใหม่จนดูเรียบร้อยไม่ใช่สิ่งแทนขั้นตอนนั้น

หากมีเพียงผังราสเตอร์แยก [ขั้นตอนแผนภาพวิทยาศาสตร์เป็น SVG ของ PerfectVector](https://perfectvector.com/th/scientific-diagram-to-svg) ช่วยคืนรูปทรงแก้ไขได้ ตรวจตัวอย่าง แล้วปลดล็อกเพื่อแก้และส่งออก SVG เปรียบเทียบทุกการเชื่อมและสัญลักษณ์ที่คืนมากับต้นฉบับ และทำป้ายเป็นข้อความใหม่เมื่อจำเป็น รูปทรงที่คืนมีประโยชน์เมื่อความหมายวิทยาศาสตร์ยังอยู่ หากมีงานแก้ไขได้แล้วให้ปรับโดยตรง [การเปลี่ยนสี SVG](https://perfectvector.com/th/blog/how-to-change-svg-color) ครอบคลุมขั้นแก้เฉพาะนั้น

จบเมื่อแต่ละเงื่อนไขมีชื่อไม่กำกวม สัญญาณที่ไม่ใช่สียังอ่านได้ในภาพที่วาง และคำอธิบายตรงกัน หากต้นฉบับเวกเตอร์ที่ขาดขวางผังแยก [คืนรูปทรงด้วย PerfectVector](https://perfectvector.com/th/scientific-diagram-to-svg) แล้วตรวจเอกลักษณ์ซ้ำบนผลส่งออก

## คำถามที่พบบ่อย

**พาเลตเหมาะกับผู้บกพร่องการเห็นสีเพียงพอสำหรับแผนภาพวิทยาศาสตร์หรือไม่?**
พาเลตเหมาะสมช่วย แต่ควรระบุเอกลักษณ์เงื่อนไขด้วยป้ายตรงหรือสัญญาณเหมาะสมอื่น ตรวจภาพครบที่ขนาดต้องการรวมคำอธิบาย

**การตรวจระดับเทาพิสูจน์ว่าภาพเข้าถึงได้หรือไม่?**
ไม่ ตรวจเรนเดอร์หนึ่งแบบโดยไม่มีสี ไม่ครอบคลุมความต่างการเห็นสีทุกแบบ สายตาเลือนราง การเข้าถึงด้วยโปรแกรมอ่านหน้าจอ หรือข้อกำหนดวารสารเฉพาะ

**ควรเปลี่ยนสัญลักษณ์วิทยาศาสตร์ทั้งหมดเป็นวงกลมกับสามเหลี่ยมหรือไม่?**
ไม่ ตัวอย่างใช้คำแทนทั่วไป เก็บสัญลักษณ์และสไตล์เส้นที่มีความหมายวิทยาศาสตร์อยู่แล้ว และเพิ่มป้ายหรือสัญญาณอื่นที่เข้ากัน

## แหล่งข้อมูล

1. [W3C — เข้าใจการใช้สี](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) — อธิบายทางเลือกที่มองเห็นแทนสีและขอบเขตเกณฑ์การเข้าถึงนี้
2. [Nature — เตรียมภาพ: ข้อกำหนดของเรา](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/) — ให้คำแนะนำพาเลต ข้อความคำอธิบาย และความรกที่อ้างสำหรับภาพ Nature
3. [W3C — เส้นประ SVG](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing) — นิยามรูปแบบขีดกับช่องที่ใช้ในตัวอย่างต้นฉบับครบ
4. [Nature — ความถูกต้องภาพและมาตรฐาน](https://www.nature.com/nature/editorial-policies/image-integrity) — กำหนดขอบเขตข้อมูลต้นฉบับและการประมวลผลเบื้องหลังคำแนะนำภาพวิทยาศาสตร์

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/scientific-figure-color-redundancy)
- [ทำโลโก้สีเดียวโดยรักษารายละเอียดของแบบ](https://perfectvector.com/th/blog/one-color-logo-negative-space.md)
- [ไอคอน SVG ใน Shopify: เตรียมสัญลักษณ์แบรนด์สะอาด](https://perfectvector.com/th/blog/shopify-custom-svg-icon.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)