วงล้อสี

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

โดยทั่วไปแล้ว วงล้อสีมาตรฐานจะประกอบด้วย 12 สี ได้แก่ สีพื้นฐาน 3 สี (สีแดง สีเหลือง สีน้ำเงิน ซึ่งเรียกว่าแม่สี) สีขั้นที่สอง 3 สี (สีส้ม สีเขียว สีม่วง) และสีขั้นที่สาม 6 สี (สีแดงส้ม สีเหลืองส้ม สีเหลืองเขียว สีน้ำเงินเขียว สีน้ำเงินม่วง สีแดงม่วง)

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

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

ขั้นตอนที่ 1: เลือกสีพื้นฐาน

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

ขั้นตอนที่ 2: เลือกโครงสี

เลือกโครงสี แต่ละโครงสีจะส่งผลกระทบทางสายตาในรูปแบบที่แตกต่างกัน:

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

ขั้นตอนที่ 3: นำไปใช้กับการออกแบบของคุณ

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

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

แม่สี (RYB) คืออะไร

แม่สีในโมเดลสี RYB ได้แก่ สีแดง สีเหลือง และสีน้ำเงิน ทั้งสามสีนี้เป็นพื้นฐานของวงล้อสี และสามารถผสมกันในสัดส่วนต่างๆ เพื่อสร้างสีอื่นๆ ได้ทุกสี

สีขั้นที่ 2 คืออะไร

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

สีขั้นที่ 3 คืออะไร

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

โครงสีทั้งเจ็ดแบบมีอะไรบ้าง

โครงสีคือการเลือกใช้สีอย่างมีกลยุทธ์เพื่อช่วยสร้างความสมดุลทางสายตา โครงเหล่านี้ใช้หลักการทฤษฎีสีเพื่อสร้างสรรค์ดีไซน์ที่สวยงาม มีโครงสีที่ใช้กันทั่วไปอยู่เจ็ดแบบด้วยกัน ได้แก่

สีคู่ตรงข้าม

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

สีคู่ตรงข้ามสำหรับ #693EFE

สามสีคู่ตรงข้ามข้างเคียง

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

สามสีคู่ตรงข้ามข้างเคียงสำหรับ #693EFE

สีเอกรงค์

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

สีเอกรงค์สำหรับ #693EFE

สีข้างเคียง

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

สีข้างเคียงสำหรับ #693EFE

สีสามเส้า

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

สีสามเส้าสำหรับ #693EFE

สีสี่ขั้ว (สีคู่ตรงข้ามที่ใกล้เคียงกัน)

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

สีสี่ขั้วสำหรับ #693EFE

สี่เหลี่ยม

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

สีโทนร้อนกับสีโทนเย็น

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

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

1. สีแดง, สีเขียว และ สีน้ำเงิน (RGB)
2. สีฟ้า, สีม่วงแดง, สีเหลือง และสีหลัก (CMYK)
3. ค่าสี ความอิ่มตัวของสี และความสว่าง (HSL)
4. โค้ดเลขฐานสิบหก

สีแดง, สีเขียว, สีน้ำเงิน (RGB)

โมเดลสีแดง สีเขียว สีน้ำเงิน (RGB) เป็นพื้นฐานสำหรับการออกแบบใดๆ ที่แสดงบนหน้าจอ รากฐานของโมเดลสีนี้มีพื้นฐานมาจากการรับรู้สีของมนุษย์และวิธีที่ดวงตาของเรามีปฏิสัมพันธ์กับแสง สีแบบ 'เพิ่มค่า' เหล่านี้สามารถนำมาผสมรวมกับสีต่างๆ ที่เราพบเห็นบนหน้าจอในชีวิตประจำวันได้

สีฟ้า สีม่วงแดง สีเหลือง และสีหลัก (CMYK)

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

