คอนทราสต์สูง — เมื่อคุณคิดว่าโหมดมืดเพียงพอแล้ว

ความสำคัญของธีมคอนทราสต์สูงในอินเทอร์เฟซและความแตกต่างจากธีมสีเข้ม

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

เดี๋ยวก่อน คุณบอกฉันว่าโหมดมืดนั้นดีสำหรับการเข้าถึง แล้วทำไมเราถึงพูดถึงธีมที่สาม เรามาคุยกันเถอะ

มีคนพูดกันมากแล้วเกี่ยวกับประโยชน์ของโหมดมืดเช่น การเป็นตัวเลือกที่ยอดเยี่ยมสำหรับ Daltonism บางประเภทและผู้ใช้ที่มีอาการกลัวแสง, Keratoconus, DrDeramus เป็นต้น แต่ตอนนี้เป็นเวลาที่จะพิจารณาข้อกำหนดของ WCAG อย่างลึกซึ้งและดำเนินการของเรา ระดับการเข้าถึงสูงยิ่งขึ้น

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

“แล้วฉันจะสร้างประสบการณ์ที่ดีที่ใช้ได้ทุกกรณีได้อย่างไร” มันง่าย: คุณทำไม่ได้ และนั่นเป็นเพราะว่าทุกเอกภาพต้องการวิธีการที่แตกต่างกัน — คุณจะมีผู้ใช้ที่ไม่สามารถทนต่อแสงได้เนื่องจากดวงตาของพวกเขาไหม้ และคุณจะมีผู้ใช้ที่มีสายตาเลือนรางซึ่งต้องการแสงอย่างแท้จริง ดังนั้นทางออกที่ดีที่สุดคือการให้ตัวเลือกที่พวกเขาสามารถเลือกที่เหมาะสมที่สุด Twitter แก้ไขปัญหานี้ได้เป็นอย่างดีด้วยธีม "ค่าเริ่มต้น" (แสง) "สลัว" (มืด) และ "ไฟดับ" (คอนทราสต์สูง)

แต่ในทางปฏิบัติ ธีมคอนทราสต์สูงคืออะไร

ประกอบด้วยจานสีที่จำกัดมากขึ้นซึ่งเน้นที่ความเปรียบต่างระหว่างสีที่สูงขึ้น และนั่นมักจะหมายถึงสีที่น้อยลง เพื่อให้แน่ใจว่าอัตราส่วนคอนทราสต์ขั้นต่ำที่ 7:1 ที่กำหนดโดยระดับ AAA ของ WCAG ธีมคอนทราสต์สูงจะได้รับประโยชน์จากพื้นหลังที่มืดกว่า ซึ่งโดยปกติจะเป็นสีดำล้วน ซึ่งแตกต่างจากโหมดมืดซึ่งสร้างสมดุลระหว่างเฉดสีเทา สีต่างๆ แทนที่จะเป็นจานสีเดิมจะเป็นโทนสีที่ตัดกันอย่างมากกับพื้นหลัง ซึ่งโดยปกติจะเป็นสีเหลืองนีออน — แต่นั่นไม่ใช่กฎ บางครั้งคุณอาจต้องใช้โครงร่างเพื่อคั่นส่วนประกอบเมื่อไม่มีสีให้ทำ

ธีมคอนทราสต์สูงช่วยการเข้าถึงได้อย่างไร

มี Daltonism ที่หายากกว่าสองประเภท ซึ่งเป็นประเภทที่รุนแรงที่สุด:

• สีเดียวซึ่งบุคคลสามารถมองเห็นสีและเฉดสีของมันได้เพียงสีเดียว นอกเหนือจากเฉดสีเทา
• และAchromaticบุคคลนั้นไม่สามารถรับรู้สีใด ๆ และมองเห็นทุกอย่างในโทนสีเทา

Daltonism นั้นไม่ได้เป็นกฎตายตัว — แต่ละคนจะมีประเภทและระดับที่แตกต่างจากที่อื่น ดังนั้น นอกจากสองกรณีสุดโต่งที่ฉันพูดถึงแล้ว ยังมีบางคนที่อาจมองเห็นสีสองสีหรือมากกว่านั้น แต่ขึ้นอยู่กับสภาพของพวกเขา ความเปรียบต่างอาจมีความสำคัญมากและทำให้เกมเปลี่ยนได้

