สีแบรนด์ของคุณมีผลกระทบทางอารมณ์อย่างมาก แต่สีจะปรากฏต่อผู้เยี่ยมชมไซต์ที่มองเห็นบางส่วน ตาบอดสี หรือเผชิญกับปัจจัยด้านสิ่งแวดล้อมที่ทำให้มองเห็นได้ยากได้อย่างไร
ระดับสีและคอนทราสต์มีความสำคัญต่อการสื่อสาร และการได้รับรายละเอียดเหล่านี้อย่างเหมาะสมถือเป็นสิ่งสำคัญสำหรับนักออกแบบที่คำนึงถึงความสามารถในการเข้าถึง
ความผิดปกติของการรับรู้สีเป็นเรื่องปกติมากกว่าที่คุณคิด ดังนั้น ในโพสต์นี้ เราจะพูดถึงวิธีที่ผู้พิการ เช่น ผู้มีสายตาเลือนราง ดิสเล็กเซีย และตาบอดสี มีปฏิสัมพันธ์กับเว็บอย่างไร
สารบัญ
ฉันจะใช้ตัวตรวจสอบสีเพื่อปรับปรุงการเข้าถึงเว็บไซต์ของฉันได้อย่างไร
จริงๆ แล้วส่วนนี้ค่อนข้างเรียบง่ายแม้ว่าจะต้องใช้ความพยายามบ้างก็ตาม คุณจะต้องใช้เครื่องมือตรวจสอบคอนทราสต์ออนไลน์ของ WebAIM WebAIM เป็นองค์กรไม่แสวงผลกำไรที่ตั้งอยู่ที่ Utah State University โดยมีพันธกิจในการเพิ่มการเข้าถึงเว็บทั่วโลก
เพียงป้อนสีพื้นหน้าของคุณ (เช่น สีของข้อความหรือไอคอนของคุณ) และสีพื้นหลังเป็นค่าเลขฐานสิบหก (หรือที่เรียกว่าค่าฐานสิบหก) ตามที่ระบุไว้ใน HTML หรือ CSS และเครื่องมือตรวจสอบอัตราส่วนคอนทราสต์จะแจ้งให้คุณทราบว่าอัตราส่วนเพียงพอหรือไม่ โปรดจำไว้ว่าอัตราส่วนคอนทราสต์ขั้นต่ำที่คุณควรค้นหาคือ 4.5 ต่อ 1 ข้อความสีดำบนพื้นหลังสีขาวมีอัตราส่วนคอนทราสต์ที่ 21 ต่อ 1 ดังนั้นคุณจึงมีทางเลือกอีกมาก
5 เครื่องมือสำหรับสร้างจานสีเว็บที่ใครๆ ก็มองเห็นได้
1. ตัวตรวจสอบคอนทราสต์สี WebAIM
ป้อนสีฐานสิบหกสำหรับพื้นหน้าและพื้นหลัง ผลลัพธ์แสดงการปฏิบัติตามข้อกำหนด AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่ พร้อมด้วยประโยคตัวอย่าง แถบเลื่อนช่วยให้คุณเปลี่ยนสิ่งต่าง ๆ จนกว่าคุณจะพบชุดค่าผสมที่ดี
จุดแข็ง
- เครื่องมือเรียบง่ายพร้อมอินเทอร์เฟซที่ดูสบายตา
- นี่เป็นเครื่องมือที่ดีและเรียบง่ายสำหรับผู้เริ่มต้น ไม่ใช่แค่นักออกแบบเท่านั้น
จุดอ่อน
- ไม่สามารถเปรียบเทียบมากกว่าสองสีได้เพียงสองสีเท่านั้น
- แถบเลื่อนความสว่างไม่ใช่วิธีที่ดีในการเลือกสี เป็นการยากที่จะบอกได้ว่าจอแสดงผลที่เรียบง่ายนี้มีสีสันสวยงามเพียงใด
2. ตัวตรวจสอบความคมชัดสำหรับ WCAG
ป้อนสีฐานสิบหกสำหรับพื้นหน้าและพื้นหลัง แสดงความสอดคล้องกับ AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่ถัดจากตัวอย่างข้อความ Lorem Ipsum คุณยังสามารถอัปโหลดรูปภาพ จานสี 9 สีจะถูกเลือกให้คุณโดยอัตโนมัติ จากนั้น คุณสามารถเปรียบเทียบแต่ละสีเป็นสีพื้นหน้าหรือสีพื้นหลังได้
จุดแข็ง
- เครื่องมือง่ายๆ พร้อมอินเทอร์เฟซที่ใช้งานง่าย
- มีความสามารถในการสร้างจานสีจากรูปภาพ
จุดอ่อน
- จานสีจะถูกเลือกโดยอัตโนมัติ และคุณสามารถเปลี่ยนเพิ่มเติมได้ด้วยตัวเลือกสี แต่การเปลี่ยนแปลงเหล่านั้นจะไม่ถูกบันทึกกลับไปยังจานสี ต้องคัดลอกและวางข้อมูลลงในเอกสารใหม่
3. ลูกบาศก์สี
ป้อนสีของจานสี โดยให้แต่ละสีอยู่ในบรรทัดของตัวเอง ผลลัพธ์จะแสดงตัวอักษรตัวอย่างที่มีอัตราส่วนคอนทราสต์เมื่อเปรียบเทียบกับมาตรฐาน AA สำหรับแบบอักษรขนาดเล็กและขนาดใหญ่ คอลัมน์สามคอลัมน์แสดงความแตกต่างกับพื้นหลังสีขาว พื้นหลังสีดำ และชุดสีของแบรนด์ที่ "อ่านได้ชัดเจนที่สุดจากที่มีอยู่"
จุดแข็ง
- ง่ายต่อการมองเห็น ส่วนติดต่อผู้ใช้ (UI) ได้รับการจัดระเบียบอย่างดี และสถานะผ่าน/ไม่ผ่าน/ขอบนั้นมองเห็นได้ง่าย
จุดอ่อน
- ไม่เป็นไปตามมาตรฐานที่กำหนดโดย AAA
- ไม่ได้ผสมสีทุกรูปแบบที่เป็นไปได้ และในตอนแรกยังไม่ชัดเจนว่าเป็นกรณีนี้
4.) ตารางความคมชัดแปดรูปร่าง
ป้อนสีจานสี นอกจากนี้คุณยังสามารถตั้งชื่อแต่ละสีได้ แอปนี้สร้างตารางที่มีการผสมสีทุกรูปแบบที่เป็นไปได้ กระเบื้องมีสามขนาด มีสัญญาณภาพสำหรับการส่งผ่าน/ล้มเหลว/ขอบของ AA และ AAA และอัตราส่วนคอนทราสต์ที่มีประสิทธิภาพ คอลัมน์และแถวสามารถเคลื่อนย้ายไปมาในแอปได้โดยการลากและวาง ข้อมูลแบบตารางสามารถบันทึก ส่งออก และแบ่งปันได้
จุดแข็ง
- มีคุณสมบัติที่เป็นประโยชน์มากมายที่ช่วยวิเคราะห์พาเล็ตทั้งหมด
จุดอ่อน
- การเรียนรู้ยากกว่าเครื่องมืออื่นๆ ที่ใช้งานง่ายกว่า
- ไม่ใช่วิธีที่ถูกต้องในการเปรียบเทียบเพียงสองสี
- ไม่ดีสำหรับการพิจารณาว่าสีเข้ากันได้อย่างไร
- ดูค่อนข้างล้นหลาม แต่มีข้อมูลมากมายที่แสดงอยู่
5. สีปลอดภัย
พิมพ์สีพื้นหลัง เลือกตระกูล ขนาด และน้ำหนักของแบบอักษร เลือก AA หรือ AAA เป็นมาตรฐาน แสดงสีที่เลือกและรหัสฐานสิบหก รวมถึงตัวอย่างและอัตราส่วนคอนทราสต์ที่มีประสิทธิภาพ ภาพขนาดย่อขนาดใหญ่ที่มีสีพื้นหน้าที่เป็นไปได้และมีคอนทราสต์เพียงพอคือส่วนที่ดีที่สุด คุณสามารถเลือกดูทั้งหมดหรือเฉพาะบางกลุ่มสีได้ (เขียว น้ำเงิน ม่วง ฯลฯ)
จุดแข็ง
- ด้วยอินเทอร์เฟซที่ดูสบายตา ทำให้ง่ายต่อการค้นหาการผสมสีที่ดูดีและใช้งานได้ดี
- นี่เป็นเครื่องมือที่มีประโยชน์หากคุณยังไม่มีชุดสีของแบรนด์หรือหากคุณต้องการเพิ่มชุดสีที่คุณมีอยู่แล้วสำหรับเว็บ
จุดอ่อน
- คุณสามารถเปรียบเทียบสีพื้นหน้าและพื้นหลังได้ในแต่ละครั้งเท่านั้น
- คุณต้องคัดลอกและวางสีลงในเอกสารแยกต่างหากหากต้องการบันทึก
- ออกไปทำของให้ทุกคนกันเถอะ!
เมื่อคุณรู้วิธีใช้เครื่องมือเหล่านี้แล้ว คุณอาจพบว่าคุณต้องการมากกว่าหนึ่งเครื่องมือสำหรับโปรเจ็กต์ บางที Color Cube อาจเป็นวิธีที่ดีที่สุดที่จะแสดงให้ลูกค้าเห็นสิ่งที่คุณได้เรียนรู้เกี่ยวกับการเข้าถึง บางทีคุณอาจใช้เครื่องมือของ WebAIM ตลอดเวลาเพื่อตรวจสอบจุดอย่างรวดเร็ว
สรุป
การใช้เคล็ดลับ หลักเกณฑ์ และเครื่องมือที่เราเพิ่งพูดถึงไป จะทำให้เว็บไซต์ของคุณมีสีและป้ายกำกับที่มีคอนทราสต์สูง วิธีนี้จะทำให้ผู้ที่มีสายตาเลือนราง ดิสเล็กเซีย และตาบอดสีสามารถอ่านเว็บไซต์และเนื้อหาของคุณได้ง่ายขึ้น อย่าแปลกใจถ้าผู้ชมทั่วไปของคุณพบว่าการใช้เว็บไซต์ของคุณง่ายกว่า
