Color Contrast Checker

ภาพรวม

ตรวจ accessibility ของสี text กับ background — WCAG 2.1 กำหนด contrast ratio ขั้นต่ำ 4.5:1 (AA) สำหรับ normal text และ 7:1 (AAA) สำหรับ enhanced accessibility tool นี้ตรวจและ suggest สีที่ผ่านมาตรฐานถ้าค่าปัจจุบันไม่ผ่าน

สิ่งที่ทำแล้ว

• Contrast ratio — คำนวณจาก relative luminance ตาม WCAG algorithm
• AA/AAA check — แยกตาม text size (normal / large ≥18pt หรือ bold ≥14pt)
• Input formats — รับ hex (#fff, #ffffff), rgb(255,255,255), hsl(0,0%,100%)
• CLI mode — contrast #0f172a #ffffff แสดงผลทันที
• Suggestion — ถ้าไม่ผ่าน AA จะ suggest darkened/lightened versions ที่ผ่านพอดี
• Batch check — อ่านจาก JSON file list ของคู่สีทั้งหมดในระบบ design

ตัวอย่าง Output

$ contrast "#64748b" "#ffffff"

Text:       #64748b
Background: #ffffff
Ratio:      4.63:1

✅ AA  Normal Text (4.5:1 required)
✅ AA  Large Text  (3:1 required)
❌ AAA Normal Text (7:1 required) — suggest: #4a5568
✅ AAA Large Text  (4.5:1 required)

กำลังทำ

• Web UI — input picker พร้อม live preview
• CSS variable audit — อ่านไฟล์ CSS แล้วตรวจทุก color pair อัตโนมัติ
• Export report — สรุปผลเป็น Markdown table หรือ JSON

เทคโนโลยี

• TypeScript + Node.js 22
• WCAG relative luminance algorithm (pure math — ไม่มี dependency)
• culori สำหรับ color space conversion
• chalk สำหรับ colored terminal output