พิมพ์รหัสสีแบบไหนก็ได้ แปลงให้ครบทุกฟอร์แมตพร้อมกดคัดลอก และเช็กว่าสีตัวอักษรกับพื้นหลังอ่านออกจริงไหมตามมาตรฐาน WCAG
เฉดอ่อน–เข้ม (กดเพื่อเลือก)
ซ้าย = สีตัวอักษร · ขวา = สีพื้นหลัง
#00A99D, #ABC, rgb(0,169,157) หรือ hsl(176,100%,33%) หรือจะกดเลือกจากจานสีก็ได้ทั้งสามแบบคือสีเดียวกันแต่เขียนคนละวิธี HEX เขียนเป็นเลขฐานสิบหกหกหลักอย่าง #00A99D โดยสองหลักแรกคือแดง สองหลักกลางคือเขียว สองหลักท้ายคือน้ำเงิน นิยมที่สุดในงาน CSS และการส่งสีให้กันในทีม
RGB บอกความเข้มของแม่สีทั้งสามเป็นตัวเลข 0–255 ตรงไปตรงมา เหมาะเวลาต้องคำนวณหรือปรับค่าทีละช่อง และรูปแบบ rgba() ยังใส่ความโปร่งใสได้
HSL ต่างออกไปโดยสิ้นเชิงเพราะบอกเป็นเฉดสี (Hue) 0–360 องศา · ความอิ่มตัว (Saturation) · ความสว่าง (Lightness) ข้อดีคือปรับสีให้อ่อนลงหรือเข้มขึ้นได้ง่ายที่สุด แค่แก้ค่าความสว่างค่าเดียว โดยที่เฉดสียังเป็นสีเดิม นี่คือเหตุผลที่ระบบดีไซน์สมัยใหม่นิยมเก็บสีเป็น HSL แล้วสร้างเฉดอ่อน-เข้มทั้งชุดจากค่าเดียว เหมือนแถบเฉดในเครื่องมือนี้
ค่า contrast ratio คืออัตราส่วนความสว่างระหว่างสีตัวอักษรกับสีพื้นหลัง คำนวณจากค่า relative luminance ตามสูตรของ WCAG ค่าต่ำสุดคือ 1:1 (สีเดียวกันสนิท) และสูงสุดคือ 21:1 (ดำสนิทบนขาวสนิท)
| ระดับ | ตัวอักษรปกติ | ตัวอักษรใหญ่* |
|---|---|---|
| AA (ขั้นต่ำที่ควรผ่าน) | 4.5 : 1 | 3 : 1 |
| AAA (ดีเยี่ยม) | 7 : 1 | 4.5 : 1 |
*ตัวอักษรใหญ่ = ขนาดตั้งแต่ 18pt (ราว 24px) ขึ้นไป หรือ 14pt (ราว 18.66px) แบบตัวหนา
ตัวอย่างที่เห็นบ่อยคือสีเทาอ่อนบนพื้นขาว สี #999999 บนพื้นขาวได้ค่าเพียงราว 2.85:1 ซึ่งไม่ผ่านแม้แต่เกณฑ์ขั้นต่ำ ผลคือผู้สูงอายุ ผู้ที่สายตาเลือนราง หรือแม้แต่คนสายตาปกติที่อ่านกลางแดดจะมองไม่ค่อยเห็น ถ้าอยากได้สีเทาที่ยังผ่าน AA ต้องเข้มถึงราว #767676
เรื่องนี้ไม่ใช่แค่ความสวยงาม เว็บที่ contrast ต่ำทำให้ผู้ใช้ส่วนหนึ่งใช้งานไม่ได้จริง และยังกระทบคะแนน Accessibility ใน Lighthouse ซึ่งเป็นหนึ่งในสัญญาณคุณภาพหน้าเว็บด้วย การเช็กตั้งแต่ตอนเลือกสีจึงถูกกว่าการมาไล่แก้ทีหลังมาก
เครื่องมืออื่นที่ใช้คู่กันได้: แปลงไฟล์รูป สำหรับงานกราฟิก · เข้ารหัส Base64 เวลาฝังรูปเล็ก ๆ ลง CSS โดยตรง · จัดรูปแบบ JSON สำหรับไฟล์ config ธีม
สีเดียวกันแต่เขียนคนละวิธี HEX เป็นเลขฐานสิบหกหกหลักนิยมใน CSS · RGB บอกความเข้มแม่สีแดง เขียว น้ำเงิน 0–255 · HSL บอกเฉดสี ความอิ่มตัว ความสว่าง ซึ่งปรับอ่อน-เข้มง่ายที่สุดเพราะแก้แค่ค่าความสว่าง
ตัวอักษรปกติควรอย่างน้อย 4.5:1 จึงผ่าน AA และ 7:1 สำหรับ AAA · ตัวอักษรใหญ่ (18pt ขึ้นไป หรือ 14pt ตัวหนา) ใช้เกณฑ์ 3:1 สำหรับ AA และ 4.5:1 สำหรับ AAA
เพราะค่าความต่างต่ำเกินไป #999999 บนพื้นขาวได้เพียงราว 2.85:1 ไม่ผ่านเกณฑ์ขั้นต่ำ 4.5:1 ทำให้ผู้สูงอายุ ผู้สายตาเลือนราง หรือคนอ่านกลางแดดมองไม่ชัด ควรใช้เข้มขึ้นราว #767676
ผลลัพธ์เหมือนกัน สามหลักเป็นรูปแบบย่อที่ขยายโดยซ้ำตัวอักษรแต่ละตัว เช่น #ABC = #AABBCC ใช้ได้เฉพาะเมื่อคู่ตัวอักษรของแต่ละช่องสีซ้ำกัน สีทั่วไปส่วนใหญ่จึงต้องเขียนหกหลัก
ไม่เปลี่ยน ค่า contrast ratio เป็นอัตราส่วนระหว่างความสว่างของสองสี สลับกันแล้วได้ค่าเท่าเดิม แต่ความรู้สึกในการอ่านอาจต่างกัน ตัวอักษรสว่างบนพื้นมืดมักดูฟุ้งกว่าเมื่อใช้ฟอนต์บาง
ไม่ ทุกอย่างคำนวณในเบราว์เซอร์ของคุณ ไม่มีการส่งขึ้นเซิร์ฟเวอร์ ใช้งานแบบออฟไลน์ได้หลังเปิดหน้าแล้ว