เครื่องตรวจสอบคอนทราสต์ OKLCH
ตรวจสอบอัตราส่วนคอนทราสต์สี WCAG 2.x ด้วยการควบคุม OKLCH และ OKLab สด ทดสอบคู่สีพื้นหน้า/พื้นหลังว่าผ่าน AA/AAA หรือไม่ พร้อมดู OKLab Delta-E เครื่องมือความเข้าถึงฟรีในเบราว์เซอร์สำหรับดีไซเนอร์และนักพัฒนา
Loading tool...
เครื่องตรวจสอบคอนทราสต์ OKLCH คืออะไร?
เครื่องตรวจสอบคอนทราสต์ OKLCH เป็นเครื่องมือ accessibility ฟรีในเบราว์เซอร์ที่ประเมินคอนทราสต์ของสีระหว่างสีพื้นหน้า (ตัวอักษร) และสีพื้นหลังโดยใช้สองค่าที่เสริมกัน: อัตราส่วนคอนทราสต์ relative-luminance ตาม WCAG 2.x อย่างเป็นทางการ และระยะห่างสี OKLab Delta-E แบบรับรู้ ต่างจากเครื่องมือตรวจคอนทราสต์ทั่วไปเพราะให้คุณปรับแต่ละสีใน OKLCH color space ที่ uniform ตามการรับรู้ด้วย slider Lightness, Chroma และ Hue ทำให้เห็นชัดว่าการเปลี่ยน L, C หรือ H อย่างสม่ำเสมอส่งผลต่อการเข้าถึงอย่างไร ผลลัพธ์อัปเดตสดทั้งอัตราส่วน WCAG, ป้ายผ่าน/ไม่ผ่าน AA/AAA สำหรับข้อความปกติ ข้อความใหญ่ และออบเจกต์กราฟิก และพรีวิวสดขององค์ประกอบ UI จริง การคำนวณสีทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยไม่ส่งข้อมูลออกไป
ประโยชน์หลัก
- ผสานอัตราส่วน WCAG 2.x อย่างเป็นทางการเข้ากับ OKLab Delta-E แบบรับรู้ ให้ประเมินคอนทราสต์ตามที่ตามองเห็น
- แก้สีใน OKLCH ที่ขั้น Lightness เท่ากันดูต่างกันเท่า ๆ กันทั้งวงสี
- ตารางผล AA/AAA ครอบคลุมข้อความปกติ ข้อความใหญ่ และออบเจกต์กราฟิกในมุมมองเดียวที่อ่านง่าย
- พรีวิวสดเรนเดอร์ปุ่มจริง ปุ่มขอบ และข้อความเนื้อหา ให้เห็นผลลัพธ์ในบริบทจริง
- 100% ฝั่งไคลเอนต์ ไม่มีการเรียก network ไม่ต้องสมัครสมาชิก และรองรับออฟไลน์เต็มรูปแบบ
กรณีการใช้งาน
- •การตรวจ accessibility: ตรวจสอบคู่สีพื้นหน้า/พื้นหลังว่าผ่าน WCAG 2.1/2.2 AA หรือ AAA ก่อนส่งมอบ
- •design system: ปรับ OKLCH Lightness ramp เพื่อรักษาคอนทราสต์ตามการรับรู้ทั่วทั้ง palette
- •CSS สมัยใหม่: เลือกค่า oklch() ที่ผ่านคอนทราสต์โดยยังคงความสม่ำเสมอตามการรับรู้
- •คลัง component: ตรวจสอบสีปุ่ม ปุ่มขอบ และข้อความเทียบกับทั้ง WCAG และ Delta-E
- •การศึกษา: สาธิตว่าระยะ OKLab ตามการรับรู้ต่างจากอัตราส่วน luminance WCAG อย่างไร
วิธีใช้เครื่องตรวจสอบคอนทราสต์ OKLCH
- กรอกหรือเลือกสี: พิมพ์ hex code, ใช้ color picker แบบ native หรือลาก slider OKLCH Lightness, Chroma และ Hue สำหรับสีพื้นหน้าและพื้นหลัง ทุกอย่างอัปเดตสด
- อ่านอัตราส่วนคอนทราสต์: ตัวเลขใหญ่แสดงอัตราส่วนคอนทราสต์ WCAG 2.x (เช่น 7.2:1) ข้าง ๆ คือ OKLab Delta-E ที่วัดระยะห่างสีตามการรับรู้ระหว่างสีทั้งสอง
- ตรวจตาราง AA/AAA: ตารางผลแสดงผ่าน/ไม่ผ่านสำหรับ WCAG AA และ AAA ในข้อความปกติ ข้อความใหญ่ และออบเจกต์กราฟิก สีเขียวคือผ่าน สีแดงคือไม่ผ่าน
- พรีวิวและคัดลอก: เลื่อนไปที่พรีวิวสดเพื่อดูปุ่มและข้อความเนื้อหาจริง ใช้คัดลอกอัตราส่วนเพื่อเก็บค่าคอนทราสต์ หรือสลับและสุ่มเพื่อสำรวจทางเลือกอย่างรวดเร็ว
คุณสมบัติหลัก
- วัดคอนทราสต์สองระบบ: อัตราส่วน WCAG 2.x อย่างเป็นทางการ และ OKLab Delta-E ที่อิงการรับรู้สำหรับทุกคู่สี
- slider OKLCH (Lightness, Chroma, Hue) บนแต่ละสี พร้อมซิงค์ hex สองทิศทางแบบสด
- color picker แบบ native และช่อง hex ให้นำเข้าสีเดิมหรือออกแบบสีใหม่ใน OKLCH ได้
- ตารางผล AA/AAA ครอบคลุมข้อความปกติ ข้อความใหญ่ และออบเจกต์กราฟิก (WCAG 2.1/2.2)
- ปุ่มสลับ สุ่ม คัดลอกอัตราส่วน และพรีวิวสดของปุ่มและข้อความเนื้อหาในบริบทจริง