รวมสุดยอดคู่มือออกแบบเพื่อคนตาบอดสี

Natk

สวัสดีค่าเพื่อน ๆ ชาว Designil ทุกท่าน แอดนัทหายไปนานกับบทความ Accessibility และ Inclusive design วันนี้แอดนัทจะกลับมาเล่าเรื่องราวสนุก ๆ น่าสนใจเกี่ยวกับวิธีการออกแบบเพื่อให้รองรับกับคนทุกเพศทุกวัย การออกแบบที่ดีนั้น ถ้าเราออกแบบให้เข้าถึงได้ มิเพียงแต่จะส่งผลดีกับผู้ที่มีอาการตาบอดสีเท่านั้น แต่ยังจะส่งผลดีต่อผู้สูงอายุ คนสายตาสั้น คนสายตาเอียง และคนอีกหลายประเภทด้วย

มาเรียนรู้ที่มาที่ไปของคนที่มีภาวะตาบอดสี เพื่อที่เราจะได้ออกแบบให้รองรับกับคนทุกแบบกันค่ะ

มาเริ่มกันเลย

📖 บทความนี้มีอะไรบ้าง แสดง

ตาบอดสีคืออะไร ?

ตาบอดสี หรือ ภาวะการมองเห็นสีบกพร่อง (colour vision deficiency (CVD)) ส่งผลกระทบต่อผู้ชายประมาณ 1 ใน 12 คน (8%) และผู้หญิง 1 ใน 200 คนทั่วโลก ในสหราชอาณาจักร (ประเทศอังกฤษ) พบว่ามีคนตาบอดสีประมาณ 3 ล้านคน (สัดส่วนประมาณ 4.5% ของประชากรทั้งหมด) ซึ่งส่วนใหญ่เป็นผู้ชาย

และเพื่อน ๆ ทราบหรือไม่ว่าถ้าเทียบประชากรทั่วโลกแล้วนั้นจะมีผู้คนตาบอดสีประมาณ 300 ล้านคน ซึ่งเกือบจะเท่ากับจำนวนประชากรทั้งหมดในสหรัฐอเมริกาเลยทีเดียว!

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

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

รูปแบบที่พบบ่อยที่สุดของการตาบอดสีเรียกว่า ‘ตาบอดสีสีแดง/เขียว’ (red/green colour blindness) และคนตาบอดสีส่วนใหญ่จะมีอาการแบบนี้ แม้ว่า ‘ตาบอดสีแดง/เขียว’ จะเป็นแบบที่คนประสบพบเจอมากที่สุด แต่ละบุคคลจะมีระดับความรุนแรงของอาการแตกต่างกันออกไปเช่นกัน

การเป็น ‘คนตาบอดสีแดง/เขียว’ ไม่ได้หมายความว่าคนเหล่านี้จะผสมสีแดงกับสีเขียวเท่านั้น แต่หมายความว่าพวกเขาสามารถมองเห็นสีที่มีส่วนผสมของสีแดงหรือสีเขียวเป็นสีเดียวกันนั่นเอง

ดังนั้นคนที่ตาบอดสีแดง/เขียวอาจจะเกิดสับสนเวลาจะแยกแยะระหว่างสีน้ำเงินและสีม่วง เพราะพวกเขาไม่สามารถ ‘มองเห็น’ องค์ประกอบสีแดงของสีม่วงได้ หรืออีกแบบคือไม่สามารถจำแนกสีชมพู สีส้ม และสีแดงออกจากกันได้

เราลองมาดูภาพประกอบด้านล่างนี้เพื่อทำความเข้าใจกันเลย

Designil colour blindness 01 ตาบอดสี
Designil colour blindness

จำลองภาพสำหรับคนตาบอดสีประเภทต่าง ๆ ใช้งานเว็บไซต์ได้ที่นี่ Color blindess simulator


ทำไมเราถึงต้องใส่ใจในการออกแบบ ?

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

เราลองมาดูภาพด้านล่างเหล่านี้ พร้อมกับตอบคำถามไปทีละข้อ ว่าเราจะทำอย่างไรหากเรามีภาวะตาบอดสี

ข้อที่ 1 : เนื้อแบบไหนที่สุกสุดๆแล้ว ?

Designil colour blindness 02 1
ตาบอดสีประเภท Green-Blind/Deuteranopia
Designil colour blindness 02 2
ภาพเนื้อแบบปกติ

ข้อที่ 2 : ขวดการทดลองไหนมีน้ำสีชมพู ?

test tube with colour01 ตาบอดสี
ตาบอดสีประเภท Red-Blind/Protanopia
test tube with colour02
ภาพการทดลองแบบปกติ

ข้อที่ 3 : เรากำลังเล่นเกม Among us ดันไปเจอผู้ก่อการร้าย เราจึงต้องกำจัดเพื่อนคนนี้ออกไป

