ตรวจสอบ Contrast Ratio ออนไลน์

สีตัวอักษร (Foreground)

สีพื้นหลัง (Background)

Contrast Ratio

17.40:1

ผลตรวจ WCAG

WCAG AAผ่าน

WCAG AAAผ่าน

WCAG AA (ใหญ่)ผ่าน

WCAG AAA (ใหญ่)ผ่าน

ตัวอย่าง

ข้อความปกติ (16px)

ข้อความใหญ่ (24px)

Contrast Checker คืออะไร?

Contrast Checker เป็นเครื่องมือตรวจสอบอัตราส่วนคอนทราสต์ (Contrast Ratio) ระหว่างสีตัวอักษรกับสีพื้นหลัง ตามมาตรฐาน WCAG (Web Content Accessibility Guidelines)

การมี Contrast Ratio ที่เหมาะสมช่วยให้ทุกคนอ่านเนื้อหาบนเว็บได้ง่าย รวมถึงผู้ที่มีปัญหาทางสายตาหรือตาบอดสี

มาตรฐาน WCAG

WCAG AA (ข้อความปกติ) — ต้องมี Contrast Ratio อย่างน้อย 4.5:1
WCAG AA (ข้อความใหญ่ ≥24px) — ต้องมี Contrast Ratio อย่างน้อย 3:1
WCAG AAA (ข้อความปกติ) — ต้องมี Contrast Ratio อย่างน้อย 7:1
WCAG AAA (ข้อความใหญ่ ≥24px) — ต้องมี Contrast Ratio อย่างน้อย 4.5:1

เคล็ดลับและแนวปฏิบัติที่ดี

ตรวจสอบทั้งข้อความปกติ (16px) และข้อความใหญ่ (24px+) เสมอ เพราะมีข้อกำหนด WCAG Ratio ต่างกัน
ใช้ปุ่มสลับสีเพื่อทดสอบสีทั้งสองแบบเป็นพื้นหน้าและพื้นหลังได้อย่างรวดเร็ว
ตั้งเป้า WCAG AAA (7:1) สำหรับเนื้อหาหลักเพื่อ Accessibility สูงสุด แม้ AA (4.5:1) จะเป็นขั้นต่ำตามกฎหมาย
ตรวจ Contrast สำหรับสถานะ Hover, Focus และ Disabled ด้วย ไม่ใช่แค่สถานะปกติ
บันทึกคู่สีที่ผ่านมาตรฐานไว้ใน Style Guide เพื่อให้ Developer ไม่ต้องเดาว่าชุดไหนผ่าน

กรณีใช้งานจริง

tools.contrast.info.useCases.content

ตรวจสอบว่า Label ปุ่มในแอปองค์กรผ่าน WCAG AA ก่อนส่ง Design Handoff ให้ Developer

ตรวจสอบเว็บ E-commerce ที่มีอยู่เพื่อให้ผ่านข้อกำหนด Accessibility ตาม ADA หรือกฎหมายยุโรป

ทดสอบคู่สี Dark Mode สำหรับแอปธนาคารมือถือเพื่อให้อ่านง่ายในสภาพแสงน้อย

ตรวจสอบสี Notification Badge กับพื้นหลังเพื่อให้ผู้ที่ตาบอดสีมองเห็นได้ชัดเจน

ตรวจสอบสีข้อความในอีเมลการตลาดกับ Template พื้นหลังเพื่อการแสดงผลที่สม่ำเสมอทุก Email Client

เคล็ดลับและแนวปฏิบัติที่ดี

tools.contrast.info.tips.content

ตรวจสอบทั้งข้อความปกติ (16px) และข้อความใหญ่ (24px+) เสมอ เพราะมีข้อกำหนด WCAG Ratio ต่างกัน

ใช้ปุ่มสลับสีเพื่อทดสอบสีทั้งสองแบบเป็นพื้นหน้าและพื้นหลังได้อย่างรวดเร็ว

ตั้งเป้า WCAG AAA (7:1) สำหรับเนื้อหาหลักเพื่อ Accessibility สูงสุด แม้ AA (4.5:1) จะเป็นขั้นต่ำตามกฎหมาย

ตรวจ Contrast สำหรับสถานะ Hover, Focus และ Disabled ด้วย ไม่ใช่แค่สถานะปกติ

บันทึกคู่สีที่ผ่านมาตรฐานไว้ใน Style Guide เพื่อให้ Developer ไม่ต้องเดาว่าชุดไหนผ่าน

