ข้ามไปยังเครื่องมือ
JoeLucky

กด ★ ที่เครื่องมือเพื่อบันทึก

หมวดหมู่เครื่องมือ

แปลงโค้ดเป็นรูปภาพสร้างไล่สี CSSGlassmorphism CSSสร้าง Box Shadowสร้าง CSS Loaderสร้าง SVG BlobSVG เป็น PNGตรวจความต่างสีแปลง PX / REM / EM
JoeLucky

เครื่องมือออนไลน์ที่ใช้งานได้จริง รวมไว้ในที่เดียว

นโยบายความเป็นส่วนตัวข้อกำหนดการให้บริการ

© 2026 JoeLucky®. สงวนลิขสิทธิ์

  1. JoeLucky
  2. /CSS และการออกแบบ
  3. /ตรวจความต่างสี

ตรวจความต่างสี

ตรวจอัตราส่วนความต่างสี WCAG ระหว่างสองสี และดูผลผ่านหรือไม่ผ่านระดับ AA และ AAA

CSS และการออกแบบ ที่คล้ายกัน

ดูทั้งหมด
แปลงโค้ดเป็นรูปภาพ

เปลี่ยนโค้ดสั้น ๆ ให้เป็นภาพหน้าจอที่สวยงาม

เปิด →
สร้างไล่สี CSS

ออกแบบไล่สีแบบเส้นตรง วงกลม และกรวยด้วยภาพ แล้วคัดลอก CSS ได้ทันที

เปิด →
Glassmorphism CSS

💬 ความคิดเห็น

?

ยังไม่มีความคิดเห็น มาเป็นคนแรกกันเลย!

ตรวจความต่างสี คืออะไร?

ตัวตรวจสอบความต่างสีคำนวณอัตราส่วนความต่างระหว่างสีพื้นหน้าและสีพื้นหลังด้วยสูตร WCAG โดยระบุสถานะผ่าน AA/AAA สำหรับข้อความปกติและข้อความขนาดใหญ่

สำคัญ

  1. ผ่าน/ไม่ผ่านแสดงด้วยทั้งข้อความและไอคอนเสมอ — ไม่สื่อด้วยสีเพียงอย่างเดียว
  2. เครื่องมือนี้ตรวจสอบเพียงคู่สีเดียว — ผ่านไม่ได้หมายความว่าทั้งหน้าเป็นไปตาม WCAG

ใช้งานอย่างไร?

  1. เลือกสีพื้นหน้าและสีพื้นหลัง (ตัวอย่างสีหรือกรอกค่า hex)
  2. ตรวจตัวอย่างสดและผลความต่างสี

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

ผ่าน AA แปลว่าหน้าเว็บของฉันเป็นไปตาม WCAG หรือไม่?

ไม่จำเป็น เครื่องมือนี้รายงานเฉพาะการคำนวณอัตราส่วนคอนทราสต์ดิบและผ่าน/ไม่ผ่านตามเกณฑ์ทั้งสี่ — การเป็นไปตาม WCAG จริงยังขึ้นกับขนาดตัวอักษร ความหนา และการออกแบบโดยรวมของคุณ

ทำไมผ่าน/ไม่ผ่านจึงไม่แสดงด้วยสีอย่างเดียว?

การใช้สีอย่างเดียว (เช่น จุดสีเขียวหรือแดง) ผู้ที่ตาบอดสีเข้าถึงไม่ได้ ดังนั้นทุกเกณฑ์จะแสดงทั้งไอคอนและป้ายข้อความ (ผ่าน/ไม่ผ่าน) เสมอ

พื้นหลังกึ่งโปร่งใสจัดการอย่างไร?

พื้นหลังโปร่งใสต้องมีสี “พื้นหลังแคนวาส” ที่ทึบเพิ่มเติม — เครื่องมือใช้ตรรกะการซ้อนสีที่มีอยู่ในแกนหลักเพื่อคำนวณสีทึบที่ได้ก่อนคำนวณคอนทราสต์

ข้อความตัวอย่าง — เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
18.88:1อัตราส่วนความต่างสี (สูตร WCAG)
ข้อความปกติ AA (≥ 4.5:1)ผ่าน
ข้อความปกติ AAA (≥ 7:1)ผ่าน
ข้อความขนาดใหญ่ AA (≥ 3:1)ผ่าน
ข้อความขนาดใหญ่ AAA (≥ 4.5:1)ผ่าน

เครื่องมือนี้รายงานเพียงผลดิบของสูตรอัตราส่วนความต่างสี WCAG และผ่าน/ไม่ผ่านตามเกณฑ์ทั้งสี่ ไม่ได้หมายความว่า «หน้านี้ตรงตาม WCAG» การปฏิบัติตามจริงยังขึ้นกับขนาดตัวอักษร ความหนา และส่วนอื่นของงานออกแบบ

สร้างโค้ดเบลอพื้นหลังและขอบโปร่งแสงแบบเรียลไทม์

เปิด →