ข้ามไปยังเนื้อหา
patrache.tools

ตรวจสอบคอนทราสต์

เครื่องมือตรวจสอบคอนทราสต์ออนไลน์ฟรี ตรวจสอบ WCAG AA/AAA วัดอัตราส่วนคอนทราสต์สำหรับการเข้าถึงเว็บ ประมวลผลบนเบราว์เซอร์

สีตัวอักษร
สีพื้นหลัง
21.00:1
อัตราส่วนคอนทราสต์
ข้อความปกติ
AA (4.5:1)ผ่าน
AAA (7:1)ผ่าน
ข้อความขนาดใหญ่
AA (3:1)ผ่าน
AAA (4.5:1)ผ่าน
ดูตัวอย่าง

กินข้าวกับปลาทู แล้วไปเที่ยวภูเขา 1234567890

กินข้าวกับปลาทู แล้วไปเที่ยวภูเขา 1234567890

lockไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์
แชร์
ฝัง

ฝังเครื่องมือนี้ในเว็บไซต์ของคุณ

เครื่องมือตรวจสอบคอนทราสต์สีฟรีที่ทดสอบอัตราส่วนตามมาตรฐาน WCAG 2.1 (AA, AAA) ประมวลผลในเบราว์เซอร์ จำเป็นสำหรับการเข้าถึงเว็บและตรวจสอบดีไซน์ UI

วิธีใช้งานตรวจสอบคอนทราสต์?

  1. ป้อนสีพื้นหน้าและพื้นหลัง
  2. ตรวจสอบอัตราส่วนและเกรด WCAG
  3. ปรับสีตามต้องการเพื่อให้ผ่านมาตรฐาน

คำถามที่พบบ่อยเกี่ยวกับตรวจสอบคอนทราสต์

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

โปรดอนุญาตโฆษณาบนเว็บไซต์นี้

หากต้องการใช้เครื่องมือเหล่านี้ โปรดอนุญาตโฆษณาบนเว็บไซต์นี้ รายได้จากโฆษณาช่วยให้บริการนี้ยังคงใช้งานได้ฟรี

เปิดตัวบล็อกโฆษณา ปิดการบล็อกสำหรับเว็บไซต์นี้ แล้วตรวจสอบอีกครั้ง