ข้อผิดพลาดที่พบบ่อย

tools.contrast.info.commonMistakes.content

คิดว่า Placeholder สีเทาอ่อน (#999 บน #fff) อ่านง่าย แต่จริงๆ ได้แค่ 2.85:1 ซึ่งไม่ผ่าน WCAG ทุกระดับ

ตรวจแค่ Contrast พื้นหน้า/พื้นหลัง โดยลืมตรวจ Focus Ring และ Border กับ Element รอบข้าง

ใช้แค่สีบ่งบอกข้อผิดพลาดของฟอร์มโดยไม่มี Label ข้อความ ซึ่งผู้ที่ตาบอดสีจะไม่เห็นเลย

ทดสอบ Contrast บนจอความสว่างสูง โดยลืมว่าผู้ใช้ส่วนใหญ่ดูเนื้อหาบนจอที่มืดกว่าและไม่ได้ปรับสี

เปรียบเทียบกับเครื่องมืออื่น

ต่างจาก WebAIM Contrast Checker ที่ต้องไปเว็บภายนอก เครื่องมือนี้อยู่คู่กับ Color Picker และ Palette Generator สำหรับ Workflow การออกแบบที่ต่อเนื่อง

Chrome DevTools แจ้งปัญหา Contrast เฉพาะ Element ที่มีอยู่แล้วบนหน้า แต่เครื่องมือนี้ให้ทดสอบคู่สีได้ตั้งแต่ขั้นตอนออกแบบก่อนเขียนโค้ดใดๆ

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

Contrast Ratio คืออัตราส่วนความสว่างระหว่างสีด้านหน้ากับสีพื้นหลัง มีค่าตั้งแต่ 1:1 (เหมือนกัน) ถึง 21:1 (ขาว-ดำ) ยิ่งสูงยิ่งอ่านง่าย

AA เป็นระดับขั้นต่ำที่แนะนำ (4.5:1 สำหรับข้อความปกติ) AAA เป็นระดับสูงสุด (7:1) เหมาะสำหรับเว็บที่ต้องการ Accessibility สูง

เพื่อให้ทุกคนอ่านเนื้อหาได้ รวมถึงผู้สูงอายุ ผู้มีปัญหาสายตา และผู้ใช้ที่ดูจอในที่มีแสงจ้า Contrast ที่ดียังช่วย SEO

ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไป

ใช้สูตร (L1 + 0.05) / (L2 + 0.05) โดย L1 คือ Relative Luminance ของสีที่สว่างกว่า L2 คือสีที่มืดกว่า ตามมาตรฐาน WCAG 2.1

WCAG 2.1 กำหนดให้ Non-text Element ที่มีความหมาย เช่น ไอคอน ขอบ Input กราฟ ต้องมี Contrast อย่างน้อย 3:1 ส่วนข้อความใช้ 4.5:1 และ 7:1

Placeholder ควรผ่านอย่างน้อย 4.5:1 แต่หลายดีไซน์ใช้สีเทาอ่อนที่ไม่ผ่าน ควรใช้ขั้นต่ำ 3:1 ร่วมกับ Label เสริม

กฎหมายส่วนใหญ่ เช่น ADA และ EN 301 549 กำหนดให้ผ่าน WCAG AA ส่วน AAA แนะนำเพื่อ Accessibility สูงสุดแต่ไม่ได้บังคับตามกฎหมาย

อ้างอิง

WCAG 2.1 — Web Content Accessibility Guidelines (w3.org)
MDN Web Docs — Color Contrast (developer.mozilla.org)
WebAIM — Contrast Checker (webaim.org)

เครื่องมือนี้คำนวณ Contrast Ratio ตามมาตรฐาน WCAG 2.1 ผลลัพธ์เป็นเพียงแนวทาง ควรทดสอบกับผู้ใช้จริงด้วย

เครื่องมือที่เกี่ยวข้อง

เลือกสี Color Picker

เลือกสีออนไลน์ แปลง HEX RGB HSL คัดลอกโค้ดสีไปใช้ได้ทันที

สร้าง Gradient

สร้าง CSS Gradient สีไล่ระดับออนไลน์ เลือกสี ทิศทาง คัดลอก CSS

คำนวณ BMI

คำนวณค่าดัชนีมวลกาย (BMI) เพื่อประเมินรูปร่างและความเสี่ยงด้านสุขภาพ

ดูเครื่องมือสี/ดีไซน์ทั้งหมด