ในช่วงเวลาที่คนจำนวนมากโศกเศร้า การแสดงออกนั้นมีได้หลากหลาย ผู้ดูแลเว็บไซต์และบัญชีสื่อสังคมจำนวนหนึ่งเลือกที่จะแสดงผลหน้าเว็บทั้งหมดเป็นขาวดำ (จริงๆ คือเทาไล่ระดับ หรือ grayscale แต่ก็เรียกกันติดปากว่า “ขาวดำ” อ่ะนะ) หรือสีโทนหม่นๆ หน่อย (ด้วยการปรับ saturate)

อย่างไรก็ตาม มีข้อควรระวังด้วย เพื่อไม่ให้กระทบกับการใช้งานหรือเกิดความผิดพลาดระหว่างใช้งาน โพสต์นี้ผมรวมเอาข้อแนะนำจากหลายๆ คนที่เจอบนเฟซบุ๊กมารวมเอาไว้ ขอขอบคุณคุณ @Nutn0n, Fufu Dogu, และ Kasiti Panthanom ด้วยครับ

ในช่วงแรกจะพูดถึงข้อควรระวังพื้นฐาน วิธีเฉพาะหน้าเพื่อทำสีโทนขาวดำ จากนั้นจะพูดถึงปัญหา ทางแก้ไขระยะยาว โดยอ้างอิงส่วนหนึ่งจาก Web Content Accessibility Guidelines ของ W3C และ human interface guidelines ของแอปเปิล

ปรับสี ให้คำนึงถึงการใช้งานด้วย

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

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

สำหรับเว็บไซต์ที่

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

ไม่ควรปรับสี “ทั้งเว็บไซต์” ให้เป็นขาวดำ แต่ให้พิจารณาปรับเฉพาะจุด และอาจพิจารณาทางเลือกอื่น เช่น ปรับเฉพาะภาพโลโก้เป็นขาวดำ แสดงแบนเนอร์ด้านบนของทุกหน้า แสดงภาพใหญ่ในหน้าแรกหน้าเดียว หรือทำเป็น landing page แยกออกมาต่างหากก่อนเข้าหน้าเว็บหลัก (ไม่ค่อยอยากแนะนำเท่าไหร่สำหรับ landing page)

วิธีเฉพาะหน้า

ก่อนอื่นขอพูดถึง 2 เทคนิคที่ขณะนี้หลายเว็บไซต์ใช้อยู่ก่อน คือการใช้ CSS filter (ทั้ง grayscale() และ saturate()) กับการใช้ JavaScript แบบ “หว่านแห” ครอบจักรวาล เพื่อเปลี่ยนสี “ทั้งเว็บไซต์”

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

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

แม้เบราว์เซอร์รุ่นใหม่ๆ หน่อยปรับปรุงประสิทธิภาพของ filter grayscale() และ filter saturate() ให้ดีขึ้นมากแล้ว แต่ถ้าใช้ทั้งหน้ากับทุก element ก็อาจจะหน่วงบ้าง

จริงๆ แล้วในเรื่องนี้นั้น CSS filter ก็ยังทำงานได้เร็วกว่า JavaScript แต่สาเหตุที่บางคนเลือกใช้ JavaScript (เช่น grayscale.js) ก็เพราะตัว Internet Explorer ยังรองรับ CSS filter ได้ไม่เต็มที่

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

ตัวอย่าง CSS filter ที่ใช้กันมาก

[*|html|body|Element] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url('grayscale.svg#grayscale');
    filter: gray;
}

คุณ Fufu Dogu สรุปปัญหาที่พบบนเบราว์เซอร์ต่างๆ ไว้ดังนี้

• Chrome – แสดงผลขาวดำได้ มีปัญหาเรื่อง z-index จะคำนวณผิดไปจากเดิม
• Safari – แสดงผลขาวดำได้ อาจมีหน่วงบ้างถ้าเว็บใหญ่
• Firefox – แสดงผลขาวดำได้ มีปัญหาเรื่อง position, z-index, ถ้าใช้ * เว็บหน้าเสียเลย
• IE <= 9 แสดงผลขาวดำได้ มีปัญหาเรื่อง pseudo Element จะไม่ขาวดำ, IE 10-12 ใช้งานไม่ได้, IE 13-14 ใช้งานได้

