ตรวจ Contrast สี ตามมาตรฐาน WCAG

ตรวจสอบว่าสีข้อความและสีพื้นหลังของคุณผ่านมาตรฐานการเข้าถึง WCAG หรือไม่ เพียงเลือกสองสีด้วยเครื่องมือเลือกสีหรือกรอกรหัสเฮกซ์ ระบบจะแสดงค่าคอนทราสต์ทันที พร้อมผลผ่านหรือไม่ผ่านระดับ AA และ AAA ทั้งข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI มีตัวอย่างสดแสดงข้อความจริงในสีของคุณ และแปลงทุกสีเป็น HEX RGB HSL พร้อมสีอ่อนและสีเข้ม ทำงานในเบราว์เซอร์ ฟรีและเป็นส่วนตัว

สีข้อความ (พื้นหน้า) *

กรอกรหัสสีเฮกซ์ เช่น #1D5BD8 หรือ #FFF หรือใช้เครื่องมือเลือกสี

สีพื้นหลัง *

กรอกรหัสสีเฮกซ์ เช่น #1D5BD8 หรือ #FFF หรือใช้เครื่องมือเลือกสี

ผลลัพธ์จะแสดงที่นี่

เลือกสีข้อความและสีพื้นหลังเพื่อตรวจค่าคอนทราสต์

ตัวอย่างสด

ตัวอย่างหัวข้อขนาดใหญ่

นี่คือข้อความเนื้อหาขนาดปกติ ลองตรวจดูว่าอ่านสบายตาบนพื้นหลังนี้หรือไม่ก่อนนำไปใช้งานจริง

ค่าคอนทราสต์

—

ผลตามมาตรฐาน WCAG 2.1

ระดับ	ค่าขั้นต่ำ	ผลลัพธ์
AA · ข้อความปกติ	4.5:1
AA · ข้อความขนาดใหญ่	3:1
AAA · ข้อความปกติ	7:1
AAA · ข้อความขนาดใหญ่	4.5:1
องค์ประกอบ UI และกราฟิก	3:1

ข้อความขนาดใหญ่ = 18pt (24px) ตัวปกติ หรือ 14pt (18.66px) ตัวหนาขึ้นไป

สีข้อความ

HEX
RGB
HSL

สีอ่อนและสีเข้ม (คลิกเพื่อใช้)

สีพื้นหลัง

HEX
RGB
HSL

สีอ่อนและสีเข้ม (คลิกเพื่อใช้)

วิธีใช้งาน

เลือกสีข้อความ (พื้นหน้า) จากช่องสี หรือพิมพ์รหัสเฮกซ์ เช่น #1D5BD8
เลือกสีพื้นหลังด้วยวิธีเดียวกัน หรือกดสลับสีเพื่อกลับด้าน
ดูค่าคอนทราสต์และป้ายผ่าน/ไม่ผ่านระดับ AA และ AAA ทั้งข้อความปกติและขนาดใหญ่
ใช้ตัวอย่างสดเพื่อดูว่าข้อความอ่านง่ายบนพื้นหลังจริงหรือไม่
คลิกสีอ่อนหรือสีเข้มเพื่อใช้เฉดที่ผ่านมาตรฐาน แล้วคัดลอกสรุปผล

ฟีเจอร์เด่น

คำนวณค่าคอนทราสต์ WCAG 2.1 พร้อมผลระดับ AA, AAA และองค์ประกอบ UI
แยกตรวจข้อความปกติ ข้อความขนาดใหญ่ และวัตถุกราฟิก
ตัวอย่างสดของหัวข้อและข้อความเนื้อหาในสีจริงของคุณ
แปลงค่าสี HEX, RGB และ HSL ของทั้งสองสี
ตัวอย่างสีอ่อนและสีเข้มที่คลิกเพื่อใช้งานได้ทันที
ทำงานในเบราว์เซอร์ 100% — สีของคุณไม่ถูกส่งออกจากเครื่อง

คำถามที่พบบ่อย

ค่าคอนทราสต์สีเท่าไรจึงถือว่าผ่านมาตรฐาน?

WCAG 2.1 กำหนดว่าข้อความปกติต้องมีค่าอย่างน้อย 4.5:1 และข้อความขนาดใหญ่อย่างน้อย 3:1 จึงผ่านระดับ AA ส่วนระดับ AAA ต้องมี 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ ส่วนองค์ประกอบ UI ต้องมีอย่างน้อย 3:1

ข้อความขนาดใหญ่ตามมาตรฐาน WCAG คือขนาดเท่าไร?

ข้อความขนาดใหญ่คือขนาด 18pt (ประมาณ 24px) ขึ้นไปสำหรับตัวปกติ หรือ 14pt (ประมาณ 18.66px) ขึ้นไปสำหรับตัวหนา เพราะตัวอักษรใหญ่อ่านง่ายกว่าจึงกำหนดค่าคอนทราสต์ต่ำกว่า

ค่าคอนทราสต์คำนวณอย่างไร?

คำนวณจากความสว่างสัมพัทธ์ของสองสีตามสูตรของ WCAG คือ (สีสว่างกว่า + 0.05) หารด้วย (สีเข้มกว่า + 0.05) ค่าจะอยู่ระหว่าง 1:1 เมื่อสีเหมือนกัน ไปจนถึง 21:1 เมื่อเป็นสีดำล้วนบนขาวล้วน

ระดับ AA กับ AAA ต่างกันอย่างไร?

AA เป็นระดับมาตรฐานที่เว็บไซต์และกฎหมายส่วนใหญ่ใช้ กำหนด 4.5:1 สำหรับข้อความเนื้อหา ส่วน AAA เป็นระดับสูงกว่าที่ต้องการ 7:1 เหมาะกับงานที่ต้องอ่านง่ายที่สุด แต่อาจทำได้ยากในทุกดีไซน์

เครื่องมือนี้ส่งค่าสีของฉันไปเซิร์ฟเวอร์ไหม?

ไม่ ทุกการคำนวณทำงานในเบราว์เซอร์ด้วย JavaScript ทั้งหมด ค่าสีของคุณไม่ถูกอัปโหลด จึงตรวจสอบสีแบรนด์หรือชุดสีที่ยังไม่เผยแพร่ได้อย่างเป็นส่วนตัวและออฟไลน์