ตรวจสอบความคมชัดของสี WCAG — เครื่องมือออนไลน์ฟรี

ตรวจสอบความคมชัดของสี WCAGคืออะไร?

ตรวจสอบความคมชัดของสี WCAG ฟรีออนไลน์ ป้อนสีพื้นหน้าและพื้นหลัง ตรวจสอบการปฏิบัติตาม WCAG 2.1 AA และ AAA รวมถึงคู่สีที่กำหนดไว้ล่วงหน้าและตัวอย่างสด

คอนทราสต์สีเป็นหนึ่งในแง่มุมที่ถูกละเลยที่สุดของการเข้าถึงเว็บ แต่ส่งผลโดยตรงว่าผู้ใช้หลายล้านคนอ่านเนื้อหาของคุณได้หรือไม่ WCAG (Web Content Accessibility Guidelines) 2.1 กำหนดอัตราส่วนคอนทราสต์เฉพาะสำหรับสีข้อความและพื้นหลังเพื่อรับประกันความอ่านง่ายสำหรับผู้ใช้สายตาเลือนราง ตาบอดสี หรือสภาพการรับชมเช่นแสงแดดจ้า ตัวตรวจสอบคอนทราสต์สีวัดการผสมสีพื้นหน้า/พื้นหลังใด ๆ เทียบกับมาตรฐานเหล่านี้และบอกคุณทันทีว่าผ่านหรือไม่ผ่าน

ป้อนสีด้วยตัวเลือกสี HEX หรือพิมพ์ค่า hex โดยตรง เครื่องมือคำนวณอัตราส่วนคอนทราสต์ — ตัวเลขระหว่าง 1:1 (ไม่มีคอนทราสต์) ถึง 21:1 (คอนทราสต์สูงสุด ขาวบนดำ) ผลลัพธ์ถูกเปรียบเทียบกับสี่เกณฑ์ WCAG: ข้อความปกติ AA (4.5:1), ข้อความขนาดใหญ่ AA (3:1), ข้อความปกติ AAA (7:1) และข้อความขนาดใหญ่ AAA (4.5:1) แต่ละเกณฑ์แสดงตัวบ่งชี้ผ่านหรือไม่ผ่านที่ชัดเจน เพื่อให้คุณรู้ว่าคู่สีของคุณผ่านมาตรฐานใดบ้าง

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

เครื่องมือยังจัดการกรณีขอบ หากสีใกล้เคียงกันเกินไป อัตราส่วนจะลดต่ำกว่า 3:1 และการตรวจทั้งหมดล้มเหลว — สัญญาณที่ชัดเจนว่าคู่นั้นใช้ไม่ได้สำหรับข้อความ หากคุณกำลังทดสอบสำหรับองค์ประกอบที่ไม่ใช่ข้อความเช่นไอคอนหรือเส้นขอบฟอร์ม ข้อกำหนดคอนทราสต์ที่ไม่ใช่ข้อความของ WCAG ผ่อนปรนกว่า (ขั้นต่ำ 3:1) ซึ่งตัวตรวจสอบนี้ช่วยให้คุณประเมินด้วยสายตาได้แม้เกณฑ์หลักจะมุ่งที่ข้อความ

ตัวอย่างการใช้งานจริงของ ตรวจสอบความคมชัดของสี WCAG

รับประกันความอ่านข้อความบนหน้าแลนดิ้งเพจ

