การใช้ความเปรียบต่างสีสูงเพื่อการออกแบบที่เข้าถึงได้ง่ายขึ้น
อัตราตีกลับที่สูงมักเกิดจากความสามารถในการเข้าถึงเว็บไซต์ที่ไม่ดี เมื่อแบบอักษรมีขนาดเล็กเกินไปหรืออ่านได้ยากเมื่อมีสิ่งรบกวนสมาธิมากเกินไปหรือมีช่องว่างไม่เพียงพอคนจำนวนมากเพียง ออกจากไซต์โดยไม่ต้องมีความคิดที่สอง.
หนึ่งในสาเหตุที่พบบ่อยที่สุดสำหรับการละทิ้งในช่วงต้นคือการคัดเลือกที่ไม่ดี โทนสีที่ลดความสามารถในการอ่าน ของเนื้อหา.
จากสถิติขององค์การอนามัยโลกระบุว่ามีผู้คนที่มีความบกพร่องทางสายตาประมาณ 285 ล้านคนทั่วโลกซึ่งส่วนใหญ่เป็นคนตาบอดสีบางส่วนหรือทั้งหมด คนพิการทางสายตาเห็นสีแตกต่างกันดังนั้น หลีกเลี่ยงความคมชัดของสีต่ำ ในการออกแบบของเราหลีกเลี่ยงไม่ได้หากเราต้องการให้เว็บไซต์ของเราเข้าถึงได้ง่ายและใช้งานง่าย.
มาตรฐานเว็บสำหรับความคมชัดของสี
อัตราส่วนความคมชัดของสี วัดความแตกต่างในทางตรงกันข้ามระหว่างสองสี ยิ่งมีค่าสูงเท่าใดการแยกวัตถุ (ข้อความรูปภาพกราฟิก) ได้ง่ายขึ้นในเบื้องหน้าจากพื้นหลัง.
สีสามารถตัดกันได้หลายวิธีเช่นใน สี, ราคา และ ความอิ่มตัว. อัตราส่วนความคมชัดของสีคำนวณโดยสูตรที่จัดทำโดย W3C ซึ่งเป็นองค์กรมาตรฐานสากลหลักสำหรับเวิลด์ไวด์เว็บ.
สามารถใช้ค่าระหว่าง 1: 1 (ไม่มีความคมชัดเลย, พื้นหน้าและพื้นหลังมีสีเดียวกัน) และ 21: 1 (ความคมชัดสูงสุด ที่มีอยู่ระหว่างขาวดำเท่านั้น).
หลักเกณฑ์การเข้าถึงเนื้อหาเว็บล่าสุดของ W3C (WCAG) 2.0 ช่วยให้นักพัฒนาเว็บและผู้สร้างเนื้อหามีเกณฑ์มาตรฐานขั้นต่ำ (ระดับ AA) และค่าขั้นสูง (ระดับ AAA) ของอัตราส่วนความคมชัดของสีที่ยอมรับได้.
ระดับ AA ต้องมีอย่างน้อย อัตราส่วน 4.5: 1 สำหรับข้อความปกติ, และ 3: 1 สำหรับข้อความขนาดใหญ่. มันง่ายกว่ามากในการอ่านข้อความขนาดใหญ่เช่นคำบรรยายนั่นคือสาเหตุที่มันต้องการความคมชัดของสีที่ต่ำกว่า.
ถ้าคุณต้องการที่จะไปถึงระดับ AAA ซึ่งเป็นระดับที่ปรับปรุงแล้วคุณต้องออกแบบชุดสีของคุณด้วยความระมัดระวังมากขึ้น อัตราความคมชัด 7: 1 สำหรับข้อความปกติ, และ 4.5: 1 สำหรับขนาดใหญ่. หากข้อความเป็นส่วนหนึ่งของโลโก้หรือชื่อแบรนด์ไม่มีข้อกำหนดความคมชัดสีขั้นต่ำที่ระดับ WCAG.
เราสามารถเรียกเว็บไซต์ที่เข้าถึงได้ทางสายตาเท่านั้นหาก อัตราส่วนความคมชัดของสีระหว่างวัตถุเบื้องหน้าและพื้นหลังถึงอย่างน้อยระดับ AA.
ประโยชน์ของอัตราส่วนคอนทราสต์สีสูง
คุณจะไม่เพียง แต่ดึงดูดผู้ใช้ที่มีความบกพร่องทางสายตาเท่านั้น ผู้ที่อ่านเนื้อหาของคุณบนหน้าจอขนาดเล็ก เช่นในสมาร์ทโฟนหรือสมาร์ทวอทช์ สภาพแสงไม่ดี, และบน จอภาพคุณภาพต่ำ.
ผู้คนอ่านเร็วขึ้นเมื่อมีความแตกต่างระหว่างข้อความและพื้นหลังสูงกว่าดังนั้นจึงเป็นไปได้ว่าพวกเขาจะใช้เวลามากขึ้นในการเบื่อกับเนื้อหาของเว็บไซต์.
หากคุณกังวลว่าการใช้อัตราส่วนความคมชัดสูงจะส่งผลเสียต่อสุนทรียภาพในการออกแบบของคุณคุณจะต้องตรวจสอบโครงการเว็บ Contrast Rebellion ที่พิสูจน์ด้วยตัวอย่างจากชีวิตจริงที่ยังคงยึดกฎอัตราความคมชัดสูง ในการออกแบบที่น่าสนใจและเท่ห์.
แอพสำหรับตรวจสอบความคมชัดของสี
มีเครื่องมือฟรีที่ยอดเยี่ยมมากมายทั่วทั้งเว็บที่สามารถช่วยนักออกแบบตรวจสอบอัตราส่วนคอนทราสต์สีของเว็บไซต์ของพวกเขา.
วิธีที่ง่ายที่สุดในการทดสอบการออกแบบของคุณสำหรับความคมชัดของสีคือการเลือกสีหลักด้วย Photoshop หรือส่วนขยายเบราว์เซอร์ที่เหมาะสมเช่นนี้สำหรับ Firefox และคัดลอกค่าลงในหนึ่งในแอปด้านล่าง.
สิ่งที่สำคัญที่สุดที่ต้องจำคือคุณต้อง เปรียบเทียบสีพื้นหน้าเช่นสีข้อความกับพื้นที่โดยรอบ (สีพื้นหลัง).
1. ตัวตรวจสอบความคมชัดของสี WebAim
WebAim (Web Accessibility In Mind) เป็นองค์กรที่ส่งเสริมการเข้าถึงเว็บที่ให้นักพัฒนาใช้เครื่องมือตรวจสอบความเปรียบต่างสีที่เรียบง่าย แต่น่าเชื่อถือในเครื่องมือช่วยการเข้าถึงที่ยอดเยี่ยมอื่น ๆ เช่น Wave ซึ่งเป็นแอปประเมินผลการเข้าถึงทั่วไป ประเมินปัญหาการเข้าถึงเว็บไซต์ของคุณอย่างรวดเร็ว.
เครื่องมือตรวจสอบความคมชัดสีของ WebAim จะบอกคุณ ถ้าสีของคุณผ่านการทดสอบ WCAG AA และ AAA, ทั้งสำหรับข้อความปกติและขนาดใหญ่.
2. Snook Color Contrast Check
Jonathan Snook ซึ่งปัจจุบันทำงานเป็นผู้พัฒนาส่วนหน้าของ Shopify ได้จัดทำเครื่องมือตรวจสอบความเปรียบต่างของสีที่มีประโยชน์มานานกว่าทศวรรษ แอพของ Snook อนุญาตให้คุณ เปลี่ยนค่า HSL และ RGB ของพื้นหน้าและสีพื้นหลังทีละหนึ่งโดยใช้ แถบเลื่อนที่สะดวก จนกว่าคุณจะได้ผลลัพธ์ที่ตรงตามมาตรฐาน WCAG 2.0.
CheckMyColours
CheckMyColours ที่สร้างขึ้นโดย Giovanni Scala ช่วยให้คุณตรวจสอบอัตราส่วนความคมชัดของสีของการผสมสีพื้นหน้ากับพื้นหลังทั้งหมด บนเว็บไซต์สด.
มันคำนวณ อัตราส่วนความคมชัดความสว่าง, ความแตกต่างของความสว่าง, และ แตกต่างของสี, และจัดทำรายงานฉบับเต็มเกี่ยวกับผลลัพธ์ รายงาน CheckMyColours ช่วยให้คุณเข้าใจได้ดีขึ้นว่าคุณจะสามารถปรับปรุงการเข้าถึงเว็บไซต์ของคุณได้อย่างไร.
ผู้ออกแบบชุดสี
Color Scheme Designer ไม่ได้เป็นเครื่องตรวจสอบความคมชัดของสีโดยเฉพาะ แต่เป็นเครื่องมือสำหรับ การออกแบบชุดสีสมบูรณ์.
เรารวมไว้ในคอลเล็กชันนี้เนื่องจากมีคุณสมบัติที่ช่วยให้คุณเห็นว่าผู้คนที่มีความบกพร่องทางสายตาในรูปแบบสีของคุณรับรู้รูปแบบสีของคุณอย่างไร คุณสามารถทดสอบสีของคุณสำหรับการตาบอดสี, protanopy, deuteranopy และความบกพร่องทางสายตาอื่น ๆ อีกมากมาย แอพมีเวอร์ชั่นใหม่กว่าที่เรียกว่า Paletton ที่ทำให้การมองเห็นมีความซับซ้อนยิ่งขึ้น (คุณสามารถทดสอบสิ่งต่าง ๆ เช่นจอแสดงผล LED lousy หรือจอ CRT ที่อ่อนแอ).
W3C ยังมีรายการเครื่องมือประเมินความสามารถในการเข้าถึงเว็บไซต์ขนาดใหญ่ซึ่งคุณสามารถค้นหาเครื่องมือตัดกันสีอื่น ๆ เช่นวงล้อสีสำหรับการเข้าถึงที่มีประโยชน์นี้.
เคล็ดลับสำหรับการสร้างเว็บไซต์ที่เข้าถึงได้
หากคุณต้องการสร้างเว็บไซต์ที่เข้าถึงได้ด้วยสายตาคุณควรทำเช่นนั้นเสมอ หลีกเลี่ยงการใช้สีเพียงอย่างเดียวเพื่อถ่ายทอดฟังก์ชั่นหรือความหมาย. ไอคอนที่เปลี่ยนสีตามสถานะปัจจุบันเป็นตัวอย่างทั่วไปสำหรับสิ่งนี้.
ถ้าเป็นไปได้เสมอ ออกแบบตัวชี้นำภาพเพิ่มเติม ที่ช่วยให้ผู้ที่เห็นสีแตกต่างกันในการทำความเข้าใจการทำงาน.
อย่าลืม ให้ความสนใจเป็นพิเศษกับความคมชัดของสีของปุ่มลิงค์และเมนู, เนื่องจากเป็นเครื่องมือนำทางในเว็บไซต์ของคุณ หากผู้ใช้ไม่สามารถนำทางได้อย่างง่ายดายบนเว็บไซต์ของคุณคุณจะสูญเสียพวกเขาอย่างรวดเร็ว. สีที่สามารถเข้าถึงได้สำหรับปุ่มกระตุ้นการตัดสินใจ ยัง สำคัญมากสำหรับอัตราการแปลงที่ดี.
เป็นวิธีการทำงานที่ดีในการทดสอบอัตราส่วนคอนทราสต์สีเร็วที่สุดเท่าที่จะเป็นไปได้ในกระบวนการออกแบบเนื่องจากเป็นการยากที่จะโน้มน้าวลูกค้าของคุณให้เปลี่ยนโทนสีของไซต์ในภายหลังตามกระบวนการออกแบบ.
ตอนนี้อ่าน: แนวทางปฏิบัติในการเลือกโครงร่างสีของเว็บไซต์
