HEX, RGB, HSL, CMYK และการตรวจคอนทราสต์ของข้อความ

รหัสสีคือสีเดียวกันที่เขียนด้วยรูปแบบต่างกัน HEX, RGB และ HSL อธิบายแสงเดียวกันบนหน้าจอ จึงแปลงไปมาหากันได้อย่างแม่นยำ ยกเว้นการปัดเศษ ส่วน CMYK อธิบายหมึกบนกระดาษ การแปลงจากค่าบนหน้าจอจึงเป็นเพียงค่าประมาณ อัตราส่วนคอนทราสต์ WCAG เป็นตัวเลขอีกตัวที่เปรียบเทียบว่าสีสองสีต่างกันเรื่องความสว่างมากน้อยแค่ไหน และใช้ตัดสินว่าข้อความอ่านได้หรือไม่ วางสีลงใน เครื่องแปลงรหัสสี เพื่อดูทุกรูปแบบพร้อมกัน

เครื่องแปลงรหัสสีต้องการสีในรูปแบบอื่นใช้ฟรี

หากสีที่ต้องการอยู่ในรูปถ่าย โลโก้ หรือภาพหน้าจอ ให้อ่านค่าจากพิกเซลด้วย ดูดสีจากรูปภาพ ก่อน แล้วค่อยวางรหัส HEX ที่นี่ วิธีดูดสีที่แม่นยำจากรูปภาพ อธิบายขั้นตอนไว้

HEX กับ RGB คือตัวเลขชุดเดียวกัน

รหัส HEX คือเลขฐานสิบหกสามคู่ #34D6A0 มีค่าสีแดง เขียว และน้ำเงินอยู่ในนั้น แต่ละคู่คือเลขตั้งแต่ 00 ถึง FF ซึ่งเท่ากับ 0 ถึง 255 ในฐานสิบ ดังนั้น 34 คือ 52, D6 คือ 214 และ A0 คือ 160 รูปแบบ RGB จึงเป็น rgb(52, 214, 160)

การเขียนตัวเลขเป็นฐานสิบหกเปลี่ยนเพียงรูปลักษณ์เท่านั้น รูปย่อ #abc หมายถึง #aabbcc โดยแต่ละหลักถูกทำซ้ำ รหัสแปดหลักจะเพิ่มคู่ค่าความโปร่งใสต่อท้าย โดย 00 คือโปร่งใสสนิท และ FF คือทึบแสงเต็มที่ ดังนั้น #34D6A080 จึงโปร่งใสประมาณครึ่งหนึ่ง รูปแบบ RGBA เขียนค่าความโปร่งใสเดียวกันเป็นตัวเลขตั้งแต่ 0 ถึง 1

CSS ยังรองรับชื่อสีด้วย rebeccapurple คือ #663399 เครื่องแปลงอ่านชื่อสีผ่านตัวเบราว์เซอร์เอง ดังนั้นชื่อสีใดก็ตามที่เบราว์เซอร์รู้จักจะใช้ได้

HSL อธิบายสีแบบที่คนพูดถึงสี

HSL ย่อมาจาก hue (เฉดสี), saturation (ความอิ่มสี) และ lightness (ความสว่าง) เฉดสีคือมุมบนวงล้อสี โดยสีแดงอยู่ที่ 0 องศา สีเขียวที่ 120 และสีน้ำเงินที่ 240 ความอิ่มสีบอกว่าสีนั้นห่างจากสีเทามากน้อยเพียงใด ส่วนความสว่างบอกว่าสีนั้นห่างจากสีดำหรือสีขาวมากน้อยเพียงใด

#34D6A0 เดียวกันนี้คือ hsl(160, 66%, 52%) เฉดสีของมันอยู่ระหว่างสีเขียวกับสีน้ำเงิน ความอิ่มสีสูง และความสว่างอยู่เหนือจุดกึ่งกลางเล็กน้อย HSL เป็นรูปแบบที่แก้ไขด้วยมือได้ง่ายที่สุด เพราะคุณสามารถคงเฉดสีไว้และปรับเฉพาะความสว่างเพื่อให้ได้โทนที่อ่อนลงหรือเข้มขึ้น

