เครื่องมือฟรี: การเข้าถึง

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

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

เครื่องคำนวณคอนทราสต์

ป้อนสีข้อความและสีพื้นหลัง ทุกอย่างคำนวณในเบราว์เซอร์ของคุณ

ข้อความปกติขนาด 16 พิกเซลจะมีลักษณะแบบนี้

ข้อความขนาดใหญ่ 24 พิกเซล

เส้นขอบปุ่ม

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

ผลตาม WCAG 2.2 สำหรับสีเหล่านี้
ข้อความปกติ, AAWCAG 1.4.3 ต้องได้ 4.5:1ผ่าน
ข้อความขนาดใหญ่, AAWCAG 1.4.3 ต้องได้ 3:1ผ่าน
ข้อความปกติ, AAAWCAG 1.4.6 ต้องได้ 7:1ไม่ผ่าน
ข้อความขนาดใหญ่, AAAWCAG 1.4.6 ต้องได้ 4.5:1ผ่าน
ไอคอน เส้นขอบ และช่องกรอกฟอร์มWCAG 1.4.11 ต้องได้ 3:1ผ่าน

สีข้อความที่ใกล้เคียงที่สุดซึ่งผ่านเกณฑ์บนพื้นหลังนี้

ข้อความขนาดใหญ่หมายถึงขนาดอย่างน้อย 24 พิกเซล หรือ 18.66 พิกเซลหากเป็นตัวหนา อัตราส่วนจะถูกปัดลง ดังนั้น 4.499:1 จะแสดงเป็น 4.49:1 และไม่ผ่าน ตามเจตนาของ WCAG

หรือสแกนหน้าเว็บเพื่อหาข้อความที่คอนทราสต์ต่ำ

ฟรี ตรวจที่อยู่ที่คุณกรอกในเวลาประมาณ 20 วินาที

สิ่งที่เครื่องมือนี้ตรวจ

  • อัตราส่วนตาม WCAG ของสองสีใดก็ได้

    เครื่องคำนวณใช้สูตรความสว่างสัมพัทธ์ (relative luminance) จากนิยามใน WCAG 2.2 และแสดงผลสำหรับข้อความปกติ ข้อความขนาดใหญ่ และส่วนประกอบของอินเทอร์เฟซ ทั้งระดับ AA และ AAA โดยทำงานในเบราว์เซอร์ของคุณ

  • สีที่ผ่านเกณฑ์ คำนวณให้แล้ว

    เมื่อคู่สีใดไม่ผ่าน เครื่องมือจะหาสีข้อความโทนเดียวกันที่ใกล้เคียงที่สุดซึ่งได้ 4.5:1 หรือ 7:1 เพื่อให้คุณเปลี่ยนดีไซน์น้อยที่สุด

  • ข้อความคอนทราสต์ต่ำทุกจุดในหน้า

    การสแกนหน้าเว็บจะเรียกใช้กฎ color-contrast ของ axe-core ในเบราว์เซอร์ Chrome จริง และแสดงองค์ประกอบที่ไม่ผ่านทุกรายการ พร้อมสีข้อความ สีพื้นหลัง ขนาดฟอนต์ และอัตราส่วน

  • จัดกลุ่มตามคู่สี

    ผลที่ไม่ผ่านจะจัดกลุ่มตามสีข้อความและสีพื้นหลัง เพราะการเปลี่ยนสีธีมเพียงครั้งเดียวมักแก้ได้ทุกองค์ประกอบที่ใช้สีนั้น

  • เกณฑ์ที่ถูกต้องสำหรับข้อความขนาดใหญ่

    ข้อความขนาดอย่างน้อย 24 พิกเซล หรือ 18.66 พิกเซลหากเป็นตัวหนา ต้องได้ 3:1 แทน 4.5:1 การสแกนจะใช้เกณฑ์ที่ถูกต้องกับแต่ละองค์ประกอบตามขนาดและน้ำหนักฟอนต์ที่คำนวณได้

  • สิ่งที่วัดไม่ได้ และเหตุผล

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

