วิธีใช้งาน ตัวตรวจสอบคอนทราสต์สี
- 1
ป้อนสีสองสี
พิมพ์สีข้อความและสีพื้นหลังเป็น HEX, rgb(), hsl() หรือ oklch() หรือเปิดช่องสีวงกลมเพื่อเลือกสี
- 2
อ่านผลการตรวจ
อัตราส่วนและแถวผ่านหรือไม่ผ่านทั้งห้าแถวจะแสดงระดับ AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่ รวมถึงกฎ 3:1 สำหรับไอคอนและเส้นขอบ
- 3
ใช้วิธีแก้
หากระดับใดไม่ผ่าน ให้ใช้สีข้อความหรือสีพื้นหลังที่เข้มขึ้นหรือสว่างขึ้นที่ใกล้เคียงที่สุดและผ่านเกณฑ์ แล้วคัดลอกค่าสีใหม่
ข้อจำกัดและ Pro
ฟรีและไม่จำกัด: ตรวจได้กี่ครั้งก็ได้ 5 เกณฑ์ WCAG 2.2 ต่อคู่สี วิธีแก้ที่แนะนำ 2 แบบต่อระดับที่ไม่ผ่าน และตารางสีสูงสุด 7 สี
เกี่ยวกับ ตัวตรวจสอบคอนทราสต์สี
ตัวตรวจสอบคอนทราสต์นี้วัดว่าสีสองสีต่างกันด้านความสว่างมากเพียงใด โดยใช้สูตรความสว่างสัมพัทธ์ของ WCAG 2.2 ซึ่งเป็นการคำนวณเดียวกับที่การตรวจสอบการเข้าถึงในเบราว์เซอร์และปลั๊กอินสำหรับนักออกแบบใช้ ผลลัพธ์เป็นอัตราส่วนระหว่าง 1:1 (สีเหมือนกัน) ถึง 21:1 (ดำบนขาว) เกณฑ์ความสำเร็จข้อ 1.4.3 กำหนด 4.5:1 สำหรับข้อความเนื้อหาและ 3:1 สำหรับข้อความขนาดใหญ่ที่ระดับ AA ส่วนข้อ 1.4.6 เพิ่มเป็น 7:1 และ 4.5:1 สำหรับ AAA และข้อ 1.4.11 กำหนด 3:1 สำหรับองค์ประกอบที่ไม่ใช่ข้อความแต่มีความหมาย เช่น กรอบโฟกัส เส้นขอบช่องกรอก และเส้นในแผนภูมิ
ตัวอย่างสดจะแสดงข้อความทั้งสองขนาด ปุ่มแบบมีเส้นขอบ และไอคอนด้วยสีของคุณ จึงดูความอ่านง่ายได้นอกเหนือจากตัวเลข อัตราส่วนจะตัดทศนิยมเหลือสองตำแหน่งแทนการปัดเศษ เพราะคู่สีที่ 4.496:1 ไม่ถึงเกณฑ์ 4.5:1 เมื่อระดับใดไม่ผ่าน ตัวตรวจสอบจะค้นหาค่าความสว่าง OKLCH ของสีหนึ่งโดยคงเฉดสีและความเข้มสี แล้วเสนอค่าที่ใกล้เคียงที่สุดที่ผ่าน แยกกันสำหรับข้อความและพื้นหลัง
ตัวตรวจสอบนี้ใช้กับสีทึบ ไม่สามารถประเมินข้อความบนรูปภาพหรือการไล่สี ความโปร่งใส การแสดงผลน้ำหนักฟอนต์บนหน้าจอเฉพาะรุ่น หรือวิธี APCA ที่เสนอสำหรับ WCAG 3 ดังนั้นให้ถือว่าผ่านคือเกณฑ์ขั้นต่ำ และทดสอบบนหน้าจอจริงด้วย
ความเป็นส่วนตัว
สีทั้งสองอยู่ในแท็บนี้เท่านั้น อัตราส่วน การตรวจผ่านหรือไม่ผ่าน และวิธีแก้ที่แนะนำคำนวณโดยเบราว์เซอร์ของคุณ ไม่มีการส่งค่าสีไปยังเซิร์ฟเวอร์หรือเก็บไว้