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

<https://www.fixreports.com/th/color-contrast-checker>

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

## สิ่งที่เครื่องมือนี้ตรวจ
- อัตราส่วนตาม 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 แต่ป้ายลดราคา ราคา และข้อความทางกฎหมายตัวเล็กไม่ได้รับการยกเว้น ข้อความเหล่านี้มักเป็นข้อความที่จางที่สุดในหน้าร้านค้า

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

### 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 ที่เครื่องมือนี้คำนวณ

## แหล่งอ้างอิง
- [W3C: ทำความเข้าใจเกณฑ์ความสำเร็จ 1.4.3 Contrast (Minimum) ของ WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum)
- [W3C: ทำความเข้าใจเกณฑ์ความสำเร็จ 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced)
- [W3C: ทำความเข้าใจเกณฑ์ความสำเร็จ 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
- [W3C: นิยามความสว่างสัมพัทธ์ (relative luminance) ใน WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance)
- [Deque: กฎ color-contrast ของ axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast)
- [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)