• สีฟ้าเขียว (C):สีฟ้าเขียว คือสีเขียวน้ำเงิน เมื่อนำหมึกสีฟ้ามาทาลงบนพื้นผิว มันจะดูดซับแสงสีแดง ทำให้ปรากฏเป็นสีฟ้าอมเขียวต่อสายตาของมนุษย์
• สีมาเจนตา (M):สีมาเจนตา คือสีม่วงแดง สีนี้ดูดซับแสงสีเขียว ทำให้มองเห็นเป็นสีแดงอมม่วง
• สีเหลือง (Y):สีเหลือง ดูดซับแสงสีฟ้า ทำให้ได้สีเหลืองเมื่อพิมพ์ออกมา
• คีย์ (K) หรือสีดำ: ตัวอักษร “K” ใน CMYK หมายถึง "คีย์" ซึ่งหมายถึงส่วนประกอบ สีดำ หมึกสีดำใช้เพื่อเพิ่มความลึกและความคมชัดของภาพและข้อความ นอกจากนี้ การใช้หมึกสีดำยังช่วยป้องกันไม่ให้สีต่างๆ ผสมกันจนดูขุ่นมัว ซึ่งอาจเกิดขึ้นเมื่อพยายามสร้างสีดำโดยการผสมสีต่างๆ

ค่าสี ความเข้มข้น และความสว่าง

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

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

เฉดสีและโทนสีสำหรับ #693EFE

เฉดสี

ทินต์สี

โค้ดเลขฐานสิบหก

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

แต่ละพิกเซลบนหน้าจอของคุณประกอบด้วยองค์ประกอบสีสามสีที่สร้างแสงสีแดง สีเขียว และสีน้ำเงิน องค์ประกอบสีเหล่านี้ (เรียกว่าพิกเซลย่อย) มีขนาดเล็กมากจนดวงตาของมนุษย์มองเห็นเป็นสีเดียว

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

แต่ละพิกเซลสามารถผสมค่าสีแดง 256 ค่า สีเขียว 256 ค่า และสีน้ำเงิน 256 ค่า เพื่อสร้างสีได้ถึง 16 ล้านสี (คูณ 256 x 256 x 256 จะได้มากกว่า 16 ล้าน) คอมพิวเตอร์จะส่งค่าเหล่านี้ไปยังแต่ละพิกเซลโดยใช้โค้ดไบนารี ซึ่งเป็นภาษาที่ประกอบด้วยเลข 1 และ 0 ตัวอย่างเช่น ค่าสีแดง 200 จะถูกแทนด้วย 11001000 ในรหัสไบนารี เนื่องจากมนุษย์ไม่เข้าใจเลขฐานสอง จึงมีการนำระบบเลขฐานสิบหกมาใช้เป็นทางเลือกที่อ่านง่ายกว่า

โค้ดรหัสสีทำงานอย่างไร

โค้ดรหัสสีมีค่าอยู่สามค่า ได้แก่—สีแดง สีเขียว และสีน้ำเงิน โดยแต่ละค่าแทนด้วยตัวเลขสองหลัก ตัวอย่างเช่น, #F234A2 ประกอบไปด้วย:

• สีแดง: F2
• สีเขียว: 34
• สีน้ำเงิน: A2

ตัวอักษรเหล่านี้มีความหมายอย่างไร ระบบเลขฐานสิบหกใช้ฐาน 16 ซึ่งต่างจากระบบเลขฐาน 10 ที่เราใช้กันโดยทั่วไป โดยเริ่มจาก 0 ถึง 9 แล้วใช้ตัวอักษร A ถึง F เพื่อแทนตัวเลขตัวเลขตั้งแต่ 10 ถึง 15

วิธีแปลงระหว่างโค้ดรหัสสีและ RGB

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

• นำตัวเลข (หรือตัวอักษร) ตัวแรกมาคูณด้วย 16
• เพิ่มตัวเลข (หรือตัวอักษร) ที่สอง

