OKLCH Contrast Checker: เช็ค Contrast สีตามมาตรฐาน WCAG AA/AAA ด้วย Slider เชิงการรับรู้

ปัญหา color contrast เป็นหนึ่งในสาเหตุอันดับต้น ๆ ที่เว็บไซต์ไม่ผ่านการตรวจ accessibility และก็เป็นปัญหาที่แก้ง่ายที่สุดเช่นกัน — ถ้าคุณมองเห็นมันตั้งแต่ตอนกำลังเลือกสี OKLCH Contrast Checker คือเครื่องมือที่ให้สภาพแวดล้อมทดสอบ contrast ตาม WCAG 2.x แบบ real-time โดยสร้างบน OKLCH ซึ่งเป็น color space เชิงการรับรู้ (perceptual color space) ที่ CSS ยุคใหม่รองรับโดยตรง

แทนที่จะนั่งแก้ hex code ทีละนิดแล้วรันเช็คใหม่ คุณปรับ Lightness, Chroma และ Hue ด้วย slider แยกกันทั้งฝั่ง foreground และ background แล้วค่า contrast ratio จะอัปเดตทันที พร้อม badge ผ่าน/ไม่ผ่าน ของทุก level ของ WCAG ที่โผล่มาพร้อมกับตัวเลข ทำให้ไม่ต้องเดาว่าคู่สีที่เลือกไว้ผ่าน AA หรือ AAA หรือไม่

ทุกอย่างทำงานใน browser ของคุณล้วน ๆ ไม่ต้อง upload ข้อมูลสีไปไหน ไม่ต้องสมัครสมาชิก และฟรี ในบทความนี้เราจะพาไปดูว่าเครื่องมือทำงานอย่างไร ตัวเลขแต่ละตัวมีความหมายว่าอะไร และจะเอาไปใช้ใน workflow ออกแบบและ review ของทีมได้อย่างไร

ทำไมต้องใช้ OKLCH Contrast Checker?

• Slider เชิงการรับรู้ ไม่ใช่การเดาโชค — เพราะ Lightness ใน OKLCH สะท้อนความสว่างตามที่ตามนุษย์รับรู้จริง การขยับ slider L จะเปลี่ยน contrast อย่างคาดการณ์ได้ คุณเลยไม่ต้องเจอเหตุการณ์แบบ "ลดความสว่างสีแล้ว ratio แทบไม่ขยับ" ที่เกิดบ่อยใน sRGB
• เห็นเกณฑ์ WCAG 2.x ทุกตัวในที่เดียว — เครื่องมือเช็คให้ครบทั้ง AA text ปกติ (4.5:1), AA large text (3:1), AAA text ปกติ (7:1), AAA large text (4.5:1) และเกณฑ์ 3:1 สำหรับ UI components และ graphic objects ทั้งหมดใน panel เดียว
• มี OKLab Delta-E คู่กับ WCAG ratio — contrast ratio บอกเกี่ยวกับเกณฑ์ความอ่านง่าย ส่วนค่า ΔE ของ OKLab บอก "ระยะห่างเชิงการรับรู้" ระหว่างสีทั้งสอง การมีทั้งคู่ช่วยให้คุณวิเคราะห์ edge case ที่ ratio เพียงอย่างเดียวดูแลไม่ทั่วถึง
• Live preview ที่เหมือนของจริง — ตัวอย่าง headline ขนาดใหญ่, body text, small print และปุ่มแบบ filled กับ outline จะ render ด้วยคู่สีที่คุณเลือก คุณเลยตัดสินจาก UI จริง ไม่ใช่แค่ swatch สีกระจก
• ทำงานร่วมกับ CSS ยุคใหม่ได้เลย — เครื่องมืออ่านและแสดง notation oklch() ตรง ๆ เช่น oklch(0.98 0.005 250) คัดลอกไปแปะใน CSS หรือ design tokens ได้ทันที
• Private และเร็ว — คำนวณใน browser ทั้งหมด latency เป็นศูนย์ ข้อมูลไม่ออกจากเครื่องคุณ เหมาะมากเวลาทำงานกับ brand palette ที่ยังไม่เปิดตัว

ฟีเจอร์เด่น

หัวใจของเครื่องมือคือ design แบบ slider คู่: ชุด L/C/H เต็มรูปแบบหนึ่งชุดสำหรับสีตัวอักษร อีกชุดสำหรับสีพื้น เทคนิคที่ใช้ได้ผลดีคือ lock สีพื้นหลังไว้แล้วค่อย ๆ ลด Lightness ของตัวอักษรลงจน badge เขียวครบ — ค่า L ต่ำสุดที่ยังผ่าน AAA มักเป็นตัวเลือกที่สมดุลที่สุดในแง่ความสวยงามด้วย

