Accessibility & Contrast

ค่าทั้งหมดในหน้านี้คำนวณจากสูตร relative luminance ของ WCAG 2.1 ((L1 + 0.05) / (L2 + 0.05)) บนพื้นหลังสีขาว #FFFFFF ยกเว้นที่ระบุเป็นอย่างอื่น — เป็นกฎที่บังคับใช้จริง ไม่ใช่คำแนะนำเฉยๆ

เกณฑ์ WCAG AA ที่ใช้ตัดสินในหน้านี้

• ตัวอักษรปกติ (normal text) ต้องได้ 4.5:1 ขึ้นไป
• ตัวอักษรใหญ่ (large text) ต้องได้ 3:1 ขึ้นไป — นิยาม "ใหญ่" ของ WCAG คือ ≥ 24px ปกติ หรือ ≥ 18.66px ตัวหนา (18pt / 14pt bold) เท่านั้น ตัวหนา 14px หรือ 16px ไม่นับเป็น large text
• องค์ประกอบที่ไม่ใช่ตัวอักษร (ขอบปุ่ม, ไอคอนที่สื่อความหมาย, เส้นกรอบช่องกรอก) ต้องได้ 3:1 ตาม WCAG 1.4.11

สีตัวอักษรบนพื้นขาว

การ์ดแต่ละใบเรนเดอร์ด้วยสีจริง ตัวเลขใหญ่คือ contrast ratio ที่คำนวณได้ และข้อความสามขนาดในการ์ดคือ 12px / 16px / 24px bold ตามลำดับ — ให้ตัดสินด้วยตาตัวเองว่าอ่านออกจริงไหม

16.10:1

ข้อความ 12px อ่านออกชัดเจน

ข้อความ 16px อ่านออกชัดเจน

หัวข้อ 24px ตัวหนา

#22242A บน #FFFFFF

AA ปกติAA ใหญ่AAA

Text Strong — หัวข้อและข้อความที่ต้องเน้น ใช้แทนสีดำสนิท #000000 ตามกฎแบรนด์

5.74:1

ข้อความ 12px อ่านออกชัดเจน

ข้อความ 16px อ่านออกชัดเจน

หัวข้อ 24px ตัวหนา

#63666F บน #FFFFFF

AA ปกติAA ใหญ่AAA

Dark Grey — สี body text หลักของแบรนด์ ผ่าน AA ทุกขนาด แต่ยังไม่ถึง AAA (ต้อง 7:1)

5.47:1

ข้อความ 12px อ่านออกชัดเจน

ข้อความ 16px อ่านออกชัดเจน

หัวข้อ 24px ตัวหนา

#C43400 บน #FFFFFF

AA ปกติAA ใหญ่AAA

Dark Orange — ตัวเดียวในตระกูลส้มที่ใช้เป็นตัวอักษรบนพื้นขาวได้ ใช้กับลิงก์ caption และข้อความสีส้มขนาดเล็กทั้งหมด

2.91:1

ข้อความ 12px อ่านยากมาก

ข้อความ 16px อ่านยาก

หัวข้อ 24px ตัวหนา

#FF6727 บน #FFFFFF

AA ปกติAA ใหญ่AAA

Primary Orange — ไม่ผ่านแม้เกณฑ์ large text 3:1 ห้ามใช้เป็นสีตัวอักษรบนพื้นขาวทุกขนาด ใช้ได้เฉพาะเป็นสีพื้น สีไอคอนตกแต่ง และเส้นเน้น

2.80:1

ข้อความ 12px อ่านยากมาก

ข้อความ 16px อ่านยาก

หัวข้อ 24px ตัวหนา

#989AA5 บน #FFFFFF

AA ปกติAA ใหญ่AAA

Light Grey — ใช้ได้เฉพาะ decorative, disabled state และเส้นแบ่ง ห้ามใช้กับข้อความที่ผู้ใช้ต้องอ่านเพื่อทำงานให้เสร็จ

