
Leonardo 是一個開源色彩管理系統,專為構建無障礙、適應性 UI 與資料視覺化調色盤而設計。與靜態選色器不同,Leonardo 使用基於對比度比率的生成方式,確保比例尺中的每個色塊皆符合特定的 WCAG 無障礙要求。它利用先進的色彩空間來實現感知均勻的結果,讓設計師能定義目標亮度與對比度比率,而非手動輸入 Hex 值。透過整合 @adobe/leonardo-contrast-colors 引擎,開發者能匯出支援即時、終端使用者主題個人化的設計代幣(Design Tokens),包含動態深色模式與高對比度調整。
使用者無需手動選擇 Hex 代碼,而是定義相對於背景的目標對比度比率。Leonardo 會自動計算達到特定 WCAG 目標所需的顏色值。這消除了無障礙合規性中的猜測,確保文字與 UI 元素在所有生成的色階中皆保持可讀性,無論基礎顏色的色相或亮度為何。
Leonardo 利用先進的色彩空間確保色彩比例尺在感知上是均勻的。這意味著比例尺中各步驟間的感知差異對人眼而言是一致的,避免了線性 RGB 漸層中常見的「條帶」效應。這對於資料視覺化至關重要,因為色彩步驟必須準確呈現資料值,而不能產生視覺偏差。
該工具支援建立可即時調整的適應性主題。透過相關的 npm 模組,開發者能讓終端使用者修改整個 UI 的對比度、亮度和飽和度。這提供了高度的包容性,讓視障使用者能根據特定需求自訂介面,而無需額外的「高對比度」樣式表。
Leonardo 內建評估調色盤對抗各種色覺障礙(包括紅色盲、綠色盲與藍色盲)的工具。它能計算色塊間可測量的色彩差異,讓設計師自動循環切換顏色以找出對所有使用者皆能保持區分的組合,確保資料視覺化具備普遍的可解讀性。
Leonardo 透過將主題匯出為標準設計代幣,彌合了設計與開發之間的差距。這些代幣遵循 W3C 工作小組規範,使其與現代設計系統相容。開發者可直接將這些代幣匯入 CSS 或建置管線,確保設計意圖在最終生產程式碼中得到完美保留。
前往 leonardocolor.io 並選擇「Create new theme」以初始化您的調色盤工作區。定義基礎顏色並為比例尺中的每個色塊設定目標對比度比率(例如 3:1、4.5:1)。使用感知色彩空間控制項調整亮度與飽和度參數,以確保視覺平衡。在不同的色覺障礙模式下預覽您的主題,以驗證無障礙合規性。將您的作品匯出為 CSS 自訂屬性、SVG 資產或 JSON 設計代幣,以便整合至您的程式碼庫中。安裝 @adobe/leonardo-contrast-colors npm 套件,即可在應用程式中動態實作該主題。
設計系統負責人使用 Leonardo 定義單一色彩來源。透過基於對比度比率生成比例尺,他們確保庫中的每個元件(從按鈕到資料圖表)預設皆具備無障礙性,減少了手動進行無障礙審核的需求。
資料科學家與前端工程師使用 Leonardo 建立順序與發散式色彩比例尺。透過確保感知均勻性與色盲安全性,他們能製作出準確呈現資料趨勢的圖表,而不會因視覺障礙誤導使用者。
產品團隊整合 Leonardo npm 模組,在應用程式中提供「無障礙設定」。使用者可調整全域 UI 對比度或亮度,應用程式會動態重新渲染調色盤,在滿足使用者偏好的同時維持無障礙標準。
設計師需要建立超越靜態調色盤、可擴展且具備無障礙性的色彩系統。Leonardo 讓他們在維持設計完整性的同時,確保嚴格遵守 WCAG 無障礙標準。
工程師需要以程式化方式實作色彩系統。Leonardo 提供了自動化主題生成所需的 npm 套件與設計代幣格式,確保複雜網頁應用程式的一致性。
專家使用 Leonardo 審核並優化調色盤。該工具提供了證明色彩系統具備包容性,且適用於各種色覺障礙人士所需的量化數據。
基於 Apache 2.0 授權的開源專案。所有工具及相關 npm 套件皆可免費應用於商業與個人專案。