lockไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์
เครื่องมือตรวจสอบคอนทราสต์สีฟรีที่ทดสอบอัตราส่วนตามมาตรฐาน WCAG 2.1 (AA, AAA) ประมวลผลในเบราว์เซอร์ จำเป็นสำหรับการเข้าถึงเว็บและตรวจสอบดีไซน์ UI
วิธีใช้งานตรวจสอบคอนทราสต์?
- ป้อนสีพื้นหน้าและพื้นหลัง
- ตรวจสอบอัตราส่วนและเกรด WCAG
- ปรับสีตามต้องการเพื่อให้ผ่านมาตรฐาน
คำถามที่พบบ่อยเกี่ยวกับตรวจสอบคอนทราสต์
WCAG AA กับ AAA ต่างกันอย่างไร?
AA ต้องการ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความใหญ่ AAA เข้มงวดกว่า: 7:1 และ 4.5:1
ถ้าอัตราส่วนไม่ผ่านทำอย่างไร?
ปรับสีให้สว่างหรือเข้มขึ้นเพื่อเพิ่มคอนทราสต์ เครื่องมือแสดงผลแบบเรียลไทม์
ข้อความขนาดใหญ่มีเกณฑ์ต่ำกว่า แล้วต้องใหญ่แค่ไหนถึงนับ?
WCAG นับว่าเป็นข้อความขนาดใหญ่ตั้งแต่ 18pt (ราว 24px) สำหรับน้ำหนักปกติ หรือ 14pt (ราว 18.7px) เมื่อเป็นตัวหนา หากเข้าเกณฑ์นี้ ข้อกำหนดระดับ AA จะลดจาก 4.5:1 เหลือ 3:1 แต่พึงจำว่านี่คือขั้นต่ำ ไม่ใช่เป้าหมาย เพราะเนื้อความยังต้องอ่านออกบนจอโน้ตบุ๊กที่หรี่แสงหรือกลางแดด การเล็งให้ใกล้ 7:1 จึงปลอดภัยกว่า
จะตรวจคอนทราสต์ของข้อความบนภาพถ่ายหรือแผงกึ่งโปร่งใสอย่างไร?
การคำนวณคอนทราสต์ตั้งอยู่บนสมมติฐานว่ามีสีทึบสองสี ดังนั้นบนภาพถ่ายคุณต้องดูดสีจากจุดที่สว่างที่สุดและมืดที่สุดใต้ข้อความ แล้วตรวจสองครั้ง หากมีจุดใดไม่ผ่าน ข้อความก็จะจมหายไปในบางช่วงของภาพ ในทางปฏิบัติ การวางแถบสีทึบไว้หลังข้อความน่าเชื่อถือกว่าการคลุมด้วยชั้นดำกึ่งโปร่งใสหรือการใส่เงาให้ตัวอักษร เพราะสองวิธีหลังขึ้นกับสิ่งที่อยู่ข้างใต้
วิธีใช้ตรวจสอบคอนทราสต์ให้เกิดประโยชน์สูงสุด?
- ข้อความปกติต้องได้ 4.5:1 ส่วนตัวอักษรขนาด 18pt ขึ้นไปหรือหนา 14pt ต้องการเพียง 3:1 ก็ผ่านระดับ AA
- มาตรฐานการเข้าถึงเว็บของไทยอ้างอิงค่าคอนทราสต์ชุดเดียวกับ WCAG จึงใช้ตัวเลขนี้ได้เลย
- องค์ประกอบที่ไม่ใช่ข้อความ เช่น ไอคอนและเส้นขอบช่องกรอก ก็ต้องมีคอนทราสต์ 3:1
Powered by Patrache Studio Tools