QuickATools

เครื่องมือนักพัฒนา · Free browser tool

ตัวตรวจสอบคอนทราสต์สี WCAG

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

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

WCAG 2.1 ต้องการอัตราส่วนคอนทราสต์เท่าไรจริงๆ?

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่ที่ระดับ AA ระดับ AAA (1.4.6 Contrast Enhanced) ยกพื้นเหล่านั้นเป็น 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความใหญ่ อัตราส่วนคำนวณจากความสว่างสัมพัทธ์ของแต่ละสี และอยู่ในช่วง 1:1 (สีเหมือนกัน) ถึง 21:1 (ดำบริสุทธิ์บนขาวบริสุทธิ์)

ความต่างเชิงปฏิบัติระหว่าง AA กับ AAA คืออะไร?

AA เป็นเป้าหมายความสอดคล้องที่พบบ่อยที่สุดสำหรับเว็บสาธารณะ บริการรัฐ และผลิตภัณฑ์เชิงพาณิชย์ — บาลานซ์ความอ่านง่ายกับความยืดหยุ่นในการออกแบบ AAA เป็นระดับเสริมที่เข้มกว่าเมื่อคุณต้องการความอ่านง่ายสูงสุด (เช่น ประสบการณ์อ่านยาวหรือผู้ชมที่มีสายตาเลือนรางมาก) การบรรลุ AAA สำหรับทุกองค์ประกอบ UI มักไม่ปฏิบัติได้ ทีมหลายทีมจึงเล็ง AA ทั้งระบบและ AAA สำหรับข้อความเนื้อหาสำคัญ

อะไรนับเป็น "ข้อความใหญ่" ตาม WCAG?

ข้อความใหญ่ถูกนิยามว่าอย่างน้อย 18 พอยต์ (โดยทั่วไป ~24px) น้ำหนักปกติ หรืออย่างน้อย 14 พอยต์ (โดยทั่วไป ~18.66px) ตัวหนา หัวข้อและข้อความฮีโร่มักเข้าเกณฑ์ ย่อหน้าเนื้อหาโดยทั่วไปไม่เข้า ข้อความใหญ่ได้เกณฑ์คอนทราสต์ต่ำกว่าเพราะตัวอักษรใหญ่ยังอ่านได้ที่คอนทราสต์อ่อนกว่า — แต่คุณยังควรยืนยันขนาดที่เรนเดอร์จริงใน CSS ไม่ใช่แค่ไฟล์ออกแบบ

ทำไมคอนทราสต์สีถึงสำคัญมากต่อการเข้าถึง?

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

เครื่องมือที่คุณอาจต้องการด้วย

สำรวจยูทิลิตี้ฟรีบนเบราว์เซอร์อื่นๆ สำหรับผู้ขาย ครีเอเตอร์ และมืออาชีพ

ทำไมคอนทราสต์สีถึงขาดไม่ได้สำหรับอินเทอร์เฟซที่เข้าถึงได้

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

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

AA ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่ AAA ยกแถบเหล่านั้นเป็น 7:1 และ 4.5:1 ข้อความใหญ่โดยทั่วไปหมายถึง 18pt (ราว 24px) ปกติ หรือ 14pt (ราว 18.66px) ตัวหนา ใช้เครื่องมือนี้เป็นเกตด่วนในรีวิวออกแบบ แล้วยืนยัน UI สุดท้ายในบริบท — ไอคอน เกรเดียนต์ และโอเวอร์เลย์สามารถเปลี่ยนคอนทราสต์ที่มีผลได้แม้ค่า hex แบนสองค่าจะผ่าน

ยูทิลิตี้นักพัฒนาเพิ่มเติมบนไซต์นี้: ตรวจแพทเทิร์นฟอร์มด้วยตัวทดสอบ Regex ตรวจโทเคน auth ในตัวถอดรหัส JWT จัดโทเคนออกแบบเป็น JSON ด้วยตัวจัดรูปแบบและตรวจ JSON หรือเข้ารหัสสินทรัพย์ผ่านเข้ารหัส/ถอดรหัส Base64 สำหรับรูปสินค้าบนมาร์เก็ตเพลส ตัวตรวจสอบพื้นหลังรูปสินค้าใช้คณิตความสว่างชุดเดียวกันกับภาพจริง