สิ่งที่ตรวจไม่ได้

  • วัดข้อความบนรูปถ่าย สีไล่ระดับ หรือวิดีโอ ซอฟต์แวร์ไม่รู้ว่าส่วนใดของรูปภาพอยู่หลังตัวอักษรแต่ละตัว จึงแสดงรายการเหล่านี้ให้คุณตรวจเอง
  • ตรวจสถานะ hover, focus หรือสถานะอื่น การสแกนเห็นหน้าเว็บในตอนที่โหลด ให้ตรวจสีเหล่านั้นด้วยเครื่องคำนวณ
  • สแกนไอคอน เส้นขอบ และช่องกรอกฟอร์มในหน้าตาม WCAG 1.4.11 แต่เครื่องคำนวณจะแสดงผลเทียบกับ 3:1 สำหรับคู่สีใดก็ตามที่คุณป้อน
  • อ่านข้อความที่เป็นส่วนหนึ่งของรูปภาพ เช่น แบนเนอร์ที่ฝังตัวหนังสือไว้ในภาพ
  • ทดสอบมากกว่าหน้าที่คุณกรอก การสแกนฟรีแบบเต็มจะทดสอบหน้าสำคัญได้สูงสุด 5 หน้า

ทำไมจึงสำคัญ

คอนทราสต์ต่ำเป็นปัญหาการเข้าถึงที่พบบ่อยที่สุดบนเว็บ การวิเคราะห์ของ WebAIM ในปี 2026 กับหน้าแรกของเว็บไซต์ยอดนิยม 1 ล้านอันดับแรกพบข้อความคอนทราสต์ต่ำใน 83.9% ของหน้าเหล่านั้น โดยเฉลี่ย 34 จุดต่อหน้า

ข้อความสีจางอ่านยากสำหรับผู้ที่มีสายตาเลือนรางหรือมีภาวะบกพร่องในการมองเห็นสี และสำหรับทุกคนที่ใช้โทรศัพท์กลางแดดจ้า เกณฑ์ความสำเร็จ 1.4.3 ของ WCAG 2.2 ระดับ AA กำหนดขั้นต่ำไว้ที่ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่

นี่ยังเป็นหนึ่งในปัญหาที่แก้ได้ถูกที่สุด ในเว็บไซต์ส่วนใหญ่ สีธีมเพียงไม่กี่สีเป็นต้นเหตุของปัญหาเกือบทั้งหมด และการเปลี่ยนสีเหล่านั้นจะแก้ได้ทุกหน้าพร้อมกัน

วิธีอ่านผลลัพธ์

อัตราส่วนคอนทราสต์
ตั้งแต่ 1:1 (สีเดียวกันสองครั้ง) ถึง 21:1 (ดำบนขาว) อัตราส่วนจะถูกปัดลง คู่สีที่แสดง 4.49:1 จึงไม่ผ่านขั้นต่ำ 4.5:1
ข้อความปกติ, AA (4.5:1)
ขั้นต่ำสำหรับข้อความเนื้อหา ลิงก์ ป้ายกำกับ และข้อความบนปุ่ม ตาม WCAG 1.4.3
ข้อความขนาดใหญ่, AA (3:1)
สำหรับข้อความขนาดอย่างน้อย 24 พิกเซล หรือ 18.66 พิกเซลหากเป็นตัวหนา WCAG นิยามข้อความขนาดใหญ่ว่า 18 พอยต์ หรือ 14 พอยต์ตัวหนา
AAA (7:1 และ 4.5:1)
ระดับที่เข้มขึ้นใน WCAG 1.4.6 ไม่จำเป็นสำหรับความสอดคล้องระดับ AA แต่ช่วยผู้อ่านได้มากขึ้น
ไอคอน เส้นขอบ และช่องกรอกฟอร์ม (3:1)
WCAG 1.4.11 กำหนด 3:1 เทียบกับสีที่อยู่ติดกัน สำหรับส่วนของตัวควบคุมและกราฟิกที่ผู้ใช้ต้องมองเห็นจึงจะใช้งานได้
ข้อความที่ไม่ผ่าน
องค์ประกอบทุกรายการที่การสแกนวัดได้ต่ำกว่าเกณฑ์ พร้อม selector สี ขนาด และอัตราส่วน เปิดดูแต่ละรายการเพื่อดู markup และภาพหน้าจอหากมี
ต้องตรวจด้วยตา
ข้อความที่ axe-core วัดไม่ได้ พร้อมเหตุผล เช่น มีรูปภาพหรือสีไล่ระดับอยู่ด้านหลัง

