จะตรวจสอบได้อย่างไรว่าสีข้อความและพื้นหลังของฉันผ่านมาตรฐาน WCAG

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

WCAG AA ต้องการอัตราส่วนคอนทราสต์เท่าใด

AA ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความตัวใหญ่ AAA ต้องการ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความตัวใหญ่ คอมโพเนนต์ UI และวัตถุกราฟิกต้องการ 3:1

ข้อความแบบไหนถึงนับว่าเป็นข้อความตัวใหญ่

เครื่องมือนี้ถือว่าข้อความปกติขนาด 18pt (24px) หรือข้อความตัวหนาขนาด 14pt (18.66px) เป็นข้อความตัวใหญ่ ข้อความที่เล็กกว่านั้นต้องผ่านเกณฑ์ที่สูงกว่าสำหรับข้อความปกติ

สีของฉันไม่ผ่าน AA จะแก้ไขได้อย่างไร

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

รองรับรูปแบบสีใดบ้าง และฉันสามารถเลือกสีจากหน้าจอได้หรือไม่

รองรับค่า hex แบบ 3 หลักและ 6 หลัก เช่น #abc หรือ #1e293b ปุ่ม เลือกสีจากหน้าจอ จะปรากฏในเบราว์เซอร์ที่รองรับ EyeDropper API เช่น Chromium

ฟรีจริงหรือ

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

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🌓

ตรวจสอบ WCAG Color Contrast ฟรี

ตรวจสอบว่าสองสีผ่านมาตรฐาน WCAG AA และ AAA สำหรับการเข้าถึงหรือไม่ ดูตัวอย่างสดๆ ในหลายขนาดตัวอักษรพร้อมข้อเสนอแนะอัตโนมัติเมื่อ contrast ต่ำเกินไป

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

สีข้อความ

สีพื้นหลัง

ข้อความหัวเรื่องขนาดใหญ่

ข้อความเนื้อหาขนาดกลาง (18px) สำหรับการอ่านและเนื้อหา

ข้อความเนื้อหาปกติ (16px) สำหรับย่อหน้า

ข้อความเนื้อหาขนาดเล็ก (14px) สำหรับคำบรรยายและ metadata

14.63:1

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

✓WCAG AA — ข้อความปกติ

ต้องการ 4.5:1 · คุณมี 14.63:1

✓WCAG AA — ข้อความขนาดใหญ่

ต้องการ 3.0:1 · คุณมี 14.63:1

✓WCAG AAA — ข้อความปกติ

ต้องการ 7.0:1 · คุณมี 14.63:1

✓WCAG AAA — ข้อความขนาดใหญ่

ต้องการ 4.5:1 · คุณมี 14.63:1

✓คอมโพเนนต์ UI / วัตถุกราฟิก

ต้องการ 3.0:1 · คุณมี 14.63:1

Presets ด่วน

อ้างอิงจากแนวทาง WCAG 2.1 ข้อความขนาดใหญ่ = 18pt (24px) ปกติ หรือ 14pt (18.66px) ตัวหนา รหัส HEX อัปเดตสองทิศทาง: พิมพ์ HEX หรือเลือกสี ทั้งสองช่องซิงค์กัน

การใช้งานทั่วไป

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

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

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

1
อินพุต hex และการทำให้เป็นมาตรฐาน
รับค่า hex ทั้ง 3 หลัก (#abc) และ 6 หลัก (#aabbcc) และทำให้เป็นชุด RGB เต็ม อินพุตที่ไม่ถูกต้องถูกปฏิเสธทันทีแทนที่จะใช้สีดำเป็นค่าเริ่มต้นอย่างเงียบ ๆ จึงแสดงขอบสีแดงแทนผลผ่านที่ทำให้เข้าใจผิด
2
การคำนวณความสว่างตาม WCAG
แต่ละสีถูกแปลงเป็นความสว่างสัมพัทธ์ด้วยสูตร WCAG 2.1: ค่าช่อง sRGB ถูกทำให้เป็นเชิงเส้นด้วยการแก้แกมมาแบบแบ่งช่วง (หารด้วย 12.92 เมื่อต่ำกว่า 0.03928 ยกกำลัง 2.4 เมื่อสูงกว่า) แล้วถ่วงน้ำหนักเป็น 0.2126R + 0.7152G + 0.0722B
3
อัตราส่วนคอนทราสต์และการตรวจความสอดคล้อง
อัตราส่วนคอนทราสต์คำนวณเป็น (สว่างกว่า + 0.05) / (มืดกว่า + 0.05) และตรวจกับเกณฑ์ WCAG ทั้งห้า: AA ข้อความปกติ (4.5:1), AA ข้อความใหญ่ (3:1), AAA ข้อความปกติ (7:1), AAA ข้อความใหญ่ (4.5:1) และคอมโพเนนต์ UI (3:1) ผลลัพธ์อัปเดตทุกการกดแป้น
4
คำแนะนำการแก้ไขที่คงเฉดสี
เมื่อคู่สีไม่ผ่าน WCAG AA เครื่องมือจะค้นหาในพื้นที่ความสว่าง HSL — ก้าวออกจากความสว่างเดิมทั้งสองทิศทาง — เพื่อหาสีแต่ละสีที่ใกล้ที่สุดซึ่งผ่าน 4.5:1 โดยคงเฉดสีและความอิ่มตัวเดิม EyeDropper API (Chromium) ยังใช้ได้เพื่อดูดสีใดก็ได้จากหน้าจอโดยตรง

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

👁️

จำลองการมองเห็นสีบกพร่อง

ดูว่าการออกแบบของคุณมองเห็นอย่างไรสำหรับผู้มีการมองเห็นสีบกพร่อง จำลอง protanopia, deuteranopia, tritanopia, achromatopsia และความบกพร่องระดับอ่อน

ลองใช้ไฟล์อยู่ในเครื่อง

📐

ความละเอียดหน้าจอของฉันคืออะไร

ดูความละเอียดหน้าจอของคุณในหน่วย CSS และพิกเซลจริง, ขนาดหน้าต่าง, อัตราส่วนพิกเซล, ความลึกของสี, HDR, การรองรับการสัมผัส และอัตรารีเฟรช และคัดลอกทั้งหมด

ลองใช้

🖥️

ตัวทดสอบเม็ดพิกเซลเสีย

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