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

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

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

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

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

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

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

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

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

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

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

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

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

<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 นิยามว่าความยาวตามพาธอย่างไร ทั้งป้ายและสามเหลี่ยมไม่พึ่งการเห็นสีส้ม

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

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

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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

1. W3C — เข้าใจการใช้สี — อธิบายทางเลือกที่มองเห็นแทนสีและขอบเขตเกณฑ์การเข้าถึงนี้
2. Nature — เตรียมภาพ: ข้อกำหนดของเรา — ให้คำแนะนำพาเลต ข้อความคำอธิบาย และความรกที่อ้างสำหรับภาพ Nature
3. W3C — เส้นประ SVG — นิยามรูปแบบขีดกับช่องที่ใช้ในตัวอย่างต้นฉบับครบ
4. Nature — ความถูกต้องภาพและมาตรฐาน — กำหนดขอบเขตข้อมูลต้นฉบับและการประมวลผลเบื้องหลังคำแนะนำภาพวิทยาศาสตร์