HSV คล้ายกับ HSL แต่ใช้ value (ค่าความสว่างของช่องสีที่เข้มที่สุด) แทนความสว่าง ตัวเลือกสีบางตัวใช้ระบบนี้ คุณจึงอาจพบมันในเครื่องมืออื่น เครื่องแปลงแสดง HSV ไว้ข้าง HSL เพื่อให้เปรียบเทียบกันได้

CMYK คือหมึก จึงเป็นค่าประมาณ

หน้าจอเพิ่มแสง คือแดง เขียว และน้ำเงินรวมกันได้เป็นสีขาว ส่วนเครื่องพิมพ์ลดแสงด้วยหมึก คือ ซยาน มาเจนตา เหลือง และดำบนกระดาษขาว สองระบบนี้ไม่อาจตรงกันได้ทุกประการ ค่า CMYK จึงเป็นการแปลงเสมอ

เครื่องแปลงใช้สูตรอย่างง่าย โดยค่า K คือสีดำ ซึ่งเท่ากับ 1 ลบด้วยค่าที่มากที่สุดในบรรดาค่าแดง เขียว และน้ำเงิน ในช่วง 0 ถึง 1 จากนั้นจึงคำนวณค่าซยาน มาเจนตา และเหลืองจากส่วนที่ K เหลือไว้ สูตรนี้ไม่คำนึงถึงหมึก กระดาษ หรือโปรไฟล์สีที่เครื่องพิมพ์ใช้ ผลที่พิมพ์ออกมาจึงอาจต่างไป และสีที่สว่างมากอาจอยู่นอกช่วงที่หมึก CMYK พิมพ์ได้เลย ใช้ค่า CMYK เป็นจุดเริ่มต้นในการคุยกับโรงพิมพ์ และขอตัวอย่างพิมพ์ทดสอบ (proof) ก่อนพิมพ์จำนวนมาก

คอนทราสต์เกี่ยวกับความสว่าง ไม่ใช่เฉดสี

อัตราส่วนคอนทราสต์ WCAG เปรียบเทียบสองสีด้วยค่าความสว่างสัมพัทธ์ (relative luminance) ซึ่งคำนวณจากค่าแดง เขียว และน้ำเงินหลังผ่านการแก้ค่าแกมมา โดยสีเขียวมีน้ำหนักมากที่สุดเพราะดวงตาของมนุษย์ไวต่อสีเขียวที่สุด ช่องสีแต่ละช่องจะถูกแปลงจากสเกล 0 ถึง 255 ก่อน แล้วความสว่างคือ 0.2126 คูณด้วยค่าแดง บวก 0.7152 คูณด้วยค่าเขียว บวก 0.0722 คูณด้วยค่าน้ำเงิน

อัตราส่วนคือค่าความสว่างที่สว่างกว่า บวก 0.05 หารด้วยค่าความสว่างที่มืดกว่า บวก 0.05 สีดำบนสีขาวได้ 21 ต่อ 1 ซึ่งสูงที่สุดเท่าที่เป็นไปได้ สีสองสีอาจต่างกันมากเรื่องเฉดสี แต่ยังได้อัตราส่วนต่ำหากมีความสว่างใกล้เคียงกัน และนี่คือกรณีที่การตรวจสอบนี้มีไว้จับ คอนทราสต์ต่ำแบบเดียวกันนี้ก็เป็นสาเหตุที่ QR code สแกนไม่ได้

เกณฑ์ที่ใช้

WCAG 2.x กำหนดสองระดับ และอัตราส่วนที่ต้องการขึ้นอยู่กับขนาดของข้อความ

• ระดับ AA: 4.5 ต่อ 1 สำหรับข้อความปกติ และ 3 ต่อ 1 สำหรับข้อความขนาดใหญ่
• ระดับ AAA: 7 ต่อ 1 สำหรับข้อความปกติ และ 4.5 ต่อ 1 สำหรับข้อความขนาดใหญ่

ข้อความขนาดใหญ่คือขนาด 24 พิกเซลขึ้นไป หรือ 18.66 พิกเซลและตัวหนา ข้อความที่เล็กกว่านั้นถือเป็นข้อความปกติ ข้อความสีเทาบนพื้นขาวเป็นความผิดพลาดที่พบบ่อย สีเทากลาง ๆ อย่าง #777777 บนพื้นขาวได้ประมาณ 4.48 ต่อ 1 ซึ่งไม่ผ่าน AA สำหรับข้อความปกติเพียงเล็กน้อย แต่ผ่าน AA สำหรับหัวข้อขนาดใหญ่