ส่วน Delta-E เปรียบเสมือนเลนส์ตัวที่สอง คู่สีสองคู่อาจผ่าน AA ทั้งคู่ แต่ให้ความรู้สึกต่างกันมากเวลาใช้งานจริง ΔE เปลี่ยนความต่างนั้นให้เป็นตัวเลขที่วัดได้ ซึ่งมีประโยชน์มากเวลาเปรียบเทียบคู่สีที่เป็นไปได้ หรือตอนปรับจูนระดับ large text

วิธีใช้งาน

1. เปิด OKLCH Contrast Checker — เครื่องมือจะโหลดพร้อมคู่สี foreground/background ตั้งต้นไว้ให้เห็นกลไกทำงานทันที
2. ตั้งค่าสี background ด้วย slider Lightness, Chroma และ Hue ของฝั่งนั้น (หรือเริ่มจากค่าปัจจุบันแล้วค่อยปรับ)
3. ปรับ slider ของ foreground พร้อมจับตา contrast ratio และ compliance badge ที่อัปเดตแบบ real-time
4. ดูผลใน results panel: ยืนยันสถานะ AA และ AAA สำหรับขนาดตัวอักษรที่ใช้ และจดค่า OKLab ΔE สำหรับระยะห่างเชิงการรับรู้
5. ตรวจ live preview ของ large text, body text, small print และปุ่ม กด Swap เพื่อเช็คคู่กลับด้าน แล้วคัดลอกค่า oklch() ไปใช้ใน CSS

ทำความเข้าใจ OKLCH และ WCAG Contrast

OKLCH คือรูปทรง cylindrical ของ OKLab — color space ที่ออกแบบมาให้ "ระยะทางเชิงตัวเลขที่เท่ากัน มีความต่างที่ตารับรู้เท่ากัน" ช่องสีทั้งสาม map เข้ากับสัญชาณญาณตรง ๆ: L (Lightness) วิ่งจาก 0 (ดำ) ถึง 1 (ขาว), C (Chroma) คือความอิ่มสี จากกลาง (0) ไปจนจัด และ H (Hue) คือมุมรอบ color wheel เป็นองศา

เรื่องนี้สำคัญกับงาน contrast เพราะ contrast ratio ของ WCAG 2.x คำนวณจาก relative luminance ซึ่งบีบโทนสีเข้มให้แน่นเข้าหากัน ใน sRGB หรือ HSL สีเข้มสองสีที่ตามองแยกได้ชัดเจนอาจมี luminance ใกล้เคียงกันมาก เลยมีอาการ "แก้ hex นิดเดียวแต่ ratio แทบไม่ขยับ" ในขณะที่ใน OKLCH การลด Lightness ลงตาม step คงที่จะให้ผล contrast ที่เปลี่ยนอย่างสม่ำเสมอ — นี่คือเหตุผลที่ slider ทำให้การจูนเร็วขึ้นมาก และเป็นเหตุผลที่ CSS Color Level 4 รับ oklch() เข้ามา ดีไซเนอร์สร้าง palette ที่ค่องเป็นเชิงมนุษย์ได้

ตัวเกณฑ์ของ WCAG เป็นแบบ ratio: 4.5:1 คือขั้นต่ำ AA ของ text ปกติ (ประมาณ 18px ลงไป หรือ 14px ตัวหนา) 3:1 ใช้กับ large text — ตั้งแต่ 24px หรือ 18.66px ตัวหนา — และใช้กับ UI components และ graphic objects ที่มีความหมาย เช่น ขอบ input และ icon ด้วย 7:1 คือ AAA สำหรับ text ปกติ และ 4.5:1 คือ AAA สำหรับ large text หลายทีมตั้ง AAA เป็นเป้าหมายของ body copy เพราะครอบคลุมผู้ใช้ low-vision, จอรุ่นเก่า และแสงแวดล้อมจ้าได้สบาย ๆ

แล้ว OKLab Delta-E อยู่ตรงไหน? WCAG ratio เป็นการเช็คเกณฑ์ที่ derive จาก luminance มันไม่ได้บอกว่าสีสองสี "ดูต่างกัน" แค่ไหนโดยรวม ΔE วัดระยะห่างเชิงการรับรู้ครบทุกช่องสี รวม hue และ chroma ด้วย คู่สีสองคู่อาจมี ratio ใกล้กันแต่ ΔE ต่างกันมหาศาล (และกลับกัน) ตอนตัดสินใจเลือกระหว่างคู่สีที่ผ่านทั้งคู่ หรือประเมินว่าคู่สี 3:1 สำหรับ large text ยังให้ความรู้สึก "แยกออกจากกัน" พอหรือเปล่า ΔE ให้ตัวเลขสำหรับการตัดสินใจนั้น มันคือส่วนเสริมของ ratio ไม่ใช่ตัวแทน

ตัวอย่างการใช้งานจริง

Audit color tokens ของ design system

