ตรวจสอบความคมชัดของสี
ตรวจสอบอัตราส่วนความคมชัด WCAG ระหว่างสีข้อความและพื้นหลัง — ดูเกรด AA/AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI พร้อมตัวอย่างสดและคำแนะนำสีที่เข้าถึงได้
The quick brown fox
ข้อความขนาดใหญ่อ่านได้สบายเมื่อความคมชัดเพียงพอ
นี่คือย่อหน้าตัวอย่างของข้อความเนื้อหาปกติ ความคมชัดของสีที่ดีทำให้เนื้อหาอ่านได้สำหรับทุกคน รวมถึงผู้ที่มีสายตาอ่อนแอหรือตาบอดสี ลิงก์ตัวอย่าง.
ตัวพิมพ์เล็กและคำบรรยายอ่านยากที่สุด — ต้องการความคมชัดมากที่สุดทุกอย่างคำนวณสดในเบราว์เซอร์โดยใช้สูตร WCAG 2.x relative-luminance — ไม่มีการอัปโหลด ไม่ต้องสมัคร ฟรีทั้งหมด
เกี่ยวกับ ตรวจสอบความคมชัดของสี
Color Contrast Checker วัดอัตราส่วนความคมชัด (contrast ratio) ตามมาตรฐาน WCAG ระหว่างสีข้อความกับสีพื้นหลัง แล้วให้เกรดคู่สีนั้นเทียบกับระดับการเข้าถึง AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI ค่าอัตราส่วนและผลผ่าน/ไม่ผ่านทุกรายการจะอัปเดตทันทีเมื่อคุณปรับสีใดสีหนึ่ง
แผงตัวอย่างที่สมจริงจะแสดงหัวข้อ เนื้อหา ตัวอักษรขนาดเล็ก ปุ่ม และลิงก์ในคู่สีที่คุณเลือก เพื่อให้คุณตัดสินความอ่านง่ายด้วยเนื้อหาจริงแทนสวอตช์ที่เป็นนามธรรม เมื่อคู่สีไม่ผ่าน เครื่องมือจะแนะนำสีข้อความที่เข้าถึงได้ใกล้เคียงที่สุดซึ่งถึงเกณฑ์ AA ที่ 4.5:1 พร้อมนำไปใช้ได้ด้วยคลิกเดียว
การคำนวณเป็นไปตามสูตร relative-luminance ของ WCAG 2.x และทำงานอยู่ในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการอัปโหลดและการตรวจสอบนี้ฟรี คุณยังคัดลอกรายงานข้อความสรุปของอัตราส่วนและเกรดไปวางในรีวิวการเข้าถึงหรือ pull request ได้
วิธีใช้ ตรวจสอบความคมชัดของสี
- ตั้งสีข้อความและสีพื้นหลังด้วยตัวเลือกสีหรือพิมพ์ค่า
- อ่านอัตราส่วนความคมชัดและผลลัพธ์ AA/AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI
- ตรวจดูตัวอย่างสดเพื่อดูหัวข้อ ย่อหน้า ปุ่ม และลิงก์จริงในสีของคุณ
- หากคู่สีไม่ผ่าน ให้นำสีข้อความที่แนะนำไปใช้ หรือสลับสีทั้งสองสี
- คลิก "Copy report" เพื่อแชร์อัตราส่วนและผลการปฏิบัติตามมาตรฐาน