นักออกแบบของคุณเลือกข้อความสีเทาอ่อน (#999) บนพื้นหลังสีขาวสำหรับส่วน hero ทดสอบที่นี่: อัตราส่วนประมาณ 2.8:1 — ไม่ผ่าน WCAG AA สำหรับทุกขนาดข้อความ ปรับสีพื้นหน้าเป็นเทาเข้มขึ้น (#595959) และทดสอบใหม่จนผ่าน AA สำหรับข้อความปกติ (4.5:1+) การพรีวิวสดยืนยันความอ่านได้ในพริบตา

ตรวจสอบสคีมาสีโหมดมืด

UI โหมดมืดใช้ข้อความสีขาวบนพื้นหลังน้ำเงินเข้ม ทดสอบการผสม: สีขาว (#FFFFFF) บนสีน้ำเงินเข้ม (#0A1628) โดยทั่วไปให้อัตราส่วนสูงกว่า 10:1 ผ่าน AAA ได้อย่างง่ายดาย อย่างไรก็ตาม สีลิงก์ในโหมดมืดอาจละเอียดเกินไป — ทดสอบลิงก์สีน้ำเงินของคุณ (#4A90D9) บนพื้นหลังเข้มเดียวกันเพื่อตรวจสอบว่าผ่านอย่างน้อย AA สำหรับข้อความขนาดใหญ่

เลือกสีปุ่มและป้ายที่เข้าถึงได้

ป้ายแจ้งเตือนของคุณใช้ข้อความสีขาวบนพื้นหลังสีแดง ทดสอบเฉดแดงที่แน่นอน — ไม่ใช่ทุกสีแดงที่ผ่านข้อกำหนดคอนทราสต์ สีแดงสด (#E53E3E) กับข้อความขาวโดยทั่วไปผ่าน AA สำหรับข้อความขนาดใหญ่แต่อาจไม่ผ่านสำหรับป้ายเล็ก ปรับเฉดแดงและทดสอบใหม่จนกว่าป้ายจะทั้งตรงแบรนด์และเข้าถึงได้

ทำไมต้องใช้ ตรวจสอบความคมชัดของสี WCAG?

WCAG 2.1 AA and AAA compliance for normal and large text
text preview with your color combination สด
8 preset color pairs for common scenarios
ล้างpass/fail indicators with required ratios

วิธีใช้ ตรวจสอบความคมชัดของสี WCAG — ทีละขั้นตอน

ป้อนforeground (text) and background colors.

ดูcontrast ratio and WCAG compliance results.

ใช้preset color pairs for common scenarios.

ปรับcolors until all checks pass.

ตรวจสอบความคมชัดของสี WCAGเหมาะกับใคร?

web accessibility
UI design
WCAG compliance
color selection

เคล็ดลับมือโปรสำหรับ ตรวจสอบความคมชัดของสี WCAG

1ออกแบบให้ผ่าน AA เป็นมาตรฐานขั้นต่ำ AAA เหมาะสมแต่ไม่จำเป็นสำหรับทุกเนื้อหา — สงวน AAA สำหรับบริบทการอ่านยาว ๆ ที่ความอ่านได้สำคัญยิ่ง
2ข้อความขนาดใหญ่ (18px+ ปกติหรือ 14px+ ตัวหนา) มีข้อกำหนดคอนทราสต์ต่ำกว่า (3:1 สำหรับ AA) ใช้ประโยชน์นี้กับพาดหัว ปุ่ม และป้ายที่สามารถจัดสไตล์ให้ใหญ่ขึ้น
3อย่าพึ่งพาสีเพียงอย่างเดียวในการสื่อสารข้อมูล แม้จะผ่านคอนทราสต์ ผู้ใช้ตาบอดสียังต้องมีสัญญาณเพิ่มเติมเช่นไอคอน ขีดเส้นใต้ หรือป้ายเพื่อแยกแยะสถานะ
4ทดสอบคู่สีตั้งแต่ต้นกระบวนการออกแบบแทนที่จะหลังการพัฒนา การแก้ไขปัญหาคอนทราสต์ใน CSS ง่าย การแก้ไขหลังจากสีแบรนด์ถูกกำหนดเสร็จสิ้นยากกว่ามาก

ตรวจสอบความคมชัดของสี WCAG — คำถามที่พบบ่อย

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is ตรวจสอบความคมชัดของสี WCAG really free to use?

Yes, ตรวจสอบความคมชัดของสี WCAG is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

พร้อมใช้ ตรวจสอบความคมชัดของสี WCAG หรือยัง?

เครื่องมือออนไลน์ฟรี — ทำงานในเบราว์เซอร์ของคุณ ไม่ต้องสมัคร เริ่มใช้ได้เลยตอนนี้

ลองเลย