Leonardo

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

Leonardo ใช้พื้นที่สีขั้นสูงเพื่อให้แน่ใจว่าสเกลสีมีความสม่ำเสมอตามการรับรู้ของมนุษย์ ซึ่งหมายความว่าความแตกต่างระหว่างแต่ละระดับมีความสม่ำเสมอ ป้องกันเอฟเฟกต์ 'banding' ที่มักพบในไล่ระดับสี RGB แบบเชิงเส้น ซึ่งเป็นสิ่งสำคัญสำหรับการแสดงผลข้อมูลที่ระดับสีต้องแสดงค่าข้อมูลได้อย่างแม่นยำโดยไม่มีอคติทางสายตา

เครื่องมือนี้ช่วยให้สร้างธีมที่ปรับเปลี่ยนได้แบบเรียลไทม์ โดยใช้โมดูล npm ที่เกี่ยวข้อง นักพัฒนาสามารถอนุญาตให้ผู้ใช้ปลายทางปรับคอนทราสต์ ความสว่าง และความอิ่มตัวของสีของ UI ทั้งหมดได้ ซึ่งให้ระดับความครอบคลุมสูง ช่วยให้ผู้ที่มีความบกพร่องทางสายตาสามารถปรับแต่งอินเทอร์เฟซตามความต้องการเฉพาะของตนได้โดยไม่ต้องใช้สไตล์ชีต 'คอนทราสต์สูง' แยกต่างหาก

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

Leonardo เชื่อมช่องว่างระหว่างการออกแบบและการพัฒนาโดยการส่งออกธีมเป็น Design Tokens มาตรฐาน ซึ่งเป็นไปตามข้อกำหนดของกลุ่มงาน W3C ทำให้เข้ากันได้กับระบบการออกแบบสมัยใหม่ นักพัฒนาสามารถนำโทเค็นเหล่านี้ไปใช้ใน CSS หรือไปป์ไลน์การสร้างโค้ดได้โดยตรง เพื่อให้มั่นใจว่าเจตนาในการออกแบบจะถูกรักษาไว้อย่างสมบูรณ์ในโค้ดการผลิตขั้นสุดท้าย