ตัวตรวจค่าความต่างสี
ทดสอบคู่สีใดก็ได้ตามมาตรฐาน WCAG 2.1 ดูว่าสีของคุณปรากฏอย่างไรต่อผู้ใช้ที่มีภาวะบกพร่องการมองเห็นสี ทันที ฟรี และทำในเบราว์เซอร์ของคุณ
การมองเห็นสีปกติ
คู่สีนี้ปรากฏอย่างไรในผู้ที่มีภาวะบกพร่องการมองเห็นสี
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
ทำความเข้าใจค่าความต่างสีและการเข้าถึง
มาตรฐานค่าความต่างสีตาม WCAG
แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดอัตราส่วนความต่างสีขั้นต่ำ เพื่อให้ข้อความยังอ่านได้สำหรับผู้ที่สายตาเลือนรางหรือตาบอดสี:
- 4.5:1 WCAG AA — ข้อความปกติ (เล็กกว่า 18pt)
- 3.0:1 WCAG AA — ข้อความขนาดใหญ่ (18pt ขึ้นไป หรือ 14pt ตัวหนา)
- 7.0:1 WCAG AAA — ข้อความปกติ (ระดับเข้มงวด)
- 4.5:1 WCAG AAA — ข้อความขนาดใหญ่ (ระดับเข้มงวด)
ทำไมการจำลองภาวะตาบอดสีจึงสำคัญ
ผู้ชายราว 8% และผู้หญิงราว 0.5% มีภาวะบกพร่องการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง แม้คู่สีของคุณจะผ่านอัตราส่วนความต่างสีของ WCAG สำหรับการมองเห็นปกติ ก็อาจไม่เพียงพอสำหรับผู้ที่มีโปรตะโนเปียหรือดิวเทอราโนเปีย ซึ่งเห็นสีแดงและเขียวแตกต่างไปมาก จึงควรทดสอบงานออกแบบด้วยการจำลองภาวะตาบอดสีเสมอ
ความสว่างคือช่องทางที่เหลืออยู่เสมอ
สีมีองค์ประกอบสองอย่างที่นักออกแบบพึ่งพาได้ คือเฉดสีและความสว่าง แต่มีเพียงอย่างเดียวเท่านั้นที่เชื่อถือได้กับ ผู้ชมทั้งหมด
การแยกแยะเฉดสีแปรผันอย่างมาก ผู้ชายราวหนึ่งในสิบสองคนมีภาวะพร่องแดงเขียว และสำหรับเขา ความต่างของเฉดสีที่คุณเห็น ว่าชัดเจนอาจไม่ให้ข้อมูลใดเลย ส่วนการแยกแยะความสว่างนั้นสม่ำเสมอกว่ามาก ผู้ที่มีภาวะพร่องการเห็นสี ผู้ที่มีความ คมชัดลดลง ผู้ที่มองหน้าจอโทรศัพท์ซีดจางกลางแดดจ้า และผู้ที่มีการมองเห็นปกติทุกประการ ล้วนรับรู้ความต่างของความ สว่างที่มากว่าเป็นความต่างที่มาก
ด้วยเหตุนี้อัตราส่วนความต่างชัดจึงเป็นตัวชี้วัดด้านการเข้าถึงที่แบกน้ำหนักไว้ มันวัดความสัมพันธ์ด้านความสว่าง ระหว่างสองสีโดยละเลยเฉดสีอย่างสิ้นเชิง และนั่นคือสิ่งที่ต้องการพอดี เพราะมันบอกว่าเหลืออะไรเมื่อช่องทางของเฉดสี เชื่อถือไม่ได้
อัตราส่วนทอดจาก 1:1 ซึ่งสองสีมีความสว่างสัมพัทธ์เท่ากันและเส้นแบ่งระหว่างกันมองไม่เห็นสำหรับทุกคน ไปจนถึง 21:1 สำหรับสีดำบริสุทธิ์บนสีขาวบริสุทธิ์ การคำนวณถูกนิยามไว้อย่างแม่นยำใน WCAG คือแปลงแต่ละช่องสัญญาณ sRGB เป็นแสงเชิง เส้น ถ่วงน้ำหนักแต่ละช่องตามการมีส่วนต่อความสว่างที่รับรู้ แล้วเปรียบเทียบผลที่สว่างกว่ากับผลที่มืดกว่า
เกณฑ์และที่มาของเกณฑ์
4.5:1 — ข้อความปกติ (WCAG AA) เป็นเส้นฐานสำหรับเนื้อความ ตัวเลขนี้มาจากการสูญเสียความไวต่อความต่างชัดที่ สัมพันธ์กับความคมชัดราว 20/40 ซึ่งพบบ่อยในผู้สูงอายุ แก้ไขได้แต่มักไม่ได้รับการแก้ไข
3:1 — ข้อความขนาดใหญ่ (WCAG AA) ใช้ตั้งแต่ 18 พอยต์ปกติหรือ 14 พอยต์ตัวหนา ตัวอักษรใหญ่มีเส้นหนากว่าจึงยัง อ่านได้ที่ความต่างชัดต่ำกว่า
3:1 — ความต่างชัดขององค์ประกอบที่ไม่ใช่ข้อความ (WCAG AA) ครอบคลุมองค์ประกอบส่วนต่อประสานและกราฟิกที่มีความ หมาย ได้แก่ ขอบช่องกรอก สถานะของสวิตช์ ตัวบ่งชี้โฟกัส ไอคอนที่สื่อข้อมูล และส่วนสำคัญของแผนภูมิ นี่คือเกณฑ์ที่ถูก มองข้ามบ่อยที่สุด และมักเป็นจุดที่ส่วนต่อประสานซึ่งดูสวยงามแต่ความต่างชัดต่ำไม่ผ่านการตรวจสอบ
7:1 และ 4.5:1 — ข้อความปกติและข้อความขนาดใหญ่ (WCAG AAA) เป็นระดับที่เข้มงวดกว่า มุ่งไปที่ความคมชัดราว 20/80 ควรนำมาใช้กับการอ่านยาว ๆ แม้ไม่ได้ถูกบังคับก็ตาม
ความต่างชัดจำเป็นแต่ไม่เพียงพอ
ความผิดพลาดที่พบบ่อยที่สุดในการทำชุดสีที่เข้าถึงได้ คือการถือว่าอัตราส่วนความต่างชัดที่ผ่านแล้วเป็นจุดจบของงาน มีคำถามอิสระสองข้อที่ต้องตอบ
- แต่ละสีอ่านได้บนพื้นหลังของตัวเองหรือไม่ นี่คือความต่างชัด และเครื่องตรวจนี้ตอบให้
- สีที่มีความหมายต่างกันแยกออกจากกันได้หรือไม่ นี่คือการแยกเฉดสี ซึ่งอัตราส่วนความต่างชัดไม่ได้บอกอะไรเลย
แผนภูมิที่มีชุดข้อมูลสีแดงและสีเขียวอาจผ่านความต่างชัดอย่างสบาย เพราะทั้งคู่เข้มบนพื้นขาว แต่ก็อาจอ่านไม่ได้เลย สำหรับผู้มีภาวะดิวแทนอะโนเปีย เพราะชุดข้อมูลทั้งสองแยกจากกันเองไม่ออก ให้นำชุดสีเช่นนี้ผ่าน เครื่องจำลองการเห็นสี ด้วย
และเมื่อใดที่สีแบกความหมาย ให้เพิ่มสัญญาณที่สองเสมอ เกณฑ์การใช้สีของ WCAG กำหนดไว้เช่นนั้น และ เทคนิค G111 อธิบายวิธีมาตรฐาน คือจับคู่สีกับลวดลาย รูปทรง ตำแหน่ง หรือป้ายกำกับที่ชัดเจน ในทางปฏิบัติหมายถึงการติดป้ายชุดข้อมูลบนแผนภูมิโดยตรงแทนคำอธิบายด้วยสี วางไอคอนไว้ข้างข้อความแจ้งข้อผิดพลาดสีแดง ขีดเส้นใต้ลิงก์ในเนื้อความ และแยกสถานะสำเร็จกับล้มเหลวด้วยรูปทรงด้วย
การใช้งานเครื่องตรวจ
ใส่สีพื้นหน้าและสีพื้นหลัง แล้วเครื่องมือจะรายงานอัตราส่วนและเกณฑ์ที่ผ่าน นิสัยบางอย่างช่วยให้ใช้ประโยชน์ได้มากขึ้น
- ทดสอบคู่สีจริง ชั้นซ้อนกึ่งโปร่งใส การไล่สี และภาพพื้นหลัง ทำให้พื้นหลังที่มีผลจริงไม่ใช่สีในไฟล์สไตล์ของคุณ ให้เก็บตัวอย่างจากสิ่งที่ถูกวาดออกมาจริง
- ทดสอบทั้งสองธีม ความสว่างไม่ได้กลับด้านอย่างเรียบร้อย ชุดสีมืดต้องมีรอบตรวจของตัวเอง
- ในการไล่สี ให้ทดสอบกรณีที่แย่ที่สุด ไม่ใช่ค่าเฉลี่ย
- รวมสถานะปิดใช้งานและข้อความตัวอย่างด้วย เพราะยังมีคนอ่านอยู่
- ตรวจตัวบ่งชี้โฟกัสบนทุกพื้นผิวที่มันปรากฏ วงโฟกัสที่ผ่าน 3:1 บนพื้นขาวอาจหายไปบนการ์ด
สำหรับภาพรวมที่กว้างขึ้น การออกแบบสำหรับผู้ที่ตาบอดสี กล่าวถึงการสร้างชุดสี และ การทำแผนภูมิให้เข้าถึงได้ เจาะจงเรื่องการนำเสนอข้อมูล เชิงภาพ
มีคำถามไหม?
คำถามที่พบบ่อย
ทุกสิ่งที่ควรรู้เกี่ยวกับแบบทดสอบตาบอดสี วิธีการทำงาน และสิ่งที่ควรทำกับผลลัพธ์ของคุณ
4.5:1 และ 3:1 หมายความว่าอย่างไรจริง ๆ
เป็นอัตราส่วนความต่างชัดเชิงความสว่างระหว่างสีพื้นหน้ากับสีพื้นหลัง บนมาตราตั้งแต่ 1:1 ซึ่งคือเหมือนกันทุกประการ ไปจนถึง 21:1 ซึ่งคือดำบนขาว WCAG 2.2 กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติ และอนุญาต 3:1 สำหรับข้อความขนาดใหญ่ตั้งแต่ 18 พอยต์หรือ 14 พอยต์ตัวหนา เพราะตัวอักษรใหญ่มีเส้นหนากว่าจึงทนความต่างชัดที่ต่ำกว่าได้ องค์ประกอบที่ไม่ใช่ข้อความแต่แบกความหมาย เช่น ไอคอน ขอบช่องกรอก และตัวบ่งชี้โฟกัส ก็ต้องการ 3:1 เช่นกัน
ทำไมความต่างชัดจึงสำคัญเป็นพิเศษสำหรับตาบอดสี
เพราะความต่างชัดเชิงความสว่างคือช่องทางที่ยังอยู่รอดเมื่อการแยกแยะเฉดสีใช้การไม่ได้ หากสององค์ประกอบต่างกันเพียงเฉดสีและแทบไม่ต่างกันด้านความสว่าง ผู้ที่บีบอัดความต่างของเฉดสีนั้นก็จะไม่เหลืออะไรเลย ความต่างชัดเชิงความสว่างที่เพียงพอทำให้การแยกแยะยังมองเห็นได้ ไม่ว่าสีจะถูกประมวลผลอย่างไร นี่คือคุณสมบัติด้านการเข้าถึงที่ทนทานที่สุดที่คุณให้แก่คู่สีได้
สีของฉันผ่าน 4.5:1 แล้ว แต่งานออกแบบยังล้มเหลว เป็นไปได้อย่างไร
การผ่านความต่างชัดเทียบกับพื้นหลังเป็นสิ่งจำเป็นแต่ไม่เพียงพอ เส้นสีแดงกับเส้นสีเขียวในแผนภูมิอาจมีความต่างชัดเทียบกับสีขาวได้ดีเยี่ยมทั้งคู่ แต่ยังแยกจากกันไม่ออก ความต่างชัดวัดจากพื้นหน้าไปยังพื้นหลัง ส่วนความสามารถในการแยกแยะเป็นเรื่องของพื้นหน้าเทียบกับพื้นหน้า ให้ตรวจทั้งสองอย่าง และให้ทุกการแยกแยะที่ใช้รหัสสีมีสัญญาณที่ไม่ใช่สี
อัตราส่วนเปลี่ยนไปในโหมดมืดหรือไม่
สูตรไม่เปลี่ยน แต่ผลของคุณเปลี่ยน ความต่างชัดคำนวณจากความสว่างสัมพัทธ์ การกลับชุดสีจึงให้อัตราส่วนที่ต่างออกไป ไม่ใช่สะท้อนกลับ คู่สีที่ผ่านบนพื้นขาวอาจไม่ผ่านบนพื้นเกือบดำ โดยเฉพาะสีน้ำเงินและม่วงอิ่มตัวซึ่งมีความสว่างต่ำอยู่แล้ว ให้ทดสอบทั้งสองธีม
การตั้งเป้าที่ระดับ AAA คุ้มหรือไม่
เป็นระดับที่เข้มงวดกว่า คือ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ และอ่านง่ายกว่าจริง โดยเฉพาะสำหรับผู้มีสายตาเลือนรางและในสภาพแสงที่ไม่ดี องค์กรส่วนใหญ่ตั้ง AA เป็นเส้นฐานของการปฏิบัติตาม และถือ AAA เป็นเป้าหมายสำหรับเนื้อความและการอ่านยาว ๆ AAA ไม่ค่อยเป็นข้อกำหนดทางกฎหมาย
องค์ประกอบใดได้รับการยกเว้น
WCAG ยกเว้นเนื้อหาที่เป็นการตกแต่งล้วน ข้อความที่เป็นส่วนหนึ่งของตัวควบคุมที่ไม่ทำงาน ข้อความในโลโก้ และข้อความที่เป็นส่วนหนึ่งของภาพซึ่งมีเนื้อหาทางภาพสำคัญอื่นอยู่ด้วย ข้อยกเว้นเหล่านี้แคบกว่าที่คนทั่วไปคิด ข้อความตัวอย่างในช่องกรอก ตัวควบคุมที่ดูเหมือนถูกปิดใช้งานแต่จริง ๆ ยังทำงาน และข้อความช่วยเหลือที่ความต่างชัดต่ำ มักถูกเข้าใจผิดว่าได้รับการยกเว้น
ยังมีคำถามอยู่ไหม? ติดต่อเรา →