วิธีตรวจสอบความคมชัดของสีเพื่อการเข้าถึง
ประมาณ 1 ใน 12 คนของผู้ชายและ 1 ใน 200 คนของผู้หญิงมีความบกพร่องในการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง อีกหลายล้านคนมีสายตาเลือนราง ตาที่กำลังแก่ลง หรือดูหน้าจอภายใต้แสงแดดจ้า หากข้อความของคุณไม่มีความคมชัดเพียงพอกับพื้นหลัง คนเหล่านี้อ่านไม่ได้
ความคมชัดของสีไม่ใช่ « สิ่งพิเศษ » — เป็นข้อกำหนดหลักของการเข้าถึง
สิ่งที่ WCAG กำหนด
Web Content Accessibility Guidelines (WCAG) กำหนดอัตราส่วนความคมชัดขั้นต่ำระหว่างข้อความและพื้นหลัง:
| ระดับ | ข้อความปกติ | ข้อความใหญ่ | องค์ประกอบที่ไม่ใช่ข้อความ |
|---|---|---|---|
| AA (ขั้นต่ำ) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (เพิ่มเติม) | 7 : 1 | 4.5 : 1 | — |
« ข้อความใหญ่ » หมายถึง 18 พิกเซลตัวหนาหรือ 24 พิกเซลปกติขึ้นไป
อัตราส่วนความคมชัดอยู่ในช่วงตั้งแต่ 1 : 1 (ไม่มีความคมชัด — ขาวบนขาว) ถึง 21 : 1 (ความคมชัดสูงสุด — ดำบนขาว)
วิธีตรวจสอบความคมชัด
- เลือกสีของคุณ — ป้อนสีข้อความ (เบื้องหน้า) และสีพื้นหลังผ่านรหัส HEX, ค่า RGB หรือตัวเลือก
- ดูผลลัพธ์ — เครื่องมือแสดงอัตราส่วนความคมชัดทันทีและว่าการรวมของคุณผ่าน WCAG AA และ AAA สำหรับข้อความปกติและขนาดใหญ่หรือไม่
- ปรับตามต้องการ — หากความคมชัดล้มเหลว ทำให้ข้อความเข้มขึ้นหรือพื้นหลังอ่อนลง (หรือตรงกันข้าม) จนถึงระดับที่ต้องการ
ข้อผิดพลาดของความคมชัดที่พบบ่อย
ข้อความสีเทาอ่อนบนสีขาว — #999999 บน #ffffff มีอัตราส่วนเพียง 2.8 : 1 ซึ่งล้มเหลวที่ WCAG AA อาจดู « สะอาด » สำหรับนักออกแบบที่มีสายตาที่สมบูรณ์ แต่อ่านไม่ได้สำหรับหลายคน
ข้อความสีบนพื้นหลังสี — ปุ่มสีน้ำเงินที่มีข้อความสีขาวมักผ่าน แต่ปุ่มสีเขียวที่มีข้อความสีขาวไม่ผ่าน ตรวจสอบเสมอ — ไม่สามารถตัดสินอัตราส่วนความคมชัดด้วยตา
ข้อความ Placeholder — ข้อความ Placeholder ของช่องเป็นที่ทราบกันว่ามีความคมชัดอ่อน แม้ WCAG ไม่ได้บังคับใช้อย่างเข้มงวด แต่ผู้ใช้ยังต้องอ่าน
โหมดมืด — นักออกแบบมักใช้สีเทากลางบนสีเทาเข้มเพื่อรูปลักษณ์ « ละมุน » สิ่งนี้มักล้มเหลวการตรวจสอบความคมชัด
เคล็ดลับ
- ตรวจสอบทุกการรวมข้อความ/พื้นหลัง — อย่าสันนิษฐาน แม้แต่นักออกแบบที่มีประสบการณ์ก็แปลกใจกับการรวมที่ล้มเหลว
- ทดสอบทั้งสองธีม — หากไซต์ของคุณมีโหมดสว่างและโหมดมืด ตรวจสอบความคมชัดในทั้งสองโหมด สีที่ใช้งานได้บนสีขาวอาจล้มเหลวบนสีเทาเข้ม
- ใช้สีของแบรนด์อย่างฉลาด — หากสีน้ำเงินของแบรนด์ล้มเหลวเป็นสีข้อความ ใช้สำหรับองค์ประกอบขนาดใหญ่กว่า (ปุ่ม ส่วนหัว) ที่เกณฑ์ « ข้อความใหญ่ » (3 : 1) ใช้ และใช้เฉดสีเข้มกว่าสำหรับเนื้อหา
- อย่าพึ่งพาสีเพียงอย่างเดียว — นอกจากความคมชัดที่เพียงพอแล้ว อย่าสื่อสารข้อมูลด้วยสีเพียงอย่างเดียว ใช้ไอคอน ป้ายกำกับ หรือลายเป็นส่วนเสริม
คำถามที่พบบ่อย
ควรเล็งอัตราส่วนความคมชัดใด?
สำหรับข้อความปกติ เล็งอย่างน้อย 4.5 : 1 (WCAG AA) สำหรับข้อความใหญ่ (18 พิกเซลตัวหนาหรือ 24 พิกเซลปกติ) 3 : 1 เพียงพอ สำหรับระดับการเข้าถึงสูงสุด (AAA) เล็ง 7 : 1 สำหรับข้อความปกติ
นี่ใช้กับข้อความเท่านั้นหรือไม่?
ไม่ WCAG 2.1 ยังต้องการความคมชัดที่เพียงพอสำหรับส่วนประกอบ UI และวัตถุกราฟิก (ไอคอน ขอบฟิลด์ ตัวบ่งชี้โฟกัส) ขั้นต่ำสำหรับองค์ประกอบที่ไม่ใช่ข้อความคือ 3 : 1
แล้วโหมดมืดล่ะ?
โหมดมืดต้องการการตรวจสอบความคมชัดเดียวกัน ข้อความสีขาวบนพื้นหลังเข้มมักผ่านได้ง่าย แต่ข้อความสีเทาบนพื้นหลังสีเทาเข้มมักล้มเหลว ทดสอบทั้งสองโหมด
ความคมชัดของสีเป็นข้อกำหนดทางกฎหมายหรือไม่?
ในหลายเขตอำนาจศาล ใช่ ADA (US), EN 301 549 (EU) และกฎหมายที่คล้ายกันบังคับใช้การเข้าถึงดิจิทัล การปฏิบัติตาม WCAG เป็นมาตรฐานที่ได้รับการยอมรับเพื่อตอบสนอง