ค่าความต่างของสี (Contrast Ratio)
Contrast ratio ใช้ตรวจว่าตัวอักษรอ่านได้ชัดเจนเมื่อวางบนพื้นหลังหรือไม่.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
ค่าความต่างของสี (Contrast Ratio) คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่ต้องตรวจงานหรือวางมาตรฐาน
ใช้เมื่อไหร่
ตอนคุณเลือกสีตัวอักษรและสีพื้นหลัง
อ่านแล้วทำอะไรต่อ
ตัวอักษรรอง ๆ ก็ยังต้องมีความต่างของสีมากพอ โดยเฉพาะใน dashboard ที่ข้อมูลแน่น ๆ
เห็นภาพ: ทริคนี้เป็นยังไง
เทาจาง ✗
#B5B5B5 · ~2:1 อ่านยาก
เทากลาง ✓
#767676 · 4.5:1 ผ่าน AA
เทาเข้ม ✓
#595959 · 7:1 ผ่าน AAA
Ink ✓
#212529 · ชัดสุด
ใช้ตอนไหน?
- ตอนคุณเลือกสีตัวอักษรและสีพื้นหลัง
- ตอนคุณตรวจการ์ดตัวเลขสำคัญ (KPI) บน dashboard
- ตอนคุณกำหนดสีของสถานะหรือสีตอนที่ช่องถูกเลือก
ความหมาย
contrast ratio (อัตราส่วนความต่างของสี) คือการเทียบสีตัวอักษรกับสีพื้นหลัง โดยทั่วไป WCAG AA (มาตรฐานการเข้าถึงง่ายระดับ AA) กำหนดให้ตัวอักษรปกติต้องอย่างน้อย 4.5:1 และตัวอักษรขนาดใหญ่อย่างน้อย 3:1
เป้าหมายที่ใช้ได้จริง
ใช้ระดับ AA เป็นเกณฑ์พื้นฐานสำหรับตัวอักษรทั่วไปบนหน้าจอ
Normal text >= 4.5:1
Large text >= 3:1ตัวอย่างการใช้
ตัวอักษรสีจางบนการ์ด
ตัวอักษรรอง ๆ ก็ยังต้องมีความต่างของสีมากพอ โดยเฉพาะใน dashboard ที่ข้อมูลแน่น ๆ