เครื่องมือตรวจสอบคอนทราสต์สี

กรอกสีข้อความและสีพื้นหลังเพื่อดูอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG และตรวจสอบระดับการผ่านเกณฑ์ AA และ AAA

อัตราส่วนคอนทราสต์
ข้อความปกติAA4.5:1
ข้อความปกติAAA7:1
ข้อความขนาดใหญ่AA3:1
ข้อความขนาดใหญ่AAA4.5:1
UI และกราฟิก3:1
กรอกสีข้อความและสีพื้นหลังเพื่อตรวจสอบ

ทุกการตรวจสอบจะทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณกรอกไปยัง BroBroGo

คำถามที่พบบ่อย

ผลลัพธ์ระดับ AA และ AAA หมายถึงอะไร?

AA คือระดับมาตรฐานที่เว็บไซต์ส่วนใหญ่ตั้งเป้าหมายไว้ โดยต้องการอัตราส่วนอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA จะเข้มงวดกว่า โดยต้องการอัตราส่วน 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ โดยอัตราส่วนจะมีตั้งแต่ 1:1 (ไม่มีคอนทราสต์เลย) ไปจนถึง 21:1 (สีดำบนพื้นขาว)

ข้อความแบบใดที่นับว่าเป็นข้อความขนาดใหญ่?

ข้อความที่มีขนาดตั้งแต่ 18pt (ประมาณ 24px) ขึ้นไป หรือ 14pt (ประมาณ 18.5px) ขึ้นไปหากเป็นตัวหนา ข้อความขนาดใหญ่จะยังคงอ่านง่ายแม้มีอัตราส่วนคอนทราสต์ที่ต่ำกว่า ดังนั้นจึงผ่านเกณฑ์ AA ที่อัตราส่วน 3:1 และ AAA ที่ 4.5:1 แทนที่จะใช้เกณฑ์ที่เข้มงวดกว่าของข้อความขนาดปกติ

สามารถกรอกฟอร์แมตสีใดได้บ้าง?

คุณสามารถกรอกค่า Hex เช่น #1a1a1a, ค่า rgb() เช่น rgb(26, 26, 26) หรือค่า hsl() หรือจะคลิกที่จานสีเพื่อเลือกสีก็ได้ นอกจากนี้ยังมีปุ่มสลับสีเพื่อสลับระหว่างสีข้อความและสีพื้นหลังได้อย่างรวดเร็ว

เครื่องมือนี้ใช้เกณฑ์ WCAG 2 หรือวิธี APCA แบบใหม่?

เครื่องมือนี้ใช้สูตร WCAG 2.1 / 2.2 ซึ่งเป็นเกณฑ์มาตรฐานที่ใช้ในการตรวจสอบการเข้าถึง (Accessibility) ในปัจจุบัน ส่วน APCA เป็นวิธีใหม่ที่เน้นการรับรู้ทางสายตาซึ่งยังอยู่ระหว่างการร่างสำหรับ WCAG 3 แม้ว่าจะมีแนวโน้มที่ดีแต่ยังไม่ได้เป็นมาตรฐานบังคับใช้ ดังนั้นผลการทดสอบที่นี่จึงยังไม่ได้ใช้วิธีดังกล่าว