เพื่อให้เป็นไปตามเกณฑ์ความสำเร็จของ WCAG C 1.4.6: Contrast (Enhanced) (Level AAA)และ1.4.11:Non-text Contrast (Level AA)จำเป็นที่ทุกข้อความ รูปภาพที่จำเป็น และส่วนประกอบของอินเทอร์เฟซจะต้องมีอัตราส่วนคอนทราสต์น้อยที่สุด ซึ่งโดยปกติแล้วยากที่จะมีเมื่อมีจานสีที่กำหนดโดยแบรนด์ เมื่อมีการจัดเตรียมธีมที่มีคอนทราสต์สูง ธีมสีอ่อนและ/หรือสีเข้มจะกลายเป็นตัวเลือก เพื่อให้จานสีมาตรฐานยังคงไม่ถูกแตะต้อง เมื่อมีธีมอื่นให้การเข้าถึงที่จำเป็น

Como ter certeza de que minhas cores estão contrastando entre si?

É preciso passar essas cores em um teste de taxa de contraste e garantir que elas estão em conformidade com a WCAG. ที่มีอยู่หลากหลายในโลกออนไลน์และ geralmente elas indicam a taxa e se está conforme os critérios de sucesso da WCAG AA e AAA, em textos pequenos e grandes. ตัวตรวจสอบความคมชัดของสี é uma boa opção nessecaso.

ฉันจะแน่ใจได้อย่างไรว่าสีของฉันตัดกัน

คุณต้องทำการทดสอบอัตราส่วนคอนทราสต์กับสีและตรวจสอบให้แน่ใจว่าเป็นไปตามมาตรฐาน WCAG มีเครื่องมือออนไลน์หลายตัวและมักจะระบุอัตราและไม่ว่าจะเป็นไปตามเกณฑ์ความสำเร็จของ WCAG AA และ AAA ในข้อความขนาดเล็กและใหญ่ ตัวตรวจสอบความคมชัดของสีเป็นตัวเลือกที่ดีในกรณีนี้

และส่วนที่ดีที่สุด: มีความคิดสร้างสรรค์!

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

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

หากคุณกำลังทำงานในโครงการเว็บไซต์ส่วนตัว พอร์ตโฟลิโอ บล็อก และอื่นๆ คุณสามารถสร้าง CV ธีมสีได้เหมือนฉัน ท้ายที่สุดแล้ว ผู้จัดหางานก็สามารถมีความบกพร่องทางสายตาได้เช่นกัน

คุณเคยทำงานกับธีมที่มีคอนทราสต์สูงหรือไม่? บอกฉันเกี่ยวกับประสบการณ์ของคุณ ฉันชอบที่จะรู้ เชอร์

อ้างอิง

• ภาพรวม WCAG 2
• คู่มือ WCAG
• สีและความคมชัด
• ข้อมูลเบื้องต้นเกี่ยวกับการช่วยการเข้าถึงที่มีคอนทราสต์สูง
• โหมดคอนทราสต์สูงในการเข้าถึงเว็บ
• โหมดคอนทราสต์สูง FTW
• โหมดความคมชัดสูงของ Windows
• ตรวจสอบการปฏิบัติตาม WCAG ของคุณ
• เครื่องมือประเมินการเข้าถึงเว็บWAVE

• บทความเกี่ยวกับการเข้าถึงและการออกแบบ
• สถานะโฟกัสที่เซ็กซี่และเข้าถึงได้บนการนำทางด้วยแป้นพิมพ์
• การสร้างธีมในส่วนต่อประสานกับ CSS และตัวแปร
• ความท้าทายในการทำให้ผลิตภัณฑ์ขนาดใหญ่สามารถเข้าถึงได้และสิ่งที่ฉันได้เรียนรู้จากผลิตภัณฑ์นั้น
• การเข้าถึงเป็นเสาหลักที่สำคัญในทีมออกแบบ