---
title: "เว็บไซต์ที่ตรวจคอนทราสต์ก่อนเผยแพร่ | Briks"
url: https://briks.dev/th/features/contrast-checks
description: "ทุกเว็บไซต์ที่สร้างด้วย Briks ผ่านการตรวจความคมชัดของสีให้อ่านง่าย ทั้งในโค้ดและบนหน้าเว็บจริงทั้งเดสก์ท็อปและมือถือ พร้อมแก้ไขเมื่ออ่านยาก"
last_updated: 2026-10-08
---

ในทุกแพ็กเกจ

# ตรวจก่อนเผยแพร่

ข้อความที่อ่านไม่ออกทำให้เสียลูกค้า ทุกการสร้างจะถูกตรวจคอนทราสต์ของสีในโค้ดก่อนเผยแพร่ แล้วตรวจบนหน้าจริงทั้งบนเดสก์ท็อปและโทรศัพท์ พร้อมแก้ไขเมื่อมีจุดที่อ่านยาก

## วิธีการทำงาน

1. **ในโค้ด**

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

2. **บนหน้าที่เผยแพร่แล้ว**

   หลังเผยแพร่ครั้งแรก ระบบจะดูหน้าเว็บทั้งในความกว้างแบบเดสก์ท็อปและโทรศัพท์

3. **การซ่อมแซมหากจำเป็น**

   หากมีข้อความที่อ่านยาก ระบบจะแก้ให้หนึ่งครั้ง

## สิ่งที่ตรวจทุกครั้งที่สร้าง

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

เกณฑ์คือตามแนวทางการเข้าถึง WCAG AA: 4.5 ต่อ 1 สำหรับข้อความทั่วไป และ 3 ต่อ 1 สำหรับข้อความขนาดใหญ่ คือ 24 พิกเซลขึ้นไป หรือประมาณ 19 พิกเซลแบบตัวหนา หากสีใดไม่ผ่านเกณฑ์ ข้อความบนพื้นหลังนั้นจะใช้สีที่อ่านได้

หลังการเผยแพร่ครั้งแรก Briks จะดูหน้าเว็บที่ใช้งานจริงทั้งในความกว้างแบบเดสก์ท็อปและโทรศัพท์ แล้วตรวจคอนทราสต์อีกครั้ง เพราะบางปัญหาจะปรากฏเฉพาะในเบราว์เซอร์ เช่น ตัวอักษรที่อยู่บนรูปภาพ หากมีส่วนที่อ่านยาก Briks จะแก้ไขให้หนึ่งครั้ง และตรวจด้วยว่าทุกหน้าที่คุณเลือกอยู่ในเมนู

## การตรวจเพิ่มเติมสำหรับแอป และตอนเปิดตัว

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

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

อ่านได้สูงสุดสิบสองหน้า และลองตรวจลิงก์ได้สูงสุดแปดสิบลิงก์ ไม่ใช้โมเดล AI จึงไม่ใช้เครดิต

## การตรวจแบบละเอียด และสิ่งที่ไม่ได้ตรวจ

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

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

ทั้งหมดนี้ไม่ได้แทนที่การดูด้วยตาของคุณเอง เปิดพรีวิวบนโทรศัพท์ก่อนเผยแพร่เป็นเวอร์ชันใช้งานจริง และบอกสิ่งที่รู้สึกไม่ถูกต้องด้วยคำง่าย ๆ

## การตรวจก่อนเผยแพร่ ในทางปฏิบัติ

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

