เครื่องมือตรวจสอบความเปรียบต่างสี
ตรวจสอบความเปรียบต่างของสีข้อความและพื้นหลังตามมาตรฐาน WCAG
แนะนำสีที่ผ่านเกณฑ์โดยอัตโนมัติและออกใบรับรองการผ่านมาตรฐาน
🔤 สีข้อความ (Text)
🎨 สีพื้นหลัง (Background)
นี่คือการแสดงตัวอย่างข้อความปกติ (16px)
นี่คือข้อความตัวหนา (16px bold)
นี่คือข้อความขนาดใหญ่ (24px)
นี่คือข้อความตัวหนาขนาดใหญ่ (18px bold)
อัตราส่วนความเปรียบต่าง
12.63 : 1
ระดับ AA: ข้อความปกติ
≥ 4.5:1
ระดับ AA: ข้อความขนาดใหญ่
≥ 3:1
ระดับ AAA: ข้อความปกติ
≥ 7:1
ระดับ AAA: ข้อความขนาดใหญ่
≥ 4.5:1
💡 คำแนะนำ: สีที่แนะนำเพื่อให้ผ่านมาตรฐานระดับ AA:
ปรับสีข้อความ:
ปรับสีพื้นหลัง:
🏆 ใบรับรองการผ่านมาตรฐาน WCAG AA
* เมื่อคลิก 'แชร์บน 𝕏' ระบบจะบันทึกใบรับรองโดยอัตโนมัติด้วย
📋 โค้ด CSS
เกี่ยวกับ
เครื่องมือฟรีสำหรับการตรวจสอบว่าคู่สีที่คุณเลือกสำหรับเว็บไซต์หรือแอพพลิเคชันนั้นมีอัตราส่วนความเปรียบต่างตรงตามมาตรฐาน WCAG 2.1 หรือไม่ ความเปรียบต่างของสีที่ต่ำเกินไปจะทำให้ผู้ที่มีความบกพร่องทางการมองเห็นอ่านข้อความของคุณได้ยาก
หากสีที่คุณเลือกไม่ผ่านเกณฑ์ เครื่องมือนี้จะแนะนำสีที่ใกล้เคียงที่สุดที่ผ่านเกณฑ์โดยอัตโนมัติ ช่วยให้คุณปรับปรุงความสามารถในการเข้าถึงเว็บไซต์ได้อย่างง่ายดายโดยไม่ส่งผลกระทบต่อการออกแบบโดยรวมมากเกินไป
เมื่อผ่านมาตรฐานระดับ AA แล้ว คุณสามารถดาวน์โหลดใบรับรองการผ่านมาตรฐาน WCAG AA อย่างเป็นทางการเพื่อนำไปใช้หรือแชร์ต่อได้ทันที
วิธีใช้งาน
เลือกสี
คลิกที่ตัวเลือกสีหรือพิมพ์รหัส HEX/RGB สำหรับสีข้อความและสีพื้นหลัง
ตรวจสอบผลลัพธ์
อัตราส่วนความเปรียบต่างและสถานะการผ่าน/ไม่ผ่านสำหรับมาตรฐาน WCAG AA/AAA จะแสดงผลแบบเรียลไทม์พร้อมการแสดงตัวอย่างสด
รับใบรับรอง
หากผ่านมาตรฐานระดับ AA คุณสามารถบันทึกใบรับรองที่เป็นทางการและแบ่งปันได้อย่างง่ายดาย
คำศัพท์
- อัตราส่วนความเปรียบต่าง (Contrast Ratio)
- ตัวเลขทางคณิตศาสตร์ที่แสดงความแตกต่างของแสงระหว่างสีของสิ่งที่เป็นฉากหน้า (Foreground) และสีพื้นหลัง (Background) ซึ่งมีค่าตั้งแต่ 1:1 (ไม่มีความแตกต่าง) ไปจนถึง 21:1 (สีดำบนสีขาว)
- WCAG (Web Content Accessibility Guidelines)
- แนวทางและมาตรฐานระดับสากลที่จัดทำโดยองค์กร W3C เพื่อทำให้เนื้อหาบนเว็บสามารถเข้าถึงได้ง่ายขึ้นสำหรับทุกคน รวมทั้งผู้ที่มีความบกพร่องต่างๆ ซึ่งรัฐบาลหลายประเทศทั่วโลกบังคับใช้เป็นกฎหมาย
- มาตรฐานระดับ AA (AA Standard)
- เป้าหมายระดับกลางของมาตรฐานการเข้าถึง ข้อความปกติต้องมีอัตราส่วนอย่างน้อย 4.5:1 และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt+) นี่คือมาตรฐานพื้นฐานทางกฎหมายสำหรับเว็บไซต์ทั่วไป
- มาตรฐานระดับ AAA (AAA Standard)
- ระดับความเข้มงวดสูงสุดของ WCAG ที่มักใช้กับระบบที่มีความต้องการด้านการเข้าถึงเฉพาะทาง โดยต้องได้ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ ซึ่งอาจจำกัดความสวยงามของการออกแบบได้
- ความสว่างสัมพัทธ์ (Relative Luminance)
- ค่าความสว่างสัมพัทธ์ของจุดในพื้นที่สีใดๆ โดยใช้การคำนวณแกมมาเพื่อให้สอดคล้องกับการรับรู้สายตาของมนุษย์ และให้คะแนนสีตั้งแต่ 0 (มืดสุด) ถึง 1 (สว่างสุด)
- ความสามารถในการเข้าถึง (Accessibility - a11y)
- หลักปฏิบัติในการสร้างสภาพแวดล้อมที่สามารถใช้งานได้สำหรับผู้คนทุกกลุ่ม รวมถึงผู้ที่มีความบกพร่องทางสายตา ข้อจำกัดทางการรับรู้ หรือความเสื่อมถอยจากอายุที่มากขึ้น
FAQ
- Q.อัตราส่วนความเปรียบต่างที่แนะนำสำหรับข้อความบนเว็บคือเท่าไหร่?
- ตามมาตรฐาน WCAG ระดับ AA ข้อความปกติจะต้องมีอัตราส่วนความเปรียบต่างขั้นต่ำ 4.5:1 อย่างไรก็ตาม สำหรับข้อความขนาดใหญ่ (โดยปกติคือ 18pt หรือ 14pt ตัวหนา) จะต้องการเพียง 3:1 เท่านั้น
- Q.เครื่องมือนี้มีการจำลองตาบอดสีหรือไม่?
- ไม่ เครื่องมือในเวอร์ชันนี้เน้นที่การตรวจสอบอัตราส่วนความเปรียบต่างในทางคณิตศาสตร์เท่านั้น โปรดใช้ซอฟต์แวร์จำลองตาบอดสีอื่นๆ ควบคู่กับเครื่องมือนี้
- Q.อัลกอริทึมคำนวณอัตราส่วนความเปรียบต่างอย่างไร?
- ระบบใช้สูตรตามที่ WCAG แนะนำอย่างแท้จริง โดยคำนวณจากความสว่างสัมพัทธ์ (Relative Luminance) ของทั้งสองสี และเปรียบเทียบตามมาตราส่วน (L1 + 0.05) / (L2 + 0.05)
- Q.ฉันควรตั้งเป้าไปที่มาตรฐานระดับ AA หรือ AAA?
- มาตรฐานอุตสาหกรรมทั่วโลกและข้อกำหนดทางกฎหมายส่วนใหญ่สำหรับธุรกิจทั่วไปคือระดับ AA ในขณะที่ระดับ AAA มีความเข้มงวดสูงมาก และมักจะบังคับใช้เฉพาะกับแพลตฟอร์มเฉพาะทางของรัฐบาลหรือระบบสำหรับผู้พิการเท่านั้น
- Q.ข้อมูลสีของบริษัทที่กรอกลงไปจะถูกส่งไปยังเซิร์ฟเวอร์คลาวด์หรือไม่?
- ไม่เด็ดขาด การวิเคราะห์สีและการสร้างใบรับรองทั้งหมดเกิดขึ้นเฉพาะในหน่วยความจำเบราว์เซอร์บนอุปกรณ์ของคุณเท่านั้น รับประกันความเป็นส่วนตัวของข้อมูลองค์กรอย่างสมบูรณ์
- Q.ฉันสามารถป้อนสีในรูปแบบอื่นที่ไม่ใช่รหัส HEX ได้หรือไม่?
- ได้ นอกเหนือจากรูปแบบ HEX (เช่น #ffffff) คุณยังสามารถคลิกที่เครื่องมือเลือกสีหรือพิมพ์ค่าพิกัด RGB ลงไปได้โดยตรง
- Q.ใบรับรองที่ดาวน์โหลดมีผลทางกฎหมายหรือไม่?
- มันเป็นหลักฐานทางคณิตศาสตร์ที่เชื่อถือได้ ซึ่งยืนยันว่าการจับคู่สีของคุณผ่านสูตรของ W3C แต่มันไม่สามารถแทนที่การตรวจสอบการเข้าถึงอย่างเต็มรูปแบบจากผู้เชี่ยวชาญ (Accessibility Audit) ได้
กรณีการใช้งาน
ตรวจสอบการออกแบบเว็บ
ตรวจสอบความเปรียบต่างของสีในขั้นตอนการออกแบบ เพื่อให้แน่ใจว่าเว็บไซต์องค์กรหรือหน้า Landing Page เป็นไปตามมาตรฐาน WCAG
รีวิว UI ของแอพมือถือ
วัดระดับความชัดเจนของข้อความบนปุ่มหรือป้ายกำกับว่าผู้ที่มีปัญหาด้านการมองเห็นสามารถอ่านได้หรือไม่
การตรวจสอบการปฏิบัติตามข้อกำหนด
ตรวจสอบเว็บไซต์อย่างละเอียดเพื่อหาข้อผิดพลาดด้านความเปรียบต่าง ให้เป็นไปตามมาตรฐานระดับโลก เช่น ADA, EN 301 549 หรือ WCAG
เอกสารนำเสนอและรายงาน
รับรองว่าสีข้อความบนสไลด์นำเสนอหรือเอกสารทั่วไปสามารถอ่านได้อย่างชัดเจนสำหรับผู้ชมทุกคน
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง