เครื่องมือตรวจสอบคอนทราสต์สี WCAG
ประเมินอัตราส่วนคอนทราสต์ของข้อความและสีพื้นหลังตามแนวทาง WCAG 2.1 สร้างการปรับแต่งสีที่สามารถเข้าถึงได้ทันที
ตัวอย่างข้อความสด
หัวเรื่องใหญ่ (18pt ตัวหนา / 24pt ปกติ)
นี่คือตัวอย่างตัวอย่างสไตล์ข้อความหัวเรื่องขนาดใหญ่
ข้อความปกติ (ต่ำกว่า 18pt)
ข้อความตัวอย่างสำหรับการจัดวางเนื้อหาและทดสอบรูปแบบการแสดงผล
อัตราส่วนคอนทราสต์
สถานะการปฏิบัติตาม WCAG 2.1
แนวทาง WCAG 2.1
ตรวจสอบมาตรฐานคอนทราสต์ได้อย่างง่ายดายเพื่อสร้างอินเทอร์เฟซที่เข้าถึงได้ซึ่งสอดคล้องกับแนวทาง Section 508, ADA และ WCAG AA หรือ AAA
ระบบแนะนำ
ปรับสีตามพิกัด HSL ทีละน้อยโดยอัตโนมัติเพื่อหาตัวเลือกที่ใกล้เคียงที่สุดที่ตรงตามเกณฑ์อัตราส่วนคอนทราสต์
ทำงานฝั่งไคลเอ็นต์ทั้งหมด
การคำนวณจะดำเนินการในเครื่องภายในบริบทเบราว์เซอร์ของคุณ ไม่มีสี ไฟล์ หรือพิกัดเทเลเมทรีใดถูกส่งไปยังเซิร์ฟเวอร์ของเรา
เครื่องมือสีที่เกี่ยวข้อง
ตัวตรวจสอบความคมชัดของสี
คำนวณอัตราส่วนความคมชัด WCAG สำหรับสีพื้นหน้าและพื้นหลัง และแสดงผลลัพธ์ขนาดข้อความทั่วไป
- อินพุต
- สี CSS ที่ถูกต้องสองสีและข้อความตัวอย่างที่ไม่บังคับ.
- ผลลัพธ์
- อัตราส่วนคอนทราสต์พร้อมตัวบ่งชี้ผ่านหรือไม่ผ่าน WCAG AA และ AAA.
- ข้อจำกัดจริง
- การคำนวณครอบคลุมเฉพาะความเปรียบต่างของความสว่างเท่านั้น ไม่ได้รับรองอินเทอร์เฟซหรือคำนึงถึงการเรนเดอร์ฟอนต์ การเคลื่อนไหว การโฟกัส หรือสัญญาณที่ไม่ใช่สี
- ความเป็นส่วนตัวและการจัดการข้อมูล
- สี CSS ที่ถูกต้องสองสีและข้อความตัวอย่างที่ไม่บังคับจะถูกประมวลผลในแท็บเบราว์เซอร์นี้ Convertr ไม่ได้รับหรือจัดเก็บข้อมูลนั้น การปิดหรือโหลดหน้าใหม่จะล้างสถานะการทำงาน เว้นแต่เครื่องมือจะเสนอให้ดาวน์โหลดในเครื่องอย่างชัดเจน
วิธีใช้เครื่องมือนี้
- ระบุสี CSS ที่ถูกต้องสองสีและข้อความตัวอย่างเสริมในเครื่องมือควบคุม
- เลือกการตั้งค่าที่ส่งผลต่ออัตราส่วนคอนทราสต์พร้อมตัวบ่งชี้ผ่าน/ไม่ผ่าน WCAG AA และ AAA แล้วเรียกใช้เครื่องมือ
- ตรวจสอบอัตราส่วนคอนทราสต์พร้อมตัวบ่งชี้ผ่านหรือไม่ผ่าน WCAG AA และ AAA ก่อนคัดลอกหรือดาวน์โหลด
โหมดความล้มเหลวทั่วไป
สีที่ไม่ถูกต้องไม่สามารถวัดได้ และความโปร่งใสที่ไม่มีพื้นหลังที่กำหนดอาจทำให้อัตราส่วนไม่มีความหมาย
ตัวอย่างที่มีประโยชน์
เปรียบเทียบ #1f2937 บน #ffffff เพื่อตรวจสอบอัตราส่วนสำหรับข้อความปกติและข้อความขนาดใหญ่