1. ผู้ทำเทียน

   **ตัวอักษรสีอ่อนบนภาพถ่ายนุ่มนวล**

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

   [![ส่วนเปิดของ Saltmarsh Candles เว็บไซต์ตัวอย่างที่ Briks สร้างให้ ผู้ทำเทียน สมมติ](https://briks.dev/showcase/saltmarsh-candles-d0d6.webp)](https://saltmarsh-candles-d0d6.briks.live/)

   **Saltmarsh Candles** เป็นเว็บไซต์ตัวอย่างที่ Briks สร้างขึ้นสำหรับผู้ทำเทียนสมมติ ไม่ใช่ลูกค้าจริง [เปิดตัวอย่าง](https://saltmarsh-candles-d0d6.briks.live/)

2. สำนักงานกฎหมาย

   **สีแบรนด์ทองอ่อนบนพื้นขาว**

   สีแบรนด์ของสำนักงานกฎหมายแห่งหนึ่งเป็นสีทองอ่อน เมื่อใช้เป็นสีตัวอักษรบนพื้นขาว อัตราส่วนจะต่ำกว่า 4.5 ต่อ 1 มาก ก่อนเผยแพร่ การตรวจในโค้ดจะพบปัญหานี้และตั้งตัวอักษรบนพื้นนั้นเป็นสีที่อ่านได้ หน้าเว็บของสำนักงานจึงอ่านง่ายตั้งแต่การเผยแพร่ครั้งแรก

3. บริษัทก่อสร้าง

   **แอปงานของทีมช่าง ที่ถูกอ่านก่อนเผยแพร่**

   บริษัทก่อสร้างขอแอปเล็กๆ ให้ทีมงานบันทึกงาน ก่อนเผยแพร่ ระบบจะอ่านโค้ดเพื่อหาคีย์ที่เขียนไว้ในไฟล์และการเขียนข้อมูลที่ไม่มีขีดจำกัด เมื่อบริษัทนำแอปขึ้นเวอร์ชันใช้งานจริง การตรวจก่อนเปิดตัวยังพบลิงก์ไปยังหน้า Projects ที่ไม่เคยถูกสร้างขึ้น และหยุดการเปิดตัวไว้จนกว่าจะแก้ไข

## สิ่งที่คุณจะได้รับ

- ตรวจคอนทราสต์ในโค้ดก่อนเผยแพร่ ตามมาตรฐาน WCAG AA
- ตรวจซ้ำบนหน้าเว็บที่ใช้งานจริงทั้งบนเดสก์ท็อปและโทรศัพท์ พร้อมการแก้ไขหนึ่งจุด
- ทุกหน้าที่เลือกจะอยู่ในเมนูก่อนเผยแพร่
- ระบบตรวจแอปเพื่อหาคีย์ที่เขียนไว้ในไฟล์ การเขียนข้อมูลที่ไม่มีขีดจำกัด และคำสั่งค้นหาที่ไม่ปลอดภัย

### ควรรู้

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

## คำถามเกี่ยวกับ การตรวจก่อนเผยแพร่

### ตรวจอะไรบ้างในทุกการสร้าง

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

### มีการตรวจที่ละเอียดกว่านี้หรือไม่

ได้ เปิดการตรวจที่ความกว้างสี่ขนาดได้ และ Publish to production จะรันการตรวจก่อนเปิดตัว

### Briks ตั้งเป้าคอนทราสต์ไว้เท่าไร

WCAG AA: 4.5 ต่อ 1 สำหรับข้อความเนื้อหา และ 3 ต่อ 1 สำหรับข้อความขนาดใหญ่

### ทุกการสร้างตรวจลิงก์และการซ้อนทับกันหรือไม่

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

## ฟีเจอร์ที่เกี่ยวข้อง

- [ในทุกแพ็กเกจ **เวอร์ชันและการย้อนกลับ** ทุกการสร้างและการเปลี่ยนแปลงใน Briks ถูกบันทึกเป็นเวอร์ชัน ย้อนกลับ ทำซ้ำ หรือกู้คืนเวอร์ชันใดก็ได้จากสตูดิโอ แล้วเว็บไซต์จะถูกเผยแพร่ใหม่ตามเดิม วิธีการทำงาน](https://briks.dev/th/features/versions-and-undo)
- [โดเมนบนแพลนแบบชำระเงิน **โฮสติ้งและโดเมนของคุณ** ทุกเว็บไซต์ของ Briks โฮสต์อยู่ที่ที่อยู่ briks.live ของตนเอง ในแผนแบบชำระเงิน เชื่อมต่อโดเมนของคุณได้ และใบรับรองจะออกและต่ออายุให้อัตโนมัติวิธีการทำงาน](https://briks.dev/th/features/hosting-and-domains)
- [ในทุกแพ็กเกจ **คำถามก่อนสร้างเว็บไซต์** ก่อนสร้างครั้งแรก Briks จะถามว่าคุณต้องการหน้าใดบ้าง และสิ่งที่ข้อความของคุณยังไม่ได้ระบุ เลือก พิมพ์ หรือให้ Briks ตัดสินใจ สำหรับเว็บไซต์และแอป วิธีการทำงาน](https://briks.dev/th/features/questions-before-building)

[ดูทั้ง 32 ฟีเจอร์](https://briks.dev/th/features)

## ลองกับธุรกิจของคุณเอง

อธิบายด้วยประโยคเดียว แล้ว Briks จะสร้างให้ เริ่มต้นฟรีด้วยเครดิตที่ได้รับเมื่อสมัคร