ใส่จานสีทั้งหมดของคุณลงในตารางตรวจสอบ N×N — อัตราส่วน WCAG และ APCA Lc สำหรับทุกคู่สีพื้นหลัง × สีหน้า ตัดสินได้ในพริบตา
| fg ↓ / bg → | |||||||
|---|---|---|---|---|---|---|---|
Ag1.0Lc0 | Ag4.2Lc+35 | Ag3.8Lc+31 | Ag5.2Lc+42 | Ag8.4Lc+62 | Ag1.2Lc0 | Ag17.4Lc+104 | |
Ag4.2Lc-33 | Ag1.0Lc0 | Ag1.1Lc0 | Ag1.3Lc0 | Ag2.0Lc+25 | Ag5.0Lc-34 | Ag4.2Lc+67 | |
Ag3.8Lc-29 | Ag1.1Lc0 | Ag1.0Lc0 | Ag1.4Lc+10 | Ag2.2Lc+30 | Ag4.6Lc-30 | Ag4.6Lc+72 | |
Ag5.2Lc-40 | Ag1.3Lc0 | Ag1.4Lc-11 | Ag1.0Lc0 | Ag1.6Lc+18 | Ag6.3Lc-41 | Ag3.3Lc+60 | |
Ag8.4Lc-61 | Ag2.0Lc-27 | Ag2.2Lc-32 | Ag1.6Lc-20 | Ag1.0Lc0 | Ag10.2Lc-62 | Ag2.1Lc+40 |
แถว = สีข้อความ (พื้นหน้า), คอลัมน์ = พื้นหลัง แต่ละเซลล์แสดงคู่สีพื้นหน้าบนพื้นหลังจริง พร้อมเมตริกการเข้าถึงสองอย่าง: อัตราส่วน WCAG (AA ส่วนเนื้อหา ≥ 4.5, AA ขนาดใหญ่ ≥ 3.0) และ APCA Lc (75+ สำหรับเนื้อหา, 60+ สำหรับข้อความขนาดใหญ่)
สีที่เป็นไปได้ทั้งหมดในเมทริกซ์ N×N เดียว - ตรวจสอบความสามารถในการเข้าถึงสำหรับทุกคู่ตัวอักษรพื้นหลัง × ตัวอักษรนำหน้าในคราวเดียว
นำสีแบรนด์, สีความหมายและสีกลาง (สูงสุด 10 สี) เข้ามา แถวคือตัวอักษรนำหน้า, คอลัมน์คือตัวอักษรพื้นหลัง
แต่ละเซลล์แสดงอัตราส่วน WCAG และ APCA Lc จุดจะสว่างขึ้น: ข้อความเนื้อหาต้องการ Lc 75+, ข้อความขนาดใหญ่ต้องการ 60+
บันทึกคู่ปุ่มและคู่เนื้อหาลงในสเปคดีไซน์ของคุณ; กำจัดค่าผิดก่อนนำไปใช้
คำถามยอดนิยมสามข้อสำหรับการตรวจสอบเมทริกซ์เต็มรูปแบบ
นำคู่ที่ผ่านไปใช้ในจานสีความหมายและสเปคของคุณ
ตรวจสอบคอนทราสต์ตามมาตรฐาน WCAG 2.1 ระหว่างสีพื้นหน้าและพื้นหลังใดๆ
จำลองการขาดดุลการมองเห็นสี 8 ประเภทเพื่อตรวจสอบการเข้าถึงได้
มาตรฐานที่เป็นที่ยอมรับในวงการสิ่งพิมพ์ทางวิชาการ — Okabe-Ito (แนะนำโดย Nature Methods), ชุดสี Paul Tol, จานสีของวารสาร Nature NPG และ Viridis ที่มีความสม่ำเสมอทางการรับรู้ ตัวอย่างสีแต่ละอันมาพร้อมเกรดคอนทราสต์ APCA และเครื่องจำลองการมองเห็นสี 8 ประเภทด้านล่างช่วยตรวจสอบจานสีแบบเรียลไทม์
ป้อนสีแบรนด์หนึ่ง ส่งออก primary / secondary / success / warning / danger เป็น Tailwind config และ CSS variables