colorblind amongus 01
ตาบอดสีแบบ Monochromacy/Achromatopsia
among us character
among us character

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

ประสบการณ์ตรงจากพ่อของแอดนัทเองเลย~


วิธีการออกแบบเพื่อคนตาบอดสี

1. ใส่เลขกำกับ, Pattern, icons, คำอธิบาย หากต้องการสื่อสารด้วยสี

เรามาลองดูตัวอย่างการที่เราใช้สีแบบปกติใน Pie chart

pie chart colour
pie chart colour

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

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

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

*หมายเหตุ ถ้าใครมาจากฝั่ง Data ก็อาจจะบอกว่า Pie chart อาจไม่เป็นที่นิยมแล้วในการนำเสนอข้อมูล สามารถอ่าน วิธีเลือก Chart ให้คนดูเข้าใจง่าย ได้จากบทความนี้เลย

pie chart pattern
pie chart pattern

อีกตัวอย่างนึงที่ถือว่าไม่ตอบโจทย์กับคนตาบอดสีในการใช้งาน

Among Us Colorblind Comparison
Among Us Colorblind Comparison – ภาพจาก Reddit

2. เช็คระดับ Contrast

ทำไม Contrast ถึงมีความสำคัญและความจำเป็นสำหรับ Designer ทุกท่าน? เราลองมาดูภาพนี้ประกอบกันเลย

การใช้สีที่ดี ทำให้เราสามารถออกแบบป้ายต่าง ๆ ให้สามารถเห็นได้ชัดเจนในเวลาอันจำกัด เช่น ป้ายบนทางด่วน ป้ายแนะนำให้เปลี่ยนเลนส์บนถนน ป้ายเตือน ป้ายร้านอาหาร ป้ายเมนูสั่งอาหาร และอื่น ๆ

accessibility designil01
accessibility – ภาพการออกแบบที่ไม่ดี และแบบที่ดี

การออกแบบที่ดีนั้นจะต้องมีความคมชัด การตัดกันที่ชัดเจนระหว่างสีของพื้นหลังและสีที่อยู่ด้านหน้า แต่ก็ไม่ใช่แค่ภาพหรือตัวหนังสือ แต่ยังรวมถึง ลิงค์ (Links) ไอค่อน (Icons) และปุ่ม (Button) บนเว็บไซต์และแอพด้วย

ถ้าสิ่งที่ออกแบบมีความสำคัญมาก ผู้ใช้ต้องอ่านในเวลาจำกัด เช่น ป้ายนำทาง, ป้ายเมนูร้านอาหาร, ป้ายหน้าร้าน เราก็ต้องออกแบบให้สิ่งนี้มีความชัดเจนด้วยระดับสีที่มองเห็นได้ง่ายจากระยะไกล

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

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

เราจะเช็ค Contrast เองได้อย่างไร ?

ในปัจจุบันมีวิธีการวัดผลสีของเราที่ใช้งานในการทำเว็บไซต์หรือแอพ มาตรฐานนี้เรียกว่า WCAG 2.0 1.4.3 (AA) คือต้องใช้อัตราส่วนความคมชัดของสี 4.5:1 สำหรับข้อความทั้งหมด

วิธีการเช็คก็ง่าย ๆ เลยค่ะ เพียงแค่ใช้เว็บไซต์ที่แนะนำด้านล่างนี้ในการเช็คก็สามารถตรวจสอบงานของเราแบบเบื้องต้นได้ด้วยตนเองแล้ว

เว็บไซต์ด้านล่างนี้จะเป็นเว็บไซต์ที่เหล่า Designer ทั่วโลกใช้งานกันเป็นประจำ เพื่อเป็นการตรวจสอบงานของตัวเองก่อนนำไปทำแอพ หรือเว็บเพื่อใช้งานจริง

เครื่องมือและวิธีการเช็ค Contrast ของงานออกแบบ

2.1 WebAim

เว็บไซต์เครื่องมือตรวจสอบสี – Color contrast checker เว็บนี้จะเรียกว่า WebAim อ่านว่า “เว็บเอม”

มาดูวิธีการใช้งานกันเถอะ

web aim how to use
how to use WebAIM

2.2 Colorsafe

Screen Shot 2021 10 09 at 12.56.40 pm
Colorsafe – contrast checker

เว็บไซต์ด้านบนนี้จะใช้ตรวจสอบขนาดตัวหนังสือขนาดต่าง ๆ กับพื้นหลัง เพื่อดูว่างานของเราผ่านมาตรฐาน AA หรือ AAA แล้วหรือยัง

นอกจากนี้แล้วเรายังสามารถเช็คเรื่องของ Accessbility ภาพ Banner, Graphic, Overlay ได้ด้วยนะ โดยใช้เว็บไซต์นี้เลย

