Go Toolstack

ตัวตรวจสอบคอนทราสต์สี WCAG

ตรวจสอบอัตราส่วนความเปรียบต่างระหว่างสีข้อความและสีพื้นหลังตามเกณฑ์การเข้าถึง WCAG 2.1 AA/AAA

ตัวตรวจสอบคอนทราสต์สี WCAG

ตรวจสอบอัตราส่วนความเปรียบต่างระหว่างสีข้อความและสีพื้นหลังตามเกณฑ์การเข้าถึง WCAG 2.1 AA/AAA

วิธีการทำงาน

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Discover more client side utilities in this category

ศูนย์เครื่องมือนักพัฒนา • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือเครื่องมือนักพัฒนาทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

เครื่องมือนักพัฒนา • ~4 นาทีในการอ่าน

ข้อผิดพลาดไวยากรณ์ JSON ที่พบบ่อย: การตรวจสอบโครงสร้าง คอมมาเกิน และตัวเลข 64-bit | GoToolstack

ทำความเข้าใจข้อผิดพลาดไวยากรณ์ JSON ตามมาตรฐาน RFC 8259 วิธีแก้ไขคอมมาตัวสุดท้าย (Trailing Comma) การใช้เครื่องหมายคำพูดเดี่ยว และการจัดการตัวเลขความแม่นยำสูง 64-bit BigInt

อ่านคู่มือ →
เครื่องมือนักพัฒนา • ~4 นาทีในการอ่าน

ทำไมไฟล์ CSV เปิดใน Excel แล้วสระภาษาไทยเพี้ยนและเลข 0 หาย? วิธีแก้ปัญหา BOM และตัวคั่น | GoToolstack

เจาะลึกสาเหตุที่ไฟล์ CSV แสดงภาษาไทยเพี้ยนใน Microsoft Excel ปัญหาการขาด UTF-8 BOM ตัวคั่นจุลภาคเทียบกับเซมิโคลอน และวิธีป้องกันไม่ให้เลข 0 นำหน้าในรหัสสินค้าหรือเบอร์โทรศัพท์สูญหาย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือตรวจสอบความเปรียบต่างของสีตามมาตรฐาน WCAG คำนวณ Relative Luminance และความพร้อมเข้าถึง

การออกแบบเว็บไซต์และแอปพลิเคชันให้ทุกคนเข้าถึงได้ (Web Accessibility) เป็นมาตรฐานสำคัญ โดยข้อกำหนด WCAG 2.1 กำหนดให้อัตราส่วนความเปรียบต่างของสี (Contrast Ratio) ระหว่างตัวอักษรและพื้นหลังต้องมีความชัดเจนเพียงพอ เพื่อให้ผู้ที่มีสายตาเลือนรางสามารถอ่านเนื้อหาได้อย่างสะดวก

เครื่องมือนี้ช่วยคำนวณอัตราส่วนความเปรียบต่างของสีแบบเรียลไทม์ พร้อมประเมินผลตามเกณฑ์มาตรฐาน WCAG ทั้งระดับ AA (ขั้นต่ำ 4.5:1 สำหรับข้อความปกติ) และระดับ AAA (ขั้นต่ำ 7:1) พร้อมแนะนำการปรับค่าสีให้อ่านง่ายและถูกต้องตามกฎหมายการเข้าถึง ทำงานในเบราว์เซอร์ 100%

สูตรและหลักการทางเทคนิค

Relative Luminance (L) = 0.2126R' + 0.7152G' + 0.0722B' ; Contrast Ratio = (L₁ + 0.05) / (L₂ + 0.05)

แปลงช่องสัญญาณสี sRGB เข้าสู่ปริภูมิสีเชิงเส้น คำนวณความสว่างสัมพัทธ์ และประเมินอัตราส่วนความเปรียบต่างบนมาตรวัดตั้งแต่ 1:1 (ไม่มีความเปรียบต่าง) ถึง 21:1 (ความเปรียบต่างสูงสุด)

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • ยึดเกณฑ์มาตรฐาน WCAG ระดับ AA เป็นเกณฑ์พื้นฐาน: ข้อความขนาดปกติ (ต่ำกว่า 18pt หรือ 24px) ต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 4.5:1 ส่วนข้อความขนาดใหญ่ต้องมีอย่างน้อย 3:1
  • อย่าลืมตรวจสอบองค์ประกอบอินเทอร์เฟซและไอคอน (Non-text Contrast): ปุ่มกด ไอคอน และเส้นขอบของฟิลด์กรอกข้อมูลต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 3:1 เทียบกับพื้นหลังที่อยู่ติดกัน
  • ระวังการใช้สีเทาอ่อนบนพื้นหลังสีขาว: แม้ว่าข้อความสีเทาอ่อนจะดูมินิมอลในมุมมองของนักออกแบบ แต่ส่วนใหญ่มักไม่ผ่านเกณฑ์ WCAG และทำให้อ่านยากมากเมื่ออยู่กลางแจ้ง
  • ทดสอบทั้งในโหมดสว่างและโหมดมืด (Light & Dark Themes): สลับตรวจสอบสีของข้อความและพื้นหลังทั้งสองโหมดเพื่อให้แน่ใจว่าอ่านง่ายในทุกสภาพแวดล้อมการใช้งาน

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

ความแตกต่างระหว่างเกณฑ์ WCAG ระดับ AA และ AAA คืออะไร?
ระดับ AA เป็นเกณฑ์มาตรฐานสากลที่กฎหมายและองค์กรส่วนใหญ่กำหนด (ต้องมีอัตราส่วนอย่างน้อย 4.5:1 สำหรับข้อความทั่วไป) ส่วนระดับ AAA เป็นเกณฑ์ขั้นสูงสุดที่เข้มงวดเป็นพิเศษ (ต้องมีอัตราส่วนอย่างน้อย 7:1)
ข้อความขนาดใหญ่ (Large Text) ตามเกณฑ์ WCAG กำหนดไว้อย่างไร?
กำหนดเป็นข้อความที่มีขนาดตั้งแต่ 18pt (ประมาณ 24px) ขึ้นไป หรือข้อความตัวหนาที่มีขนาดตั้งแต่ 14pt (ประมาณ 18.5px) ขึ้นไป ซึ่งอนุโลมให้อัตราส่วนลดลงมาอยู่ที่ 3:1 ได้
อัตราส่วนความเปรียบต่างสูงสุดที่เป็นไปได้คือเท่าใด?
อัตราส่วน 21:1 ซึ่งเกิดขึ้นเมื่อใช้ข้อความสีดำสนิท (#000000) บนพื้นหลังสีขาวบริสุทธิ์ (#FFFFFF)
เครื่องมือนี้สามารถคำนวณค่าสีในระบบใดได้บ้าง?
รองรับทั้งรหัสสีฐานสิบหก (Hex), RGB, และ HSL โดยระบบจะแปลงเป็น Relative Luminance เพื่อคำนวณอัตราส่วนมาตรฐานให้อัตโนมัติ