ตรวจคอนทราสต์สี
ใส่สองสีแล้วดูอัตราส่วนคอนทราสต์ WCAG พร้อมคำแนะนำ AA และ AAA ทันที
ใส่สีตัวอักษรและพื้นหลังในรูปแบบ hex หรือ RGB เพื่อคำนวณอัตราส่วนคอนทราสต์ WCAG ทันที ดูผล AA/AAA ตัวอย่างข้อความ และคำแนะนำการปรับเพิ่มเติม
วิธีใช้เครื่องมือตรวจคอนทราสต์สี
พิมพ์หรือวางสีตัวอักษรและพื้นหลัง เครื่องมือจะแปลงค่าที่ถูกต้องเป็น hex ตัวพิมพ์ใหญ่ คำนวณอัตราส่วนคอนทราสต์ WCAG ทันที และแสดงผ่าน/ไม่ผ่านสำหรับเกณฑ์ AA และ AAA ใช้แนะนำการแก้ไข แชร์ผ่าน URL หรือรีเซ็ต
เกณฑ์อัตราส่วนคอนทราสต์ WCAG
WCAG 2.x กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติ (AA) 3:1 สำหรับข้อความใหญ่ (AA) 7:1 สำหรับข้อความปกติ (AAA) และ 4.5:1 สำหรับข้อความใหญ่ (AAA) เครื่องมือนี้แสดงผลทั้งสี่เสมอ
รูปแบบสีที่รองรับ
ใส่ #RGB, #RRGGBB, rgb(r,g,b) หรือ r,g,b คั่นด้วยจุลภาค ช่องต้องเป็นจำนวนเต็ม 0–255 ไม่รองรับความโปร่งใส alpha hex 8 หลัก HSL/HSLA และสีชื่อ CSS ใน v1
ความหมายของผ่านและไม่ผ่าน
ผ่านหมายถึงอัตราส่วนที่คำนวณได้ตรงหรือเกินเกณฑ์ของระดับนั้น ไม่ผ่านหมายถึงไม่ถึงเกณฑ์ มีป้ายกำกับและไอคอนประกอบสีเพื่อให้เข้าใจได้โดยไม่พึ่งสีอย่างเดียว
คำถามที่พบบ่อย
ทำไมไม่รองรับ alpha และไล่เฉด?
เวอร์ชัน 1 ประเมินเฉพาะสี sRGB ทึบเท่านั้น การผสม alpha และไล่เฉดต้องใช้กฎการผสมที่เครื่องมือยังไม่ได้สร้างแบบจำลอง ดังนั้น rgba() hex 8 หลัก และการวิเคราะห์ไล่เฉดจึงอยู่นอกขอบเขต MVP
คำนวณอัตราส่วนคอนทราสต์อย่างไร?
ใช้สูตรความสว่างสัมพัทธ์ WCAG สำหรับ sRGB ทึบ: ทำให้แต่ละช่องเป็นเชิงเส้น คำนวณความสว่าง แล้วใช้ (สว่างกว่า + 0.05) / (มืดกว่า + 0.05) แสดงทศนิยมสองตำแหน่ง การตรวจเกณฑ์ใช้ค่าเต็ม
แนะนำการแก้ไขทำอะไร?
เลื่อนสีตัวอักษรหรือพื้นหลังที่เลือกตามเส้นทางความสว่างไปทางดำหรือขาวจนถึงระดับ WCAG ที่เลือก และคืนค่า hex ที่เป็นไปตามมาตรฐานที่ใกล้ที่สุดพร้อมอัตราส่วนที่ได้หากมี
แชร์คู่สีเฉพาะได้ไหม?
ได้ ค่าตัวอักษร พื้นหลัง และขนาดข้อความที่ถูกต้องจะซิงก์ไปยังพารามิเตอร์ URL (เช่น ?fg=000000&bg=FFFFFF&size=normal) เพื่อลิงก์ไปยังผลลัพธ์โดยตรง
หน้าเว็บเก็บสีของฉันไหม?
การคำนวณทำงานทั้งหมดในเบราว์เซอร์ คู่สีที่ถูกต้องล่าสุดอาจถูกเก็บใน localStorage เพื่อความสะดวก ใช้รีเซ็ตเพื่อล้างการป้อน พารามิเตอร์ URL และสถานะที่เก็บไว้