คู่มือตรวจสอบความคมชัด WCAG: ข้อกำหนด AA/AAA และวิธีแก้ไขความล้มเหลว

สัญลักษณ์การเข้าถึงบนแป้นพิมพ์

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

ความคมชัดของสีคือะไร และทำไมมันถึงสำคัญ?

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

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) 2.1 กำหนดอัตราส่วนความคมชัดขั้นต่ำเพื่อให้แน่ใจว่าอ่านได้ การปฏิบัติตามมาตรฐานเหล่านี้ไม่ใช่แค่แนวปฏิบัติที่ดี — มันเป็นข้อกำหนดทางกฎหมายภายใต้พระราชบัญญัติคนพิการอเมริกัน (ADA) มาตรา 508 และกฎหมายที่คล้ายกันทั่วโลก

ข้อกำหนดความคมชัด WCAG

WCAG กำหนดสองระดับการปฏิบัติตามสำหรับความคมชัด:

ระดับ AA (มาตรฐานขั้นต่ำ)

ข้อความปกติ (ต่ำกว่า 18pt หรือต่ำกว่า 14pt ตัวหนา): อัตราส่วนขั้นต่ำ 4.5:1

ข้อความขนาดใหญ่ (18pt+ หรือ 14pt+ ตัวหนา): อัตราส่วนขั้นต่ำ 3:1

คอมโพเนนต์ UI และวัตถุกราฟิก: อัตราส่วนขั้นต่ำ 3:1 (เพิ่มใน WCAG 2.1)

ระดับ AAA (มาตรฐานที่ปรับปรุง)

ข้อความปกติ: ขั้นต่ำ 7:1

ข้อความขนาดใหญ่: ขั้นต่ำ 4.5:1

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

วิธีคำนวณอัตราส่วนความคมชัด

อัตราส่วนความคมชัดคือความสว่างสัมพัทธ์ของสีที่สว่างกว่าหารด้วยความสว่างสัมพัทธ์ของสีที่เข้มกว่า แสดงเป็นอัตราส่วนจาก 1:1 (ไม่มีความคมชัด) ถึง 21:1 (ดำบนขาว)

คุณไม่จำเป็นต้องคำนวณด้วยตนเอง ใช้เครื่องมือตรวจสอบความคมชัด WCAG ของเราเพื่อทดสอบคู่สีหลายคู่ทันที

ตัวอย่าง

ข้อความ	พื้นหลัง	อัตราส่วน	AA ปกติ	AA ใหญ่	AAA ปกติ
`#000000`	`#FFFFFF`	21:1	✅ ผ่าน	✅ ผ่าน	✅ ผ่าน
`#767676`	`#FFFFFF`	4.54:1	✅ ผ่าน	✅ ผ่าน	❌ ไม่ผ่าน
`#3B82F6`	`#FFFFFF`	3.15:1	❌ ไม่ผ่าน	✅ ผ่าน	❌ ไม่ผ่าน
`#1E40AF`	`#FFFFFF`	7.04:1	✅ ผ่าน	✅ ผ่าน	✅ ผ่าน