2.11:1

ข้อความ 12px อ่านไม่ออก

ข้อความ 16px อ่านไม่ออก

หัวข้อ 24px ตัวหนา

#FF9956 บน #FFFFFF

AA ปกติAA ใหญ่AAA

Primary Light — สำหรับพื้นหลังอ่อน hover state และเส้นขอบเท่านั้น ห้ามใช้เป็นตัวอักษรบนพื้นสว่างเด็ดขาด

ตัวอักษรบนพื้นสีส้ม — กรณีปุ่ม

นี่คือจุดที่พลาดกันบ่อยที่สุด ปุ่มพื้นส้ม #FF6727 กับตัวอักษรสีขาวได้ contrast แค่ 2.91:1 ซึ่งไม่ผ่านทั้งเกณฑ์ตัวอักษรปกติ (4.5:1) และเกณฑ์ตัวอักษรใหญ่ (3:1) — การเพิ่มความหนาหรือขยายขนาดตัวอักษรไม่ช่วย เพราะค่า contrast ไม่ได้ขึ้นกับขนาด

2.91:1

ดูรายละเอียดโครงการ

ตัวหนา 24px

#FFFFFF บน #FF6727

AA ปกติAA ใหญ่

ไม่ผ่าน — คู่สีนี้ยังพบในงานเก่าอยู่มาก ให้เปลี่ยนไปใช้อีกสองแบบด้านล่างแทน

5.54:1

ดูรายละเอียดโครงการ

ตัวหนา 24px

#22242A บน #FF6727

AA ปกติAA ใหญ่

ทางเลือกที่ 1 — คงพื้นส้มแบรนด์ไว้ เปลี่ยนตัวอักษรเป็น Text Strong ผ่าน AA ทุกขนาด

5.47:1

ดูรายละเอียดโครงการ

ตัวหนา 24px

#FFFFFF บน #C43400

AA ปกติAA ใหญ่

ทางเลือกที่ 2 — คงตัวอักษรขาวไว้ เปลี่ยนพื้นเป็น Dark Orange เหมาะกับปุ่มหลักที่ต้องดูจริงจัง

ข้อขัดแย้งที่ต้องตัดสินใจร่วมกับทีมแบรนด์