สำหรับ #E234A2 ค่าแรกคือ E2 แทนตัวเลข 226 ( 14 * 16 + 2 ) ตัวเลขนี้คือค่า RGB สำหรับสีแดง และ #E234A2 มีค่า RGB ต่อไปนี้:

• สีแดง: 226
• สีเขียว: 49
• สีน้ำเงิน: 152

(คุณสามารถแปลงโค้ดรหัสสี หรือค่า RGB เป็นค่า HSL ได้ แต่การคำนวณจะซับซ้อนขึ้นเล็กน้อย!)

โปรไฟล์สีในการออกแบบดิจิทัล: sRGB และ P3

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

โปรไฟล์สีในการออกแบบดิจิทัล เช่น sRGB และ P3 ช่วยให้มั่นใจได้ว่าการแสดงผลสีมีความสม่ำเสมอกันในอุปกรณ์ต่างๆ sRGB ได้เป็นมาตรฐานเว็บมานานหลายทศวรรษสำหรับผู้สร้างเนื้อหาและนักออกแบบเว็บไซต์ ช่วยให้มั่นใจได้ถึงความสม่ำเสมอทางด้านภาพบนอุปกรณ์ส่วนใหญ่ของผู้บริโภค จอแสดงผล P3, ซึ่งมักเรียกย่อๆ ว่า P3, สามารถแสดงสีได้หลากหลายเฉดสีพร้อมความสดใสที่สูงขึ้น โดยสามารถจำแนกแยกแยะสีได้มากกว่า sRGB ถึง 49% อย่างไรก็ตาม การใช้ P3 บนอุปกรณ์ต่างๆ อย่าง สมาร์ทโฟนหรือแล็ปท็อปที่ออกแบบมาสำหรับ sRGB อาจทำให้เกิดการใช้งานพลังงานมากจนเกินไป เนื่องจากอุปกรณ์ต้องทำงานหนักขึ้นเพื่อแสดงผลช่วงสีที่กว้างขึ้น หากคุณกำลังออกแบบสำหรับแพลตฟอร์มต่างๆ อย่าง iOS หรือหน้าจอความละเอียดสูง/เรตินา จอแสดงผล P3 คือตัวเลือกที่ดีที่สุด แต่ไม่ใช่ทุกแอปพลิเคชันและซอฟต์แวร์ที่จะรองรับช่วงสีที่กว้างกว่านี้ได้อย่างเต็มที่

เรียนรู้วิธีที่ Figma รองรับโปรไฟล์สี P3 ได้ที่นี่

WCAG และตัวช่วยการเข้าถึงสี

ในปี 1999 สมาคมเวิลด์ไวด์เว็บ (W3C) ได้เผยแพร่แนวทางตัวช่วยการเข้าถึงเนื้อหาบนเว็บฉบับแรก (WCAG) เอกสารทางเทคนิคนี้รับรองว่าผู้ใช้ทุกคนสามารถเข้าถึงเนื้อหาบนเว็บไซต์ได้ คำแนะนำของ W3C ซึ่งได้รับการยอมรับว่าเป็นมาตรฐานระดับโลกด้านตัวช่วยการเข้าถึงเว็บไซต์ มีอิทธิพลอย่างมีนัยสำคัญในแวดวงการพัฒนาเว็บไซต์และการออกแบบดิจิทัล องค์กรนี้เผยแพร่ข้อมูลอัปเดตอย่างต่อเนื่องเพื่อสะท้อนถึงความก้าวหน้าทางเทคโนโลยีและความต้องการด้านตัวช่วยการเข้าถึงที่เกิดขึ้นใหม่

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

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับ WCAG 2.1

ตัวช่วยการเข้าถึงสำหรับ #693EFE

การจำลองสีสำหรับ #693EFE

ภาวะตาบอดสีแดง

ภาวะตาบอดสีเขียว

ภาวะตาบอดสีน้ำเงิน-เหลือง

ภาวะตาบอดสีโดยสมบูรณ์