ตรวจสอบสีของคุณ
ทดสอบการจับคู่สีเพื่อให้แน่ใจว่าตรงตามมาตรฐานการเข้าถึงของ WCAG สำหรับการอ่านข้อความ
เปรียบเทียบ: #000000 บน #FBFBF9
ข้อความ
16px, ปกติ (400)
นับเป็นข้อความปกติ
AA (WCAG 1.4.3): อย่างน้อย 4.5:1
ผ่านAAA (WCAG 1.4.6): อย่างน้อย 7:1
ผ่าน
ส่วนติดต่อผู้ใช้และกราฟิก
ไอคอน ขอบช่องกรอก ตัวบอกโฟกัส และส่วนอื่นๆ ที่ต้องมองเห็นเพื่อใช้งานอินเทอร์เฟซ
AA (WCAG 1.4.11): อย่างน้อย 3:1
ผ่าน
วิธีการตรวจสอบนี้
- สีที่เปรียบเทียบ (หลังผสม)
- ข้อความ #000000 บนพื้นหลัง #FBFBF9
- ความสว่างสัมพัทธ์
- ข้อความ 0.0000, พื้นหลัง 0.9634
- สูตร
- (L1 + 0.05) / (L2 + 0.05) โดยที่ L1 คือความสว่างของสีที่สว่างกว่า และ L2 คือของสีที่มืดกว่า
- อัตราส่วนที่แน่นอน
- 20.2686 ต่อ 1, แสดงเป็น 20.26 ต่อ 1. ค่าที่แสดงจะถูกตัด ไม่ได้ปัดเศษ ดังนั้นมันจะไม่ดูดีกว่าความเป็นจริง ค่าที่แน่นอนคือค่าที่นำมาเปรียบเทียบกับข้อกำหนด
ขนาดข้อความ: 16px, ปกติ (400)
นับเป็นข้อความปกติ ข้อความขนาดใหญ่คืออย่างน้อย 24px (18pt) หรืออย่างน้อย 18.67px (14pt) หากตัวหนา (น้ำหนัก 700 ขึ้นไป) ขนาดจะแสดงแบบตัดทอน ไม่ปัดเศษ
นับเป็นข้อความปกติ ข้อความขนาดใหญ่คืออย่างน้อย 24px (18pt) หรืออย่างน้อย 18.67px (14pt) หากตัวหนา (น้ำหนัก 700 ขึ้นไป) ขนาดจะแสดงแบบตัดทอน ไม่ปัดเศษ
สุนัขจิ้งจอกสีน้ำตาลกระโดดข้ามสุนัขขี้เกียจ
ตัวอย่างข้อความขนาดเล็ก (12px)
มาตรฐาน WCAG
ระดับ AA
อัตราส่วนความคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่ จำเป็นสำหรับเว็บไซต์ส่วนใหญ่
ระดับ AAA
อัตราส่วนความคอนทราสต์ที่เพิ่มขึ้น 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความใหญ่ แนะนำเพื่อการเข้าถึงสูงสุด
ตัวตรวจสอบความคมชัดของสี
คำนวณอัตราส่วนความคมชัดของสีข้อความและพื้นหลัง
เลือกสีโดยใช้ตัวเลือกสีสำหรับข้อความและพื้นหลัง หรือลองใส่สีในรูปแบบ RGB hexadecimal (เช่น #259 หรือ #2596BE) สามารถปรับสไลด์เดอร์เพื่อเลือกสีได้ แนวทางของการเข้าถึงเนื้อหาเว็บ (WCAG) มีแนวทางเฉพาะเพื่อช่วยระบุว่าข้อความอ่านง่ายสำหรับผู้ใช้ที่มองเห็นได้หรือไม่ เกณฑ์นี้ใช้วิธีการแยกแยะสีเป็นอัตราส่วนที่เทียบได้ โดยใช้สูตรนี้ WCAG ระบุว่าอัตราส่วนความคอนทราสต์สี 4.5:1 ระหว่างข้อความและพื้นหลังนั้นเพียงพอสำหรับข้อความทั่วไป และข้อความใหญ่ (18+ pt ปกติ, หรือ 14+ pt หนา) ควรมีอัตราส่วนความคอนทราสต์อย่างน้อย 3:1
คุณสมบัติหลัก
- การคำนวณอัตราส่วนความคมชัดแบบเรียลไทม์
- การตรวจสอบความสอดคล้องกับ WCAG AA & AAA
- แถบเลื่อน HSL สำหรับการปรับแต่ง
- รูปแบบการแสดงตัวอย่างหลายแบบ
เครื่องมือขั้นสูง
- การแก้ไขสีอัตโนมัติ
- ตัวอย่างข้อความและพื้นหลัง
- การตรวจจับชื่อสี
- ส่งออกผลลัพธ์