# องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ

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

WCAG 1.4.3 Contrast (Minimum) · ระดับ AA

ข้อความบางส่วนตัดกับพื้นหลังไม่มากพอที่ผู้มีสายตาเลือนรางจะอ่านได้

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าคอนทราสต์ระหว่างสีตัวอักษรกับสีพื้นหลังผ่านเกณฑ์อัตราส่วนคอนทราสต์ขั้นต่ำของ WCAG 2 AA.

## ทำไมจึงสำคัญ
WCAG 1.4.3 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ราคา ป้าย และแบนเนอร์ที่สีจางอ่านยากสำหรับผู้มีสายตาเลือนราง และสำหรับทุกคนเมื่ออยู่ในที่แสงจ้า

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. ค้นหาข้อความที่คอนทราสต์ต่ำ แล้วจดสีข้อความและสีพื้นหลังไว้ เครื่องมือตรวจคอนทราสต์หรือเครื่องมือนักพัฒนาของเบราว์เซอร์แสดงได้ทั้งสองค่า
2. ปรับสีข้อความหรือสีพื้นหลังใน CSS ของธีมจนอัตราส่วนเป็นอย่างน้อย 4.5:1 (3:1 สำหรับข้อความขนาด 24px ขึ้นไป หรือตัวหนาขนาด 18.66px)
3. ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ

### บน Shopify
1. ค้นหาข้อความที่คอนทราสต์ต่ำ แล้วจดสีข้อความและสีพื้นหลังไว้ เครื่องมือตรวจคอนทราสต์หรือเครื่องมือนักพัฒนาของเบราว์เซอร์แสดงได้ทั้งสองค่า
2. ใน Online Store > Themes > Customize > Theme settings > Colors ให้ปรับสีข้อความให้เข้มขึ้น หรือปรับพื้นหลังให้อ่อนลงสำหรับชุดสี (color scheme) ที่ได้รับผลกระทบ จนอัตราส่วนเป็นอย่างน้อย 4.5:1
3. ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ

### บน WooCommerce และ WordPress
1. ค้นหาข้อความที่คอนทราสต์ต่ำ แล้วจดสีข้อความและสีพื้นหลังไว้ เครื่องมือตรวจคอนทราสต์หรือเครื่องมือนักพัฒนาของเบราว์เซอร์แสดงได้ทั้งสองค่า
2. ปรับสีข้อความหรือสีพื้นหลังใน CSS ของธีมจนอัตราส่วนเป็นอย่างน้อย 4.5:1 (3:1 สำหรับข้อความขนาด 24px ขึ้นไป หรือตัวหนาขนาด 18.66px)
3. ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ

## วิธีตรวจสอบการแก้ไข
- สแกนอีกครั้งและยืนยันว่า color-contrast ไม่ปรากฏอีก
- สุ่มตรวจด้วยเครื่องมือตรวจคอนทราสต์โดยใช้ค่าสีที่ตรงกัน

## แหล่งที่มา
- เอกสารกฎของ axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- ทำความเข้าใจ WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum