บทความ
ดึงชุดสีที่เข้าถึงได้จากภาพ
ภาพถ่ายหรือ brand asset มักมีเมล็ดพันธุ์ของระบบสีที่สมบูรณ์ การดึงเมล็ดพันธุ์นั้น การขึ้นรูปเป็นชุดสีที่ใช้งานได้ และการตรวจสอบกับมาตรฐานการเข้าถึงต้องใช้สามขั้นตอนที่แตกต่างกัน บทความนี้ครอบคลุมแต่ละขั้นตอนตามลำดับ: วิธีการดึงชุดสีทำงานภายใต้ประทุน วิธีเลือกและปรับสีสำหรับการใช้งานจริง วิธีตรวจสอบคอนทราสต์กับเกณฑ์ WCAG และวิธีตรวจสอบคู่ที่ดูเหมือนกันสำหรับผู้ใช้ที่มีภาวะตาบอดสี
วิธีดึงชุดสี: การสุ่มตัวอย่างพิกเซลและการหาปริมาณสี
ภาพดิจิทัลทุกภาพเป็นตารางพิกเซล แต่ละพิกเซลมีค่าสีในพื้นที่เช่น RGB เครื่องมือดึงชุดสีไม่ตรวจสอบทุกพิกเซลแยกกัน: ภาพถ่าย 2 เมกะพิกเซลมี 2 ล้านจุดข้อมูล ซึ่งจะประมวลผลช้าและจะคืนค่าเฉดสีที่ต่างกันนับพันแทนที่จะเป็นชุดที่ใช้ได้ แทนที่เครื่องมือจะสุ่มตัวอย่างตารางพิกเซลในช่วงสม่ำเสมอ รวบรวม subset ที่เป็นตัวแทน จากนั้น subset นั้นถูกป้อนเข้าอัลกอริทึมการหาปริมาณสี วิธีที่พบบ่อยที่สุดจะจัดกลุ่มสีที่คล้ายกันโดยใช้วิธีการ clustering บางครั้งเรียกว่า median-cut หรือการแบ่งแบบ k-means อัลกอริทึมวางพิกเซลตัวอย่างแต่ละพิกเซลลงในหนึ่งใน bucket จำนวนคงที่ตามความคล้ายคลึงของสี จากนั้นคำนวณสีเฉลี่ยของแต่ละ bucket ผลลัพธ์คือรายการเล็กๆ มักจะ 4 ถึง 16 สี ที่รวมกันคิดเป็นเฉดสีหลักในภาพ สีที่ปรากฏเฉพาะในพื้นที่เล็กที่แยกจากกันอาจถูกพลาด ซึ่งเป็นพฤติกรรมที่คาดหวังไม่ใช่ข้อบกพร่อง
จากสีหลักดิบสู่ชุดสีที่ใช้งานได้
ผลลัพธ์ดิบของเครื่องมือดึงชุดสีคือรายการสีที่จัดอันดับตามความถี่ แต่ความถี่เพียงอย่างเดียวไม่ทำให้เป็นชุดสี ภาพถ่ายป่าจะคืนค่าสีเขียวหลายเฉดที่คล้ายกันเกินไปที่จะใช้ใน UI เป็นเน้นสีที่แตกต่าง งานจริงคือการเลือกและปรับ เริ่มโดยระบุสีหนึ่งสีเป็นสีหลัก: สีที่โดดเด่นที่สุดและเป็นกลางน้อยที่สุด จากสีที่เหลือ มองหาไม่เกินสองสีที่ตัดกับสีหลักและกันและกัน นั่นคือสีเน้น สิ่งอื่นทั้งหมด รวมถึงเฉดที่อิ่มตัวน้อยที่เครื่องมือดึงมักคืนจากเงาและ mid-tone สามารถเป็นสีกลางสำหรับพื้นหลังและขอบ เมื่อคุณมีโครงสร้างหยาบนี้แล้ว คุณจะต้องปรับค่าแต่ละค่าเกือบแน่นอน เครื่องมือ color-converter ให้คุณตรวจสอบแต่ละสีใน hex, RGB และ HSL HSL มีประโยชน์โดยเฉพาะที่นี่: คุณสามารถคง hue ไว้คงที่และเปลี่ยน lightness หรือ saturation เพื่อสร้างกลุ่มสีที่แน่นกว่าหรือหลวมกว่าโดยไม่ออกจากกลุ่มสีเดียวกัน
การตรวจสอบคอนทราสต์: เกณฑ์ WCAG สำหรับข้อความที่อ่านได้
เมื่อคุณมีสีผู้สมัครสำหรับข้อความและพื้นหลัง คุณต้องตรวจสอบว่าการผสมสีอ่านได้หรือไม่ Web Content Accessibility Guidelines (WCAG) กำหนด contrast ratio สำหรับจุดประสงค์นี้ อัตราส่วนเปรียบเทียบ luminance สัมพัทธ์ของสองสี: ค่า 1:1 หมายความว่าไม่มีคอนทราสต์เลย (สีเดียวกันบนสีเดียวกัน) และ 21:1 คือสูงสุด (ดำบนขาว) WCAG 2.1 Level AA ต้องการอัตราส่วนอย่างน้อย 4.5:1 สำหรับข้อความ body ขนาดปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนา) Level AAA กำหนดเกณฑ์ที่สูงกว่าที่ 7:1 และ 4.5:1 ตามลำดับ คุณไม่จำเป็นต้องคำนวณ luminance ด้วยมือ ข้อมูลเชิงลึกสำคัญคือคู่สีที่ดูดีสำหรับคุณภายใต้แสงที่ดีอาจต่ำกว่า 4.5:1 บนหน้าจอ และแนวทางนั้นมีอยู่สำหรับกรณีนั้นพอดี หลังจากดึงและปรับสีแล้ว ให้ทดสอบทุกคู่ข้อความบนพื้นหลังที่วางแผนจะใช้ สีเทา mid-tone ที่อ่านได้ดีบนขาวอาจล้มเหลวบน beige อ่อนจากชุดสีที่ดึงมา
ตาบอดสี: จำลองลักษณะที่คู่สีดูสำหรับผู้ใช้ที่ได้รับผลกระทบ
ประมาณ 1 ใน 12 ผู้ชายและ 1 ใน 200 ผู้หญิงมีภาวะบกพร่องทางการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง ประเภทที่พบบ่อยที่สุดคือ deuteranopia (ความไวต่อสีเขียวลดลง) ตามด้วย protanopia (ความไวต่อสีแดงลดลง) Tritanopia (ความไวต่อสีน้ำเงิน-เหลืองลดลง) พบน้อยกว่า สำหรับแต่ละประเภท ระบบการมองเห็นจะแมปความยาวคลื่นบางอย่างไปยังสีที่รับรู้เหมือนกันที่ผู้มองปกติเห็นว่าแตกต่าง ปัญหาจริงสำหรับชุดสีคือสองสีที่ดูแตกต่างกันชัดเจนภายใต้การมองเห็นปกติอาจดูเหมือนกันสำหรับผู้ใช้ที่ตาบอดสี ทำให้ไม่มีประโยชน์สำหรับการสื่อความแตกต่าง เช่น การใช้เฉพาะสีแดงและเขียวเพื่อสัญญาณความสำเร็จและข้อผิดพลาด การรันการจำลองตาบอดสีแสดงให้คุณเห็นว่าชุดสีดูเป็นอย่างไรเมื่อช่องสัญญาณที่ได้รับผลกระทบถูกบีบอัด คู่ที่ยุบเป็นสีเทาหรือน้ำตาลที่เกือบเหมือนกันคือคู่ที่ต้องพิจารณาใหม่: เพิ่มความแตกต่างของ lightness ระหว่างพวกเขาเพื่อให้คอนทราสต์ยังคงอยู่แม้ไม่มีความแตกต่างของ hue หรือเพิ่มสัญญาณรอง (รูปร่าง ป้ายกำกับ รูปแบบ) เพื่อให้สีไม่ใช่สัญญาณเดียว
ทำในเครื่อง: color-palette, color-blindness และ color-converter
ทั้งสามขั้นตอนที่อธิบายในบทความนี้สามารถทำให้เสร็จโดยไม่ส่งภาพหรือสี brand ของคุณไปยังเซิร์ฟเวอร์ใด เครื่องมือ color-palette ทำงานทั้งหมดในเบราว์เซอร์: คุณวางภาพ มันสุ่มตัวอย่างพิกเซลในเครื่องและคืนสีหลักเป็นค่า hex ไม่มีไฟล์ถูกส่ง เครื่องมือ color-converter รับรหัส hex และแสดงสีเดียวกันใน RGB และ HSL เพื่อให้คุณปรับ lightness หรือ saturation เป้าหมายในขณะที่อยู่ใน hue family เดียวกัน ทั้ง hex และค่าที่แปลงแล้วมีอยู่เฉพาะในหน้า เครื่องมือ color-blindness ทำงานในทิศทางตรงกันข้าม: คุณวางภาพลงไปแล้วมันจะแสดงผลการจำลอง deuteranopia, protanopia และ tritanopia ของภาพนั้น คำนวณในเบราว์เซอร์ หากต้องการตรวจสอบพาเลตแทนที่จะเป็นภาพถ่าย ให้ export หรือแคปหน้าจอสีตัวอย่างของคุณเป็นภาพก่อน แล้ววางลงในตัวจำลอง การใช้สามเครื่องมือตามลำดับ ดึงจากภาพ ปรับใน color-converter จากนั้น export ภาพสีตัวอย่างและตรวจสอบใน color-blindness ครอบคลุมขั้นตอนทำงานทั้งหมดที่อธิบายข้างต้น ภาพของคุณอยู่บนอุปกรณ์ตลอดเวลา ซึ่งสำคัญหากภาพต้นฉบับมี branding ที่ยังไม่เผยแพร่หรืออัตลักษณ์ที่ยังไม่เปิดเผยของลูกค้า
เครื่องมือที่กล่าวถึงในบทความนี้
- แยกสีจากรูปภาพแยกสีหลักจากรูปภาพเป็น HEX swatches คัดลอกสีใดก็ได้ ไม่มีการอัปโหลด
- จำลองการตาบอดสีจำลอง protanopia, deuteranopia, tritanopia และ achromatopsia บนรูปภาพ ไม่มีการอัปโหลด
- แปลงสีแปลงสีระหว่าง HEX, RGB, HSL, HSV และ CMYK พร้อมตรวจสอบความคมชัด WCAG ไม่มีการอัปโหลด
- สร้างชุดสีสร้างชุดสีแบบคอมพลีเมนทารี แอนาโลกัส ไทรแอดิก เตตระแอดิก และโมโนโครมาติกจากสีพื้นฐาน ไม่มีการอัปโหลด
คำถามที่พบบ่อย
เครื่องมือดึงชุดสีมักคืนค่าสีกี่สี?
เครื่องมือส่วนใหญ่คืนค่าระหว่าง 5 ถึง 16 สีโดยค่าเริ่มต้น แม้ว่าหลายเครื่องมือให้คุณตั้งค่าจำนวน การคืนค่าสีน้อยหมายความว่าอัลกอริทึมต้องจัดกลุ่มพิกเซลมากขึ้น ซึ่งอาจผสานเฉดสีที่แตกต่างแต่คล้ายกัน การคืนค่าสีมากขึ้นอาจสร้างสีที่ใกล้เคียงกันซึ่งยากที่จะใช้แยกกัน สำหรับชุดสี UI โดยทั่วไป 6 ถึง 8 สีเป็นจุดเริ่มต้นที่ใช้ได้จริง
ชุดสีที่ดึงจากภาพผ่าน WCAG contrast อัตโนมัติได้ไหม?
ไม่อัตโนมัติ สีหลักในภาพถ่ายมักเป็น mid-tone ที่มี luminance ปานกลาง ซึ่งมีแนวโน้มสร้างอัตราส่วนในช่วง 2:1 ถึง 3:1 ต่อกันและกัน การบรรลุเกณฑ์ 4.5:1 สำหรับ body text มักต้องทำให้ค่าพื้นหลังสว่างขึ้นหรือค่าข้อความมืดลงเกินกว่าสิ่งที่การดึงดิบให้ การดึงให้จุดเริ่มต้น การตรวจสอบคอนทราสต์บอกคุณว่าต้องปรับมากแค่ไหน
WCAG contrast ratio คำนึงถึงตาบอดสีไหม?
บางส่วน สูตร luminance ของ WCAG ขึ้นอยู่กับความสว่างสัมพัทธ์ ไม่ใช่ hue ดังนั้นคู่คอนทราสต์สูงที่บรรลุ 4.5:1 โดยทั่วไปจะยังคงแยกแยะได้สำหรับผู้ใช้ที่ตาบอดสีเพราะความแตกต่างของ lightness ยังคงอยู่ อย่างไรก็ตาม สองสีที่มี luminance คล้ายกันแต่ hue ต่างกัน เช่น สีแดงและสีเขียวที่ความสว่างเท่ากัน อาจผ่านการตรวจสอบคอนทราสต์บนพื้นฐาน luminance ในขณะที่ยังคงแยกแยะไม่ได้สำหรับผู้ที่มีภาวะ deuteranopia การรันการจำลองตาบอดสีเป็นวิธีที่ถูกต้องในการตรวจสอบความแตกต่างระดับ hue แยกจาก contrast ratio