Skip to main content

วิธีการปรับพื้นหลังและสี Foreground ในการออกแบบเว็บ

Anonim

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

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

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

ความคมชัดบางอย่างไม่แตกต่างกันดี

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

มีกฎและแนวทางปฏิบัติที่ดีที่สุดสำหรับความคมชัด แต่ในฐานะนักออกแบบคุณต้องประเมินกฎเหล่านั้นเสมอเพื่อให้มั่นใจว่าทำงานในบางกรณีของคุณ

มาตรฐานการสร้างแบรนด์และการเลือกสีที่แตกต่างกัน

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

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

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

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

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

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