z-index ในที่นี้คือเลขระบุตำแหน่ง “แกนลึก” หรือระดับชั้นของหน้าเว็บ นึกถึงว่าหน้าเว็บก็เหมือนกระดาษ และเราเอากระดาษมาซ้อนกันได้หลายๆ แผ่น วิธีระบุว่าเรากำลังพูดถึงกระดาษแผ่นไหนอยู่ ก็คือเลข z-index นั่นเอง (เลขยิ่งมากยิ่งอยู่บน, เลข 0 คือแผ่นหลังสุด) การอ้างอิง z-index ผิด จะทำให้อินเทอร์เฟซบางส่วนทำงานผิดพลาดได้ และส่งผลต่อการใช้งาน (เช่นโปรแกรมอาจจะสั่งให้เปลี่ยนการแสดงผลข้อความที่อยู่บนกระดาษแผ่นที่ 3 แต่พอใช้ filter ปุ๊บ โปรแกรมมันหากระดาษแผ่นที่ 3 ไม่เจอแล้ว ก็เลยเปลี่ยนข้อความไม่ได้)

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

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

ปรับสีแบบงานละเอียด

“งานละเอียด” ที่ว่า มี 2 ระดับความละเอียด (ไม่มีหลักอะไร แบ่งเอาเองนี่แหละ)

แบบแรกคือ ใช้ CSS override ทำ stylesheet ขึ้นมาใหม่อีกชุด แล้วแก้ไข CSS เพื่อแสดงผลขาวดำเป็นจุดๆ ไป (ไม่ได้สั่งให้ทำแบบครอบจักรวาลทุกจุด) เช่น แก้เฉพาะตัว img หรือกำหนด class ขึ้นมาเฉพาะอันหนึ่งแล้ว element ไหนต้องการให้เป็นขาวดำก็เพิ่ม class ดังกล่าวเข้าไป จากนั้นก็ไปประกาศใช้หลัง stylesheet หลัก เพื่อให้ค่าต่างๆ ตัว stylesheet ที่ประกาศทีหลังนี้ ไปทับ (override) ค่าเดิมของตัว stylesheet หลัก

แบบสอง ละเอียดขึ้นไปอีก คือออกแบบธีมใหม่เลย โดยให้คำนึงถึงด้วยว่า เมื่อ UI ถูกลดสีลงแล้ว จะส่งผลต่อการใช้งานอย่างไรบ้าง ผู้ใช้จะยังแยกแยะปุ่มต่างๆ ข้อความเตือนต่างๆ ได้เหมือนเดิมหรือไม่ (ซึ่งตรงนี้มันปรับด้วย CSS อย่างเดียวไม่ได้) มี visual element หรือ visual cue อะไรที่จะเสริมการแยกแยะได้อีกบ้าง

ทั้งสองวิธีนี้จะทำให้เรากำหนดแบบเจาะจงได้ ว่าตรงไหนของหน้าเว็บที่จะเป็นขาวดำบ้าง เช่นให้ทั้งหน้าเป็นขาวดำ ยกเว้นตรงส่วนที่เป็นรูปข่าวหรือแผนที่

นอกจากนี้ยังสามารถเลือกคู่สีที่เหมาะสมสำหรับเว็บไซต์ของเราได้ คู่ไหนที่ contrast พอดี ใช้แล้วไม่ปวดตา โดยเฉพาะในส่วนที่เป็นข้อความสำหรับการอ่านควรใส่ใจให้มาก เพราะเป็นจุดที่สายตาของผู้ใช้จะอยู่กับมันมากที่สุด (อักษรสีขาวสว่างบนพื้นเทาแบบที่ Pantip.com ใช้อยู่นี่จะลายตามากสำหรับการอ่านข้อความยาวๆ)

W3C แนะนำไว้ใน Web Content Accessibility Guidelines (WCAG) ว่า contrast ratio ของสีตัวอักษรขนาดเล็กและพื้นหลังควรอยู่ที่อย่างน้อย 4.5:1 และตัวอักษรขนาดใหญ่ (14 pt bold หรือ 18 pt regular ขึ้นไป) ควรมี contrast ratio ที่อย่างน้อย 3:1

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

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

ทั้งหมดนี้ควรคำนึงถึงสาระที่ต้องการจะสื่อหรือประโยชน์ใช้สอย รวมถึงประโยชน์ของสาธารณะ โดยเฉพาะเรื่องที่เกี่ยวกับความปลอดภัยสาธารณะ

แปลงรูปเป็นขาวดำทีละเยอะๆ

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

สำหรับคนใช้ OS X (หรือ macOS .. ฮ่วย) และถนัด Automator (มากับโอเอสอยู่แล้ว) ลองทำ Workflow ตามรูปนี้ (กล่องล่างสุดคือ Apply ColorSync Profile: Gray Tone ถ้าไม่มี ใช้ Apply Quartz Composition Filter: Black and White แทนก็ได้ แต่มันจะออกแนวทำรูปเก่า ไม่ใช่ปรับสีเทาอย่างเดียว)

