ใช้สีพื้นหลังและสีพื้นหลังที่ตรงกันในการออกแบบเว็บ

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

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

ความคมชัดต่ำเทียบเท่าประสบการณ์การอ่านที่แย่

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

เกี่ยวกับ Contrast

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

การเลือกสี

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

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

เครื่องมือออนไลน์

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

CheckMyColors.com จะทดสอบสีทั้งหมดของเว็บไซต์ของคุณและรายงานเกี่ยวกับอัตราส่วนความคมชัดระหว่างองค์ประกอบบนหน้าเว็บ

นอกจากนี้เมื่อพิจารณาเกี่ยวกับตัวเลือกสีคุณควรพิจารณาการเข้าถึงเว็บไซต์และผู้ที่มีรูปแบบของการตาบอดสี WebAIM.org สามารถช่วยเรื่องนี้ได้เช่นเดียวกับ ContrastChecker.com ซึ่งจะทดสอบตัวเลือกของคุณกับแนวทาง WCAG