button.bg-primary (#FF6727) คู่กับ button.text-on-primary (#FFFFFF) ใน Color Tokens เป็นคู่ที่ ไม่ผ่าน WCAG AA ที่ 2.91:1 — หน้านี้ระบุทางเลือกที่ผ่านไว้สองแบบแล้ว แต่การเปลี่ยน token กลางกระทบงานที่ ship ไปแล้วทั้งระบบ จึงต้องให้ทีมแบรนด์อนุมัติก่อน ห้ามแก้ค่าใน bgrimm.tokens.json เองโดยพลการ

ทดลองเอง — Contrast Simulator

เลือกขนาดตัวอักษรด้านล่าง ป้ายผลจะเปลี่ยนตามเกณฑ์ WCAG ที่ใช้กับขนาดนั้น (12/14/16px ใช้เกณฑ์ 4.5:1 · 19px bold และ 24px ใช้เกณฑ์ 3:1)

12px ปกติ 14px ปกติ 16px ปกติ 19px bold ใหญ่ 24px ใหญ่

พลังงานที่ยั่งยืน Sustainable

#63666F บน #FFFFFF · 5.74:1

ผ่าน AA ปกติ 4.5:1

ผ่าน AA ใหญ่ 3:1

พลังงานที่ยั่งยืน Sustainable

#C43400 บน #FFFFFF · 5.47:1

ผ่าน AA ปกติ 4.5:1

ผ่าน AA ใหญ่ 3:1

พลังงานที่ยั่งยืน Sustainable

#FF6727 บน #FFFFFF · 2.91:1

ไม่ผ่าน AA ปกติ 4.5:1

ไม่ผ่าน AA ใหญ่ 3:1

พลังงานที่ยั่งยืน Sustainable

#989AA5 บน #FFFFFF · 2.80:1

ไม่ผ่าน AA ปกติ 4.5:1

ไม่ผ่าน AA ใหญ่ 3:1

พลังงานที่ยั่งยืน Sustainable

#FFFFFF บน #FF6727 · 2.91:1

ไม่ผ่าน AA ปกติ 4.5:1

ไม่ผ่าน AA ใหญ่ 3:1

พลังงานที่ยั่งยืน Sustainable

#22242A บน #FF6727 · 5.33:1

ผ่าน AA ปกติ 4.5:1

ผ่าน AA ใหญ่ 3:1

ตารางสรุปค่า

สี	HEX	บนขาว #FFFFFF	บนเข้ม #22242A	AA ปกติ (บนขาว)
Text Strong	#22242A	15.51:1	1.00:1	✅ ผ่าน
Dark Grey	#63666F	5.74:1	2.81:1	✅ ผ่าน
Dark Orange	#C43400	5.47:1	2.94:1	✅ ผ่าน
Primary Orange	#FF6727	2.91:1	5.33:1	❌ ไม่ผ่าน
Light Grey	#989AA5	2.80:1	5.75:1	❌ ไม่ผ่าน
Primary Light	#FF9956	2.11:1	7.62:1	❌ ไม่ผ่าน
Border Grey	#D9DAE4	1.39:1	11.58:1	❌ ไม่ผ่าน (ไม่ใช่สีตัวอักษร)

อ่านคอลัมน์ "บนเข้ม" ให้เป็น

สีที่ไม่ผ่านบนพื้นขาวส่วนใหญ่ผ่านสบายบนพื้นเข้ม — #FF6727 ได้ 5.33:1 และ #FF9956 ได้ 7.34:1 บน #22242A ในโหมด dark จึงใช้ส้มเป็นสีตัวอักษรได้ แต่ในโหมด light ต้องสลับไปใช้ #C43400 เสมอ นี่คือเหตุผลที่ custom.css แยกค่าสีลิงก์ระหว่างสองโหมด

กฎที่ต้องจำ

• ห้ามใช้ #FF6727 เป็นสีตัวอักษรบนพื้นขาว ทุกขนาด — ไม่ผ่านแม้เกณฑ์ large text ให้ใช้ #C43400 แทน
• ปุ่มพื้นส้ม #FF6727 ห้ามใช้ตัวอักษรสีขาว (2.91:1) ให้เลือกอย่างใดอย่างหนึ่ง: ตัวอักษร #22242A บนพื้น #FF6727 (5.33:1) หรือตัวอักษรขาวบนพื้น #C43400 (5.47:1)
• การทำตัวอักษรให้หนาขึ้นหรือใหญ่ขึ้น ไม่ได้เพิ่ม contrast ratio — มันแค่เปลี่ยนเกณฑ์ที่ใช้ตัดสินจาก 4.5:1 เป็น 3:1 และต้องถึงขนาด 24px ปกติ หรือ 18.66px ตัวหนา จริงๆ เท่านั้น
• #989AA5 และ #FF9956 ใช้ได้เฉพาะ UI ที่เป็น decorative/disabled/พื้นหลัง ห้ามใช้กับสิ่งที่ผู้ใช้ต้องอ่านเพื่อทำงานให้เสร็จ
• ห้ามสื่อความหมายด้วยสีเพียงอย่างเดียว (WCAG 1.4.1) — สถานะผิดพลาดต้องมีไอคอนหรือข้อความกำกับ ไม่ใช่แค่เปลี่ยนขอบเป็นสีแดง
• เช็คด้วยเครื่องมือจริงก่อน ship เสมอ เช่น WebAIM Contrast Checker หรือ Chrome DevTools ที่แสดงค่า contrast ให้ในช่อง color picker