วิธีใช้งาน
- ป้อนสีข้อความ (สีพื้นหน้า) และสีพื้นหลังในรูปแบบ HEX, rgb(), hsl() หรือรูปแบบ CSS อื่น ๆ หรือใช้ตัวเลือกสี
- ดูอัตราส่วนคอนทราสต์และผลผ่านหรือไม่ผ่านของข้อกำหนด WCAG แต่ละระดับ
- หากไม่ผ่านข้อกำหนด ให้เลือกเป้าหมายแล้วใช้สีที่แนะนำ ซึ่งจะคงเฉดสีเดิมและปรับเฉพาะความสว่าง
- ใช้ “สลับ” เพื่อตรวจสอบการจับคู่สีแบบกลับด้าน เช่น ข้อความสีอ่อนบนปุ่มสีเข้ม
วิธีการทำงาน
อัตราส่วนนี้เป็นไปตามนิยามของ WCAG 2.2 โดยคำนวณค่าความสว่างสัมพัทธ์ของแต่ละสีจากช่องสี sRGB แล้วนำมาคำนวณอัตราส่วนด้วยสูตร (สีที่สว่างกว่า + 0.05) ÷ (สีที่มืดกว่า + 0.05) ค่าจะอยู่ในช่วงตั้งแต่ 1:1 (สีเหมือนกัน) ถึง 21:1 (สีดำบนสีขาว)
เกณฑ์ที่ตรวจสอบ: เกณฑ์ความสำเร็จ 1.4.3 (AA) กำหนดอัตราส่วน 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน 1.4.6 (AAA) กำหนดไว้ที่ 7:1 และ 4.5:1 ตามลำดับ ขณะที่ 1.4.11 กำหนดอัตราส่วน 3:1 สำหรับส่วนประกอบของส่วนติดต่อผู้ใช้และกราฟิกที่มีความหมาย เช่น เส้นขอบช่องกรอกข้อมูลและไอคอน ข้อความขนาดใหญ่หมายถึงข้อความปกติขนาดอย่างน้อย 24px หรือข้อความตัวหนาขนาดประมาณ 18.66px WCAG ไม่อนุญาตให้ปัดเศษขึ้น ดังนั้นอัตราส่วน 4.49:1 จึงไม่ผ่าน AA แม้จะใกล้เคียงมาก อัตราส่วนที่แสดงในที่นี้จะตัดทศนิยม ไม่ใช่ปัดเศษ
คำแนะนำจะคงเฉดสีและความเข้มของสีข้อความไว้ใน OKLCH แล้วค้นหาค่าความสว่างที่ใกล้ที่สุด ไม่ว่าจะเข้มหรือสว่างขึ้น ซึ่งผ่านเกณฑ์เป้าหมาย อัตราส่วนคอนทราสต์เป็นเพียงส่วนหนึ่งของความอ่านง่าย น้ำหนักและขนาดตัวอักษร รวมถึงความแตกต่างในการมองเห็นสี ก็มีความสำคัญเช่นกัน WCAG 2.2 เป็นคำแนะนำล่าสุดของ W3C ที่กฎหมายด้านการเข้าถึงส่วนใหญ่อ้างอิงถึง
ตัวอย่าง
ข้อความสีเทาที่เกือบผ่านเกณฑ์
ข้อความสี #777777 บนพื้นขาวมีอัตราส่วน 4.48:1 ซึ่งผ่านเกณฑ์สำหรับข้อความขนาดใหญ่และส่วนประกอบ UI แต่ไม่ผ่าน AA สำหรับข้อความปกติ สีเทาที่ใกล้ที่สุดซึ่งผ่านเกณฑ์คือประมาณ #767676 โดยมีอัตราส่วน 4.54:1
ข้อความสีขาวบนปุ่มสีแบรนด์
ข้อความสีขาวบนพื้น #ff8800 มีอัตราส่วนประมาณ 2.4:1 ซึ่งไม่ผ่านแม้แต่เกณฑ์ 3:1 สำหรับข้อความขนาดใหญ่ วิธีแก้ทั่วไปคือทำสีส้มให้เข้มขึ้น หรือเปลี่ยนไปใช้ข้อความสีเข้ม คำแนะนำจะแสดงว่าต้องทำให้สีข้อความเข้มเพียงใด
ตรวจสอบเส้นขอบช่องกรอกข้อมูล
เส้นขอบสีเทาอ่อน #cccccc บนพื้นขาวมีอัตราส่วนประมาณ 1.6:1 ตามเกณฑ์ 1.4.11 เส้นขอบที่ใช้ระบุช่องกรอกข้อมูลต้องมีอัตราส่วน 3:1 จึงต้องใช้สีประมาณ #949494 หรือเข้มกว่านั้น
คำถามที่พบบ่อย
WCAG AA กำหนดอัตราส่วนคอนทราสต์เท่าใด
ข้อความทั่วไปต้องมีอัตราส่วน 4.5:1 ข้อความขนาดใหญ่ (24px หรือ 18.66px แบบตัวหนา) และส่วนประกอบ UI รวมถึงกราฟิกที่มีความหมายต้องมีอัตราส่วน 3:1 ส่วนระดับ AAA กำหนดอัตราส่วน 7:1 สำหรับข้อความ และ 4.5:1 สำหรับข้อความขนาดใหญ่
ข้อความในโลโก้หรือปุ่มที่ปิดใช้งานต้องผ่านเกณฑ์หรือไม่
ไม่จำเป็น WCAG ยกเว้นข้อความในโลโก้และชื่อแบรนด์ ข้อความที่มีไว้ตกแต่งอย่างเดียว และข้อความในส่วนประกอบของส่วนติดต่อผู้ใช้ที่ไม่ทำงาน (ปิดใช้งาน)
ทำไมผลลัพธ์จึงต่างจากเครื่องมือตรวจสอบอื่นเล็กน้อย
เครื่องมือบางตัวปัดเศษอัตราส่วนให้เหลือทศนิยมหนึ่งตำแหน่ง หรือปัดขึ้น แต่ WCAG เปรียบเทียบค่าที่แน่นอน เครื่องมือนี้จึงตัดค่าทศนิยมให้เหลือสองตำแหน่ง ความแตกต่างเล็กน้อยอาจเกิดจากการป้อนสีที่มีค่า alpha ด้วย
แล้ววิธีวัดคอนทราสต์ APCA แบบใหม่ล่ะ?
APCA เป็นวิธีการอีกแบบที่เสนอให้ใช้ใน WCAG เวอร์ชันอนาคต แต่ยังไม่รวมอยู่ใน WCAG 2.2 ซึ่งเป็นเวอร์ชันที่เครื่องมือนี้ใช้วัด และเป็นเวอร์ชันที่ข้อกำหนดด้านการเข้าถึงในปัจจุบันอ้างอิง
ความเป็นส่วนตัว
ตรวจสอบสีในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลดหรือจัดเก็บข้อมูล