2.3 Brandwood A11Y

accessibility background image
accessibility background image

วิธีการทดสอบภาพพื้นหลังและตัวหนังสือก็ง่าย ๆ เพียงแค่เราอัพโหลดภาพพื้นหลัง วางตัวหนังสือลงไป เลือกขนาดตัวหนังสือ เลือกสีของตัวหนังสือ แล้วก็ตรวจสอบดูว่าระดับนี้จะผ่าน Accessibility ในขั้น AA หรือไม่ ถ้าผ่านพื้นหลังสีแดงของกล่องด้านบนจะกลายเป็นสีเขียว

จากตัวอย่างเราก็จะเห็นว่าไม่ผ่านแน่ ๆ เพราะไม่สามารถอ่านออกได้เลย

2.4 Spectrum Google Chrome plugin

Google chrome plugin- spectrum
Google chrome plugin- spectrum

ปลั๊กอินนี้จะช่วยจำลองหน้าจอคอมพิวเตอร์ของเราให้กลายเป็นโหมดสำหรับผู้พิการทางสายตาประเภทต่าง ๆ สามารถมองเห็นได้เสมือนจริงเลยค่ะ ทำให้เวลาเราเลือกใช้สี จะได้เลือกได้ถูกต้อง มีระดับ Contrast ที่ชัดเจน สามารถอ่านออกแยกแยะได้

รู้หรือไม่ว่าบริษัท Tech ชั้นนำระดับโลก เช่น Facebook, Google, Amazon จะมีทีม Accessibility ในองค์กร เพื่อทำให้ Product นั้นผ่านมาตรฐานสำหรับคนทุกแบบและเข้าถึงได้


3. ลองเปรียบเทียบสีที่นำมาวางคู่กัน เพื่อดูว่าเราสามารถแยกแยะสีเหล่านี้ได้หรือไม่

เพื่อน ๆ ทราบหรือไม่ว่ากว่าที่ Product ชื่อดังจะเลือกสีมาใช้ใน Design system ได้นั้น จะต้องผ่านการทดสอบเลือกสี หรือทดสอบระดับ Contrast มามากมายขนาดไหน วันนี้อยากเอาตัวอย่างการทำ Colour Palette ของหลาย ๆ แบรนด์มาฝากกันค่ะ

uswds vivid color wheel 2.6.0
uswds vivid color wheel 2.6.0

ตัวอย่างการออกแบบอื่น ๆ

เราจะเห็นได้ว่าก่อนจะออกมาเป็น Product แบบ Global ที่มีสีหลากหลายบนหน้าจอมาให้เราใช้งานกันนั้น จะต้องผ่านการออกแบบสีที่เข้าถึงได้มามากมายนับร้อยขั้นตอน โดยต้องคำนึงถึงเนื้อสีข้างในด้วยที่หากนำมาใช้ร่วมกัน ก็จะไม่ทำให้สับสนสำหรับคนตาบอดสี และสีจะไม่ใกล้เคียงกันจนเกินไป

โดยการออกแบบนั้นไม่ใช่ว่าจะหยิบสีไหนก็ได้บน Color wheel มาใช้งานได้เลย แต่ยังต้องคำถึงถึงผู้อ่านและผู้ใช้งานที่หลากหลาย ทำให้ Product ระดับโลกเหล่านี้สามารถเข้าถึงได้จากคนทุกแบบนั่นเอง

4. หลีกเลี่ยงการใช้สีเฉพาะเหล่านี้วางไว้ข้างๆ กัน

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

  • เขียว & แดง
  • เขียว & น้ำตาล
  • น้ำเงิน & ม่วง
  • เขียว & น้ำเงิน
  • เขียวอ่อน & เหลือง
  • น้ำเงิน & เทา
  • เขียว & เทา
  • เขียว & ดำ

5. เครื่องมือไหนก็ไม่แม่นยำเท่าให้คนตาบอดสีมาทดลองดูงานของเรา

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

แนะนำเพื่อน ๆ ให้ศึกษาเรื่องของ Usability Testing, User Research เพิ่มเติมได้เลย


สำหรับท่านที่ตาบอดสี อยากเล่าประสบการณ์อะไรกับ Designil สามารถคอมเม้นท์ไว้ด้านล่างได้เลยนะคะ ^_^ แอดนัทจะมาเพิ่มเนื้อหาและถ่ายทอดให้กับนักออกแบบมือใหม่ทุกท่าน เพื่อสร้างงานออกแบบที่เข้าถึงได้กับคนทุกเพศทุกวัย แล้วเจอกันใหม่ในบทความหน้านะคะ <3

ขอบคุณข้อมูลจาก

บทความที่เกี่ยวข้อง

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย | ประสบการณ์ทำงาน 11 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด