T

Text Machine

เครื่องมือข้อความทรงพลัง ในเบราว์เซอร์ของคุณ

เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี

ป้อนสีข้อความและสีพื้นหลัง (รหัสสีฐานสิบหก) เพื่อตรวจสอบอัตราส่วนความคมชัดและการปฏิบัติตามมาตรฐาน WCAG

ข้อมูลสีที่ป้อน
ตัวอย่างข้อความ

นี่คือข้อความตัวหนาขนาดใหญ่

นี่คือข้อความขนาดปกติ

อัตราส่วนความคมชัด

21.00:1

อัตราส่วนความคมชัด

ข้อความปกติ (AA)

AAA

ข้อความขนาดใหญ่ (AA)

18pt+ or 14pt+ bold

AAA

องค์ประกอบ UI (AA)

Buttons, form controls, etc.

AA
WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

วิธีใช้ เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี

  1. 1

    ป้อนสองสี

    ระบุสีพื้นหน้า (ข้อความ) และสีพื้นหลังเป็นรหัส hex เช่น #1a1a1a และ #ffffff

  2. 2

    ตรวจค่าคอนทราสต์

    คลิก "ตรวจการเข้าถึง" เพื่อคำนวณอัตราส่วนคอนทราสต์ระหว่างสองสี

  3. 3

    ดูผลลัพธ์ WCAG

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

  4. 4

    ปรับตามต้องการ

    สลับสีหรือปรับค่า hex จนกว่าคู่สีจะผ่านระดับ WCAG ที่โปรเจกต์ของคุณต้องการ

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

อัตราส่วนคอนทราสต์คืออะไร และเท่าไหร่ถึงเรียกว่าดี
อัตราส่วนคอนทราสต์วัดความต่างของความสว่างระหว่างข้อความกับพื้นหลัง ตั้งแต่ 1:1 ถึง 21:1 WCAG กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ที่ระดับ AA และ 7:1 กับ 4.5:1 ที่ระดับ AAA ซึ่งเข้มงวดกว่า
AA กับ AAA ต่างกันอย่างไร
AA เป็นมาตรฐานที่เว็บไซต์ส่วนใหญ่และข้อกำหนดทางกฎหมายมุ่งหวัง ขณะที่ AAA เป็นระดับขั้นสูงเพื่อความอ่านง่ายสูงสุด ตัวตรวจจะแสดงผ่านหรือไม่ผ่านสำหรับทั้งสองระดับ คุณจึงเลือกเกณฑ์ที่เหมาะกับความต้องการได้
ทำไมข้อความขนาดใหญ่ผ่าน แต่ข้อความปกติไม่ผ่าน
ข้อความขนาดใหญ่ ซึ่งนิยามคร่าว ๆ ว่าราว 18pt หรือ 14pt ตัวหนาขึ้นไป อ่านง่ายกว่า WCAG จึงยอมให้เกณฑ์คอนทราสต์ต่ำลงได้ คู่สีเดียวกันจึงผ่านกฎข้อความขนาดใหญ่ได้ขณะที่ไม่ผ่านข้อกำหนดข้อความปกติ
ฉันควรป้อนสีในรูปแบบใด
ป้อนสีเป็นรหัส hex ในรูปแบบ #RRGGBB หรือแบบย่อ #RGB เครื่องมือจะตรวจสอบข้อมูลที่ป้อนและแสดงตัวอย่างแบบสดของข้อความปกติและข้อความขนาดใหญ่ คุณจึงเห็นผลจริง
ตัวตรวจนี้ฟรีและส่งสีของฉันไปที่ไหนหรือไม่
ฟรีอย่างสมบูรณ์โดยไม่ต้องสมัคร และการคำนวณคอนทราสต์ทำงานทั้งหมดในเบราว์เซอร์ของคุณ สีที่คุณทดสอบจึงไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์

เครื่องมือที่เกี่ยวข้อง

ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้

เครื่องมือสร้าง Meta Tag

เครื่องสร้าง Robots.txt

Open Graph Previewer

เครื่องมือเข้ารหัส/ถอดรหัสเอนทิตี HTML

เครื่องมือดูส่วนหัว HTTP

เครื่องมือตรวจสอบห่วงโซ่การเปลี่ยนเส้นทาง URL