A new feature in Figma that allows design. No more guessing colors!
# New🎉 A new feature in Figma that allows the design to no longer guess the color!
.
Will the Contrast Checker (WCAG) in Color Picker help you check "text to background color" through the Access Standard (WCAG)?
.
"Sunken colors, can't read, UX is broken!" Let's go. 🎯
.
👉 Let's explore here: https://www.figma.com/blog/introducing-keyboard-accessibility-features
.
# ButWhat is WCAG? - Web Content Accessibility Guidelines.
.
Is a way to make websites and apps accessible to everyone.
Whether it's the visually impaired, the elderly, or anyone who doesn't use it like most people.
.
It's time to design "Accessibility Standards"! 🌏
.
If you want to read about WCAG, read more in the comments. 😊
.
Cre.Apple Design Resources
.
# InclusiveDesign # Accessibility # Figma# UXforEveryone # DesignForAll # WCAG
.
# uxuistudio # uxdesign # uidesign # graphicdesign # uxui # uxuiworkshop # uxworkshop # uiworkshop # Figma
# Because we understand what newbies want
ถ้าใครกำลังหา “figma accessibility checker / figma contrast checker” แบบที่ไม่ต้องเดาสีเอง บอกเลยว่าฟีเจอร์ Contrast Checker (WCAG) ที่ซ่อนอยู่ใน Color Picker ของ Figma นี่ตอบโจทย์มาก เพราะมันช่วยตรวจ “อัตราส่วนคอนทราสต์ (contrast ratio)” ระหว่างสีข้อความกับสีพื้นหลังให้ทันที เหมาะทั้งคนทำ UI/UX และคนทำดีไซน์ที่อยากให้ชิ้นงานอ่านง่ายสำหรับทุกคน วิธีที่ฉันใช้เป็นประจำ (เร็วและไม่หลุดโฟกัสงาน) 1) เลือกเลเยอร์ข้อความ (Text) ที่ต้องการเช็ก 2) เปิด Color Picker ของสีตัวอักษร หรือจะเช็กตอนเลือกสีพื้นหลังก็ได้ 3) มองหาส่วน Contrast/Accessibility ในพาเนล จะเห็นตัวเลขอัตราส่วนคอนทราสต์ พร้อมสถานะผ่าน/ไม่ผ่าน (เช่น WCAG AA) 4) ถ้ายังไม่ผ่าน ให้ลองขยับโทนสีให้เข้มขึ้น/อ่อนขึ้น หรือปรับสีพื้นหลัง แล้วดูผลแบบเรียลไทม์จนกว่าจะ “ผ่าน” สิ่งที่ฟีเจอร์นี้ช่วยได้จริงคือ “ลดการเดา” เวลาเลือกสี โดยเฉพาะเคสที่เราชอบเลือกสีสวย ๆ แต่พอวางตัวหนังสือแล้วสีจม อ่านยาก พอมี Contrast Checker ก็รู้ทันทีว่าต้องปรับตรงไหน ไม่ต้อง export ไปลองเช็กในเว็บข้างนอกให้เสียเวลา ทำไมต้องสนใจ WCAG และระดับ AA/AAA? WCAG (Web Content Accessibility Guidelines) คือแนวทางให้เว็บ/แอปเข้าถึงได้สำหรับทุกคน เช่น ผู้มีปัญหาทางสายตา ผู้สูงอายุ หรือคนที่ใช้งานในสภาพแสงจ้า ๆ บนมือถือ ซึ่ง “อ่านออก” สำคัญกว่า “สวยอย่างเดียว” มาก ๆ ในงานจริง โดยทั่วไปทีมโปรดักต์จะเจอคำว่า “ต้องผ่าน AA” บ่อยที่สุด เพราะเป็นระดับที่ใช้งานได้จริงและพบในหลายมาตรฐานองค์กร ทิปที่ฉันใช้ให้ผ่านเร็วขึ้น - เริ่มจากสีข้อความให้เข้มขึ้นก่อน (มักแก้ง่ายกว่าปรับทั้งพื้นหลัง) - ถ้าเป็นข้อความตัวเล็ก ให้เผื่อคอนทราสต์สูงขึ้นไว้ตั้งแต่แรก จะผ่านง่ายกว่า - ใช้สีแดง/ส้ม/เหลืองสดกับตัวหนังสือสีขาวแล้วมักพลาดบ่อย ให้เช็กทุกครั้ง (ตัวอย่างในพาเนลจะบอกเลยว่าผ่าน AA หรือไม่) แล้ว “ต้องใช้ปลั๊กอินไหม?” หลายคนค้นหาคำว่า figma accessibility plugin contrast checker แต่ตอนนี้ในหลายเคส ตัว Contrast Checker ใน Figma ก็เพียงพอสำหรับการเช็กพื้นฐานแล้ว โดยเฉพาะงานที่ต้องการดูผลเร็วใน Color Picker เลย ส่วนปลั๊กอินจะเหมาะกับงานที่ต้อง audit ทั้งหน้าหรือทั้งไฟล์แบบเป็นระบบมากกว่า สรุปคือ ถ้าคุณอยากเริ่มทำ Accessible design แบบไม่ยุ่งยาก ให้เริ่มจากเช็กคอนทราสต์ใน Figma ก่อนเลย แค่ทำให้ “อ่านง่ายและผ่าน WCAG AA” ได้ตั้งแต่ในไฟล์ จะลดรอบแก้กับ dev และทำให้ UX ดีขึ้นแบบเห็นผลทันที