เรียนรู้ร่วมกันเรื่องการใช้สีกับ UI

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

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

ตัวอย่างคำแนะนำจากแอปเปิลในการใช้สีในอินเทอร์เฟซของ iOS:

Be aware of colorblindness and how different cultures perceive color. People see colors differently. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness. Also consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red is used to communicate danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

ถอดความได้ดังนี้

“ให้คำนึงถึงภาวะตาบอดสีและการที่สีถูกรับรู้ต่างกันในต่างวัฒนธรรม

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

ตัวอย่างเช่น แทนที่จะใช้วงกลมสีแดงและวงกลมสีเขียวเพื่อบ่งบอกถึงสถานะออฟไลน์และออนไลน์ ให้ใช้สี่เหลี่ยมสีแดงและวงกลมสีเขียวแทน

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

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

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

ดูเพิ่มเติมเรื่องนี้ได้ที่ Understanding WCAG 2.0: Contrast และถ้าอยากทดลองว่าคนตาบอดสีเห็นสีอย่างไร มีซอฟต์แวร์จำลองให้ใช้ฟรีทั้งบน Windows และ Mac ชื่อว่า Color Oracle หรือถ้าจะลองกับหน้าเว็บไซต์แบบไม่ต้องลงโปรแกรมอะไรในเครื่อง ไปที่เว็บ Colorblind Web Page Filter

สรุป/ตัดจบ

• พิจารณา ประโยชน์ใช้สอย+ความปลอดภัย ว่าเหมาะสมไหมที่จะปรับสีของทั้งเว็บไซต์ (ด้วยการแทรกโค้ดที่ยังไม่ได้ทดสอบผลกระทบ) หรือจะใช้วิธีอื่นแทน (เช่น ปรับสีเฉพาะโลโก้ หรือขึ้นแบนเนอร์เอา)
• การบังคับปรับสีด้วยโค้ดลัดแบบ “หว่านแห” อาจทำได้หากเป็นการทำเฉพาะหน้าไปก่อน แต่ควรตรวจสอบตามหลังด้วย เพื่อซ่อมปัญหาที่น่าจะเกิดตามมาแน่ (โดยเฉพาะเรื่อง contrast) และหากทำได้ก็ควรเปลี่ยนไปใช้โค้ดที่เฉพาะเจาะจง ปรับสีเฉพาะจุด เลือกปรับสีด้วยมือจะดีกว่า
• การใช้สีให้คำนึงถึงการใช้งาน
  • แผนภูมิ แผนภาพ แผนที่ หรือภาพถ่าย ที่สีมีความสำคัญ ให้พิจารณาคงสีเดิมไว้ หรือปรับลดสีลงให้ยังอยู่ในระดับที่ยังแยกแยะและใช้ประโยชน์จากภาพได้
  • ตัวอักษร ให้มี contrast ที่เหมาะสมเมื่อเทียบกับพื้นหลัง contrast ratio ที่แนะนำคือ 4.5:1 ขึ้นไป (สำหรับตัวอักษรขนาดเล็ก) และ 3:1 ขึ้นไป สำหรับตัวอักษรขนาดใหญ่ (14 pt bold หรือ 18 pt regular ขึ้นไป) – ลองดูตัวอย่างคู่สีโทนขาวดำ ที่คุณ Fufu Dogu ทำมา และดูตัวอย่างคู่สีอื่นๆ เพิ่มเติมที่ Color Contrast for Better Readability
  • ปุ่ม ป้ายแจ้งเตือน UI อื่นๆ ให้ตรวจสอบว่า หลังจากปรับสี ยังสามารถแยกแยะปุ่มที่อยู่ใกล้เคียงกันได้หรือไม่ โดยเฉพาะคำถามที่ให้ผู้ใช้เลือก 2 ทาง หากแยกลำบากให้เพิ่ม visual element เช่นสัญลักษณ์ต่างๆ เข้าไปเป็นตัวช่วย
• ถ้าทำได้ ควรมีโหมดปกติให้ผู้ใช้สลับกลับมาได้ด้วย (เช่นที่เว็บไซต์ Jeban.com ทำ)
• หากมีเวลา ลอง(ขอเวลาจากบอส)ศึกษา Web Content Accessibility Guidelines เพื่อการทำเว็บที่ทุกคนเข้าถึงได้

 

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

 

(“โลกของเราขาวไม่เท่ากัน” เป็นชื่อหนังสือที่ ม.ล.ปริญญากร วรวรรณ และ วรพจน์ พันธุ์พงศ์ เขียนร่วมกัน – สำนักพิมพ์ openbooks)