nicetool.dev logo

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

เลือกหรือพิมพ์สองสี (HEX, RGB, HSL หรือชื่อสี) ผลลัพธ์อัปเดตขณะพิมพ์

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

4.83:1

หัวข้อตัวอักษรใหญ่

ข้อความเนื้อหาปกติขนาด 16px มีลักษณะแบบนี้

ตัวอักษรเล็กและคำบรรยายขนาด 14px

ปุ่ม
  • AA ข้อความปกติ ≥ 4.5:1 ผ่าน
  • AA ข้อความใหญ่ (24px หรือ 18.66px ตัวหนา) ≥ 3:1 ผ่าน
  • AAA ข้อความปกติ ≥ 7:1 ไม่ผ่าน
  • AAA ข้อความใหญ่ ≥ 4.5:1 ผ่าน
  • องค์ประกอบ UI และกราฟิก ≥ 3:1 ผ่าน

คอนทราสต์สีคืออะไรและสำคัญอย่างไร?

อัตราส่วนคอนทราสต์วัดความต่างของความสว่างที่ตารับรู้ระหว่างสองสี ตั้งแต่ 1:1 (เหมือนกัน) ถึง 21:1 (ดำบนขาว) แนวทาง WCAG 2.2 ระดับ AA กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่และองค์ประกอบ UI ส่วนระดับ AAA คือ 7:1 และ 4.5:1 ผู้ชายราวหนึ่งในสิบสองคนมีภาวะบกพร่องในการมองเห็นสี และหลายคนอ่านมือถือกลางแดดจ้า ข้อความคอนทราสต์ต่ำจึงกีดกันผู้ใช้จริง กฎหมายด้านการเข้าถึงอย่าง European Accessibility Act และ ADA อ้างอิง WCAG AA ทำให้คอนทราสต์เป็นข้อกำหนดทางกฎหมายสำหรับหลายเว็บไซต์

ฟีเจอร์

  • • อัตราส่วนคอนทราสต์พร้อมผล WCAG 2.2 AA และ AAA สำหรับข้อความและ UI
  • • รองรับ HEX, RGB, HSL, OKLCH และชื่อสี CSS พร้อมตัวเลือกสี
  • • จัดการสีโปร่งใสด้วยการผสมสีแบบเดียวกับเบราว์เซอร์
  • • ตัวอย่างสดพร้อมหัวข้อ เนื้อหา ตัวอักษรเล็ก และปุ่ม
  • • แนะนำสีที่ใกล้ที่สุดที่ผ่านเกณฑ์ โดยปรับเฉพาะความสว่าง

ทันทีและเป็นส่วนตัว

การคำนวณทั้งหมดทำในเบราว์เซอร์ สีของงานออกแบบที่ยังไม่เปิดตัวจะไม่ถูกส่งไปที่ใด

สูตร WCAG 2.2 ฝั่งไคลเอนต์ 100%

วิธีใช้ ตรวจคอนทราสต์สี

  1. 1

    ใส่สีตัวอักษรและสีพื้นหลัง โดยพิมพ์สี CSS ใดก็ได้ (#1e293b, rgb(), hsl(), oklch() หรือชื่อสี) หรือใช้ตัวเลือกสี

  2. 2

    อ่านอัตราส่วนคอนทราสต์ ผลลัพธ์ถูกตัดทศนิยม ไม่ปัดขึ้น ดังนั้น 4.49:1 จะไม่แสดงว่าผ่าน

  3. 3

    ดูผล WCAG ทั้งห้ารายการ ได้แก่ AA และ AAA สำหรับข้อความปกติและข้อความใหญ่ รวมถึง 3:1 สำหรับองค์ประกอบ UI เช่น ขอบช่องกรอก ไอคอน และวง focus

  4. 4

    หากไม่ผ่าน ให้ดูสีที่แนะนำซึ่งคงเฉดเดิมแต่ปรับความสว่าง แล้วกดใช้สีนี้ หรือสลับสีเพื่อทดสอบแบบกลับกัน

ตัวอย่างการใช้งานจริง

ข้อความ placeholder สีเทา

gray-400 ของ Tailwind (#9ca3af) บนพื้นขาวได้เพียง 2.5:1 ไม่ผ่าน AA ส่วน gray-500 (#6b7280) ได้ 4.8:1 ใช้กับข้อความเนื้อหาได้

สีแบรนด์บนปุ่ม

สีน้ำเงินแบรนด์โทนอ่อนอาจผ่านสำหรับข้อความปุ่มขนาดใหญ่ (3:1) แต่ไม่ผ่านกับข้อความเล็ก ตรวจทั้งสองแบบ หรือทำพื้นปุ่มให้เข้มขึ้นจนข้อความสีขาวผ่าน 4.5:1

ชุดสีโหมดมืด

สีขาวล้วนบนดำล้วน (21:1) อาจแสบตา ลองคู่สีที่นุ่มกว่า เช่น #e2e8f0 บน #0f172a ซึ่งยังเกิน AAA ที่ราว 14:1

ขอบฟอร์มและไอคอน

WCAG 1.4.11 กำหนด 3:1 สำหรับขอบช่องกรอกและไอคอนที่สื่อความหมาย ขอบสี #e5e7eb บนพื้นขาวต่ำกว่านั้นมาก ทำให้หาช่องกรอกได้ยาก

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

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

ตาม WCAG คือขนาดอย่างน้อย 18pt (24px) แบบปกติ หรือ 14pt (ราว 18.66px) แบบตัวหนา ข้อความใหญ่ต้องการเพียง 3:1 ในระดับ AA เพราะเส้นหนาอ่านง่ายกว่า

ต้องผ่าน AA หรือ AAA?+

AA เป็นเป้าหมายทางกฎหมายมาตรฐานของเว็บไซต์และแอปส่วนใหญ่ AAA เข้มงวดกว่า แนะนำสำหรับเนื้อหาอ่านยาว บริการภาครัฐ และผู้ใช้สายตาเลือนราง

โลโก้และปุ่มที่ถูกปิดใช้งานต้องผ่านด้วยไหม?+

ไม่ต้อง WCAG ยกเว้นโลโก้ รูปตกแต่ง และตัวควบคุมที่ไม่ทำงาน (disabled) แต่ข้อความ placeholder ลิงก์ และตัวบ่งชี้ focus ต้องผ่าน

แล้ว APCA กับ WCAG 3 ล่ะ?+

APCA เป็นโมเดลคอนทราสต์ใหม่ที่เสนอสำหรับ WCAG 3 ในอนาคต ยังเป็นร่างอยู่ ดังนั้นอัตราส่วนของ WCAG 2.2 ยังเป็นข้อกำหนดที่กฎหมายและการตรวจประเมินใช้ในปัจจุบัน