วิธีแก้ปัญหาที่พบบ่อยที่สุด

  • ข้อความสีเทาบนพื้นขาว

    #767676 เป็นสีเทาที่สว่างที่สุดโดยประมาณที่ได้ 4.5:1 บนพื้นขาว (4.54:1) สีเทาที่สว่างกว่า เช่น #999999 (2.84:1) เป็นสาเหตุที่พบบ่อยของปัญหาในส่วนท้ายเว็บ คำบรรยายภาพ ข้อความตัวอย่างในช่องกรอก (placeholder) และราคา

  • ข้อความสีขาวบนปุ่มสีแบรนด์

    หากข้อความสีขาวบนสีแบรนด์ไม่ผ่าน ให้ปรับพื้นหลังปุ่มให้เข้มขึ้นอีกเล็กน้อย หรือใช้ข้อความสีเข้ม และตรวจสีตอน hover และ focus ด้วย เพราะมักสว่างขึ้น

  • ข้อความ placeholder ในฟอร์ม

    ข้อความ placeholder ก็ยังเป็นข้อความและต้องได้ 4.5:1 จะดียิ่งขึ้นหากใช้ป้ายกำกับที่มองเห็นได้เหนือช่องกรอก เพื่อไม่ให้ placeholder เป็นคำแนะนำเพียงอย่างเดียว

  • ข้อความบนรูปภาพและสไลเดอร์

    วางข้อความบนพื้นรองแบบทึบหรือกึ่งโปร่งใส หรือเพิ่มชั้นสีเข้มทับรูปภาพ แล้วตรวจส่วนที่สว่างที่สุดของรูปภาพที่อยู่หลังข้อความ

  • ป้ายลดราคาและตัวอักษรขนาดเล็ก

    ข้อความในตัวควบคุมที่ปิดใช้งานได้รับการยกเว้นจาก 1.4.3 แต่ป้ายลดราคา ราคา และข้อความทางกฎหมายตัวเล็กไม่ได้รับการยกเว้น ข้อความเหล่านี้มักเป็นข้อความที่จางที่สุดในหน้าร้านค้า

คอนทราสต์สีต่ำ: ทำไมจึงสำคัญ และวิธีแก้บน Shopify, WooCommerce และเว็บไซต์ทุกประเภท

คำถามเกี่ยวกับเครื่องมือนี้

WCAG กำหนดอัตราส่วนคอนทราสต์เท่าไร

สำหรับระดับ AA คือ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (เกณฑ์ความสำเร็จ 1.4.3) และ 3:1 สำหรับส่วนประกอบอินเทอร์เฟซและกราฟิกที่สื่อความหมาย (1.4.11) ระดับ AAA กำหนด 7:1 และ 4.5:1 (1.4.6)

ข้อความแบบใดนับเป็นข้อความขนาดใหญ่

WCAG นิยามข้อความขนาดใหญ่ว่ามีขนาดอย่างน้อย 18 พอยต์ หรือ 14 พอยต์ตัวหนา ในหน่วยพิกเซล CSS เท่ากับประมาณ 24px หรือ 18.66px หากเป็นตัวหนา

โลโก้ต้องผ่านเกณฑ์คอนทราสต์ขั้นต่ำหรือไม่

ไม่ต้อง เพราะ WCAG 1.4.3 ยกเว้นโลโก้และข้อความที่เป็นส่วนหนึ่งของโลโก้หรือชื่อแบรนด์ รวมถึงข้อความที่ใช้ตกแต่งเท่านั้น และข้อความในตัวควบคุมที่ไม่ได้ใช้งาน

ทำไมการสแกนจึงให้ตรวจข้อความบนรูปภาพเอง

axe-core วัดสีพื้นเรียบ เมื่อมีรูปภาพ สีไล่ระดับ หรือองค์ประกอบอื่นอยู่หลังข้อความ เครื่องมือจะไม่รู้ว่าสีใดมาบรรจบกัน จึงรายงานองค์ประกอบนั้นให้คนตรวจแทนการเดา

ฉันจำเป็นต้องมีคอนทราสต์ระดับ AAA หรือไม่

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

APCA เป็นส่วนหนึ่งของ WCAG หรือไม่

ไม่ใช่ ทั้งนี้ APCA เป็นวิธีวัดคอนทราสต์อีกแบบที่มีการพูดถึงสำหรับ WCAG 3 ซึ่งยังเป็นฉบับร่าง ปัจจุบันความสอดคล้องวัดด้วยอัตราส่วนตาม WCAG 2 ที่เครื่องมือนี้คำนวณ

แหล่งอ้างอิง

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

รายงานแก้ไขการเข้าถึง ($174 ชำระครั้งเดียว) เริ่มจากการสแกนฟรีแบบเต็ม แล้วเพิ่มจำนวนหน้า สิ่งที่ต้องเปลี่ยนสำหรับทุกปัญหาที่พบ ไฟล์ PDF และการทดสอบซ้ำเพื่อยืนยันการแก้ไข

เกี่ยวกับรายงานแก้ไขการเข้าถึง