เครื่องแปลงแสดงอัตราส่วนปัดเศษเป็นทศนิยมสองตำแหน่ง แต่การผ่านหรือไม่ผ่านแต่ละเกณฑ์ใช้ค่าที่แม่นยำ ค่าที่แสดงเป็น 4.50 จึงยังอาจไม่ผ่านได้หากต่ำกว่าเกณฑ์เพียงเล็กน้อย การตรวจสอบนี้วัดเพียงอย่างเดียว คือไม่ครอบคลุมน้ำหนักตัวอักษร ระยะห่างระหว่างบรรทัด หรือการมองเห็นของผู้ที่บอดสี ดังนั้นควรทดสอบหน้าเว็บจริงที่ขนาดจริงด้วย

โทนอ่อนและโทนเข้ม

แถบใต้เครื่องแปลงแสดงสิบเก้าขั้น... ไม่ใช่ ขอแก้: แถบใต้เครื่องแปลงแสดงเก้าขั้นรอบสีนั้น ได้แก่ โทนอ่อนสี่ขั้นที่ผสมเข้ากับสีขาว สีนั้นเอง และโทนเข้มสี่ขั้นที่ผสมเข้ากับสีดำ การคลิกหนึ่งขั้นจะคัดลอกรหัส HEX ของขั้นนั้น วิธีนี้ช่วยเมื่อต้องการชุดสีที่เกี่ยวข้องกัน เช่น สีพื้นหลังอ่อน สถานะเมื่อเอาเมาส์วาง และสีข้อความเข้ม ซึ่งมาจากค่าสีแบรนด์ค่าเดียว ตรวจแต่ละคู่ที่เลือกด้วยส่วนคอนทราสต์ก่อนนำไปใช้

วิธีใช้กับ fixmint

1. วางสีลงในช่อง Color เป็น HEX, RGB, HSL หรือชื่อสี CSS เช่น rebeccapurple
2. อ่านแถว HEX, RGB, HSL, HSV และ CMYK กด Copy ที่แถวที่ต้องการ โดย CMYK ระบุว่าเป็นค่าโดยประมาณ
3. พิมพ์สีพื้นหลังของคุณลงในช่อง Background หรือใช้ตัวอย่างสี แล้วอ่านอัตราส่วนใต้ On white, On black และ On your background
4. ตรวจเครื่องหมายสี่ตัวใต้อัตราส่วนแต่ละค่า คือ AA และ AAA แยกสำหรับข้อความปกติและข้อความขนาดใหญ่
5. ภายใต้ Tints and shades แตะตัวอย่างสีเพื่อคัดลอก

คำตอบด่วน

ค่า CMYK แม่นยำหรือไม่

ไม่ เป็นการแปลงทางคณิตศาสตร์แบบตรงไปตรงมาที่ไม่คำนึงถึงเครื่องพิมพ์ กระดาษ หรือโปรไฟล์สี ให้ถือเป็นจุดเริ่มต้นและขอตัวอย่างพิมพ์ทดสอบ

อัตราส่วนคอนทราสต์ที่ผ่านทำให้การออกแบบเข้าถึงได้หรือไม่

หมายความว่าสีของข้อความผ่านเกณฑ์ที่วัดได้เพียงข้อเดียว การเข้าถึงยังขึ้นอยู่กับขนาด ระยะห่าง การเคลื่อนไหว และโครงสร้างของหน้าเว็บ ดังนั้นอัตราส่วนนี้เป็นแนวทาง ไม่ใช่การตรวจทานฉบับสมบูรณ์

ควรเก็บสีในสไตล์ชีตด้วยรูปแบบใด

รูปแบบที่คุณอ่านและแก้ไขได้ง่ายที่สุด HEX กระชับและพบได้ทั่วไป ส่วน HSL แก้ไขด้วยมือได้ง่ายกว่า เพราะคุณเปลี่ยนความสว่างได้โดยไม่ต้องเปลี่ยนเฉดสี