เครื่องมือตรวจสอบคอนทราสต์
ป้อนสีข้อความและสีพื้นหลังเพื่อคำนวณอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG พร้อมผลผ่าน/ไม่ผ่านของ AA และ AAA และตัวอย่างแบบเรียลไทม์
🔒 ประมวลผลในเบราว์เซอร์ของคุณ
Loading…
วิธีใช้งาน
- ป้อนสีข้อความ (สีพื้นหน้า) ในช่องแรก หรือเลือกด้วยตัวเลือกสี
- ป้อนสีพื้นหลังในช่องที่สอง หรือเลือกด้วยตัวเลือกสี
- อัตราส่วนคอนทราสต์และตัวอย่างการจับคู่สีจริงจะอัปเดตทันที
- ตรวจสอบป้ายทั้งสี่เพื่อดูว่าคู่สีนี้ผ่านมาตรฐาน WCAG AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่หรือไม่
คุณสมบัติ
- รองรับรูปแบบสี hex, rgb() และ hsl()
- คำนวณอัตราส่วนคอนทราสต์ตามความสว่างสัมพัทธ์ของ WCAG 2.x อย่างแม่นยำ
- แสดงป้ายผ่าน/ไม่ผ่านสำหรับ AA และ AAA ทั้งข้อความปกติและขนาดใหญ่
- ตัวอย่างการจับคู่สีข้อความและพื้นหลังแบบเรียลไทม์
- ประมวลผลฝั่งไคลเอนต์ 100% — สีของคุณไม่ออกจากเบราว์เซอร์เลย
คำถามที่พบบ่อย
อัตราส่วนคอนทราสต์คำนวณอย่างไร?
อัตราส่วนคำนวณตามสูตร WCAG 2.x โดยแปลงช่องสี sRGB ของแต่ละสีให้เป็นเชิงเส้น รวมเป็นค่าความสว่างสัมพัทธ์ แล้วคำนวณอัตราส่วนจาก (L1 + 0.05) / (L2 + 0.05) โดย L1 คือความสว่างของสีที่สว่างกว่า อัตราส่วนอยู่ระหว่าง 1:1 (ไม่มีคอนทราสต์) ถึง 21:1 (ดำกับขาว)
AA กับ AAA ต่างกันอย่างไร?
AA เป็นระดับมาตรฐานที่เว็บไซต์ส่วนใหญ่ใช้ ส่วน AAA เป็นระดับที่เข้มงวดกว่า AA ต้องการอัตราส่วน 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA ต้องการ 7:1 และ 4.5:1 ตามลำดับ
ข้อความขนาดใหญ่ตามนิยามของ WCAG คืออะไร?
ข้อความขนาดใหญ่หมายถึงข้อความที่มีขนาดอย่างน้อย 18pt (24px) แบบปกติ หรืออย่างน้อย 14pt (18.66px) แบบตัวหนา เนื่องจากตัวอักษรที่ใหญ่และหนากว่าจะยังอ่านง่ายแม้ในคอนทราสต์ที่ต่ำกว่า จึงมีเกณฑ์ที่ผ่อนปรนกว่า
สามารถป้อนสีในรูปแบบใดได้บ้าง?
คุณสามารถพิมพ์รหัสสี hex (#000 หรือ #000000), rgb()/rgba() หรือ hsl()/hsla() หรือใช้ตัวเลือกสีข้างช่องแต่ละช่องได้
เครื่องมือนี้จัดเก็บหรืออัปโหลดสีของฉันหรือไม่?
ไม่ ทั้งหมดนี้ทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ล้วน ๆ ไม่มีการส่งหรือบันทึกข้อมูลไปยังเซิร์ฟเวอร์ใด ๆ