ทำไม WCAG จึงต้องการความคมชัด 4.5:1?
นี่คือมาตรฐาน AA เพื่อให้ผู้พิการทางสายตาระดับปานกลางอ่านข้อความได้โดยไม่ต้องใช้อุปกรณ์ช่วยเหลือ มาตรฐาน AAA ที่เข้มงวดกว่าต้องการ 7:1
เครื่องเลือกสี
เลือกสีและแปลงระหว่าง HEX, RGB, HSL
อัตราส่วนความคมชัด
⬜ ⬛
สีตรงข้าม & สีใกล้เคียง
เครื่องเลือกสี
ควรใช้ HEX หรือ RGB?
HEX กระทัดรัดกว่าและใช้บน CSS มากกว่า ใช้ rgba() เมื่อต้องการความโปร่งใส เช่น rgba(0,0,0,0.5) คือสีดำโปร่งใส 50%
จะนำ dark mode มาใช้กับสียังไง?
ใช้ CSS custom properties กับ @media (prefers-color-scheme: dark) ประกาศตัวแปรสีสำหรับโหมดสว่างเป็นค่าเริ่มต้น แล้วแทนที่ในคำสั่ง media query
รหัสสี HEX RGB และ HSL
HEX, RGB และ HSL คือสามวิธีในการแสดงสีบนคอมพิวเตอร์ HEX (เช่น #FF5733) ใช้บนเว็บมากที่สุด RGB (เช่น rgb(255,87,51)) ใช้ค่าแดง-เขียว-น้ำเงิน ส่วน HSL (เช่น hsl(11,100%,60%)) ใช้สี-ความอิ่มตัว-ความสว่าง ทั้งสามรูปแบบอธิบายสีเดียวกัน แต่ใช้วิธีแสดงที่ต่างกัน
อัตราส่วนความคมชัด WCAG คืออะไร?
มาตรฐาน WCAG AA กำหนดให้อัตราส่วนความคมชัดระหว่างข้อความกับพื้นหลังต้องอย่างน้อย 4.5:1 นี่คือระดับขั้นต่ำเพื่อให้ผู้พิการทางสายตาระดับปานกลางอ่านข้อความได้โดยไม่ต้องใช้อุปกรณ์ช่วยเหลือ มาตรฐาน AAA ที่เข้มงวดกว่าต้องการ 7:1
HSL: โมเดลสีที่เข้าใจได้ง่าย
HSL ใช้ Hue (สี: 0-360°), Saturation (ความอิ่มตัว: 0-100%) และ Lightness (ความสว่าง: 0-100%) อธิบายสีได้ง่ายกว่า RGB ต้องการเวอร์ชันสว่างของสีแบรนด์ก็แค่เพิ่มค่า L โดยไม่ต้องคำนวณ RGB ที่ซับซ้อน HSL จึงนิยมใช้ในระบบออกแบบ
การใช้สีตรงข้ามและสีใกล้เคียง
สีตรงข้ามอยู่ห่างกัน 180° บนวงล้อสี (เช่น น้ำเงินกับส้ม, แดงกับเขียว) สร้างความคมชัดและความตึงเครียดทางภาพสูง สีใกล้เคียงอยู่ติดกัน (เช่น น้ำเงิน, ม่วงน้ำเงิน, ม่วง) สร้างจานสีที่กลมกลืนนุ่มนวล ระบบสี UI ที่ดีมักประกอบด้วยสีหลัก สีเน้น สีกลาง และสีสำหรับความหมาย
จัดการสีด้วย CSS Custom Properties
CSS Custom Properties (ตัวแปร CSS) ช่วยจัดการสีส่วนกลาง: ประกาศ --color-primary: #2563EB; แล้วใช้ background-color: var(--color-primary); ทั่วทั้งเว็บไซต์ เมื่อต้องเปลี่ยนสีแบรนด์ก็แก้แค่ที่เดียว ใช้ร่วมกับ @media (prefers-color-scheme: dark) เพื่อสลับ dark mode ได้ง่าย
คำถามที่พบบ่อย
ควรใช้ HEX หรือ RGB?
HEX กระทัดรัดกว่าและใช้บน CSS มากกว่า ใช้ rgba() เมื่อต้องการความโปร่งใส เช่น rgba(0,0,0,0.5) คือสีดำโปร่งใส 50%
ทำไม WCAG จึงต้องการความคมชัด 4.5:1?
นี่คือมาตรฐาน AA เพื่อให้ผู้พิการทางสายตาระดับปานกลางอ่านข้อความได้โดยไม่ต้องใช้อุปกรณ์ช่วยเหลือ มาตรฐาน AAA ที่เข้มงวดกว่าต้องการ 7:1
จะนำ dark mode มาใช้กับสียังไง?
ใช้ CSS custom properties กับ @media (prefers-color-scheme: dark) ประกาศตัวแปรสีสำหรับโหมดสว่างเป็นค่าเริ่มต้น แล้วแทนที่ในคำสั่ง media query