Design system สะสมคู่ text-on-surface ไว้เยอะ ทั้ง primary, muted, disabled และ inverse ลองเอาค่า OKLCH ของแต่ละคู่ token มาเช็คแล้วจดว่าผ่าน level ไหน อะไรที่ไม่ผ่าน AA สำหรับการใช้งานที่กำหนดไว้ ให้ flag ไว้ปรับ Lightness — บ่อยครั้งแค่ขยับ L หนึ่ง step ก็ผ่านโดยที่แบรนด์ยังดูเป็นสีเดิม

จับคู่สี text ใน dark mode

Dark mode คือแหล่งรวมปัญหา contrast: พื้นหลังมืดลง แต่สี text ของแบรนด์มักคงเดิม ตั้ง surface มืดเป็น background แล้วดึง hue ของแบรนด์มาเป็น foreground จากนั้นค่อย ๆ ลด Lightness จน badge เขียว เพราะ OKLCH คง Chroma และ Hue ไว้ให้ระหว่างเลื่อน L สีที่ปรับแล้วยังดูเป็น "สีแบรนด์เดิม" ไม่เพี้ยนไปจากตัว

ตรวจปุ่มและ CTA

Element แบบ interactive ต้องผ่าน 3:1 สำหรับขอบเขตและ state indicator และถ้ามีตัวอักษรข้างใน ตัวอักษรนั้นต้องผ่านเกณฑ์ text บนพื้นของมันเองด้วย เช็คสองทิศทางด้วยปุ่ม Swap: label-on-fill สำหรับเกณฑ์ text และ fill-on-page สำหรับขอบเขต component ตัวอย่างปุ่มใน live preview มีทั้งแบบ filled และ outline ซึ่งเป็นการเปรียบเทียบที่ต้องใช้จริง

Review accessibility ก่อน launch

ก่อน ship หน้าไหน ลองไล่คู่สีหลักของหน้านั้น — body text, secondary text, link, disabled state และสีเน้นกราฟ — แล้วยืนยันว่าแต่ละคู่ผ่าน level ที่ตั้งใจไว้ ใช้เวลาแค่ไม่กี่นาทีกับ slider และจับได้ทุก failure ที่ page scanner อัตโนมัติมักพลาดตอนสีถูก set ผ่าน CSS variables หรือ themes

Best Practices

• เริ่มจาก background แล้วค่อยจูน Lightness ของ foreground — สี surface มักถูกจำกัดด้วยแบรนด์หรือ theme เดิม ส่วน L ของ foreground คือปุ่มบังคับที่มี leverage สูงสุดในการดันให้ถึงเกณฑ์
• เช็คที่ level ที่ผู้ใช้ของคุณต้องการ — AA คือขั้นต่ำตามกฎหมายในบริบทส่วนใหญ่ ถ้า palette เอื้อให้ตั้ง AAA สำหรับ body copy ได้ ควรทำ เพราะสายตาที่อายุขึ้นและจอราคาถูกกิน margin ของ contrast ไปเยอะ
• อย่าตัดสิน contrast ด้วยตาบนจอของตัวเองอย่างเดียว — การ calibrate จอ, ความสว่าง และแสงรอบตัวแตกต่างกันมหาศาล ratio เป็นมาตรฐานอยู่แล้วเพราะการเช็คด้วยตาไม่น่าเชื่อถือ
• เช็ค disabled และ placeholder state ด้วย ไม่ใช่แค่ text หลัก — สีเทาจาง ๆ พวกนี้ fail กันถี่มากและถูกมองข้ามง่ายเพราะตั้งใจให้จางอยู่แล้ว
• ตรวจทั้งสองทิศทางด้วยปุ่ม Swap — ดีไซน์บางอัน render กลับสี (hover state, แถวที่เลือก, badge) คู่สีที่ผ่านทางเดียวอาจไม่ผ่านอีกทางที่เกณฑ์ large text
• ใช้ Delta-E อย่างมีบริบท — ใช้ ΔE เพื่อเปรียบเทียบคู่สีที่เป็นไปได้และ sanity-check ความแตกต่างเชิงการรับรู้ แต่ให้ WCAG ratio เป็นตัวตัดสินเรื่อง compliance

เริ่มเช็คสีของคุณวันนี้

Color accessibility ไม่จำเป็นต้องเป็นงานซ่อมท้าย ถ้ามี loop ที่ถูกต้อง มันจะกลายเป็นส่วนหนึ่งของวิธีเลือกสีตั้งแต่แรก เปิด OKLCH Contrast Checker ใส่ foreground และ background ของคุณ แล้วให้ slider กับ badge พาไปถึง palette ที่ผ่าน AA และ AAA โดยไม่ต้องเดา ผู้ใช้ของคุณ — รวมถึงคนที่ไม่เคยบอกว่าอ่านตัวอักษรของคุณลำบาก — จะรู้สึกได้ถึงความต่าง

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

• Color Contrast Checker
• Color Blindness Simulator
• Color Palette Generator

ขอให้สนุกกับการออกแบบ interface ที่ทุกคนเข้าถึงได้!