デザインシステムSpectrumのAdobeのデザイナであるNate Baldwin氏は、オープンソースのカラージェネレータであるLeonardoの最初のメジャーバージョンをリリースした。Leonardoは、コントラスト比に基づいて生成された色を使用して、アクセス可能なアダプティブカラーシステムの作成を自動化することにより、デザイナの生産性とエンドユーザエクスペリエンスの向上に努めている。Leonardoは完全なテーマ生成もサポートしており、デザイナとエンジニアの両方を対象としている。
Leonardoは、デザイナとエンジニアの両方と共有できる、Javascriptモジュール (@adobe/leonardo-contrast-colors
) とカラーパレット構成の作成に役立つWebインターフェイスで構成されている。
Leonardoは、ターゲットのコントラスト比に基づいてアダプティブカラーパレットを作成します。次のWebインターフェイスの画像は、2〜6の範囲のコントラスト比のリストに従って生成されるカラースケールと生成コード (右下) を示している:
デフォルトでは、Leonardoは2つのコントラスト比 (3と4.5) を提案する。これらは、大きなテキスト (3:1) と通常のテキスト (4.5:1) に対してWeb Content Accessibility Guidelines 2.0 (Level AA)で推奨されているものである。このインターフェースでは、生成された色を背景コンテキストの組み合わせで表示できる。
Leonardo 1.0では、デザイナは複数のコントラストベースのカラーパレット (テーマなど) を一度に作成することもでき、各出力色は共有背景とのコントラストに基づいている。Adobeでは、Adobe Spectrumの色に基づいて、次のアダプティブテーマの例を提供している:
前に示したインターフェースにより、デザイナはテーマの明るさ、コントラスト、ベースカラーを調整できる。デザイナは、さまざまな色覚異常 (CVD)でテーマがどのように見えるかをシミュレートできる。デザイナはCIECAM02または明度-色相-クロマ (LCH) スペースで作業することもできる。これらは人間の色の知覚に合わせて設計されている。
LeonardoのJavaScriptモジュールは、generateContrastColors
、generateBaseScale
、generateAdaptiveTheme
の3つの主要な機能を持つAPIを開発者に公開する。APIを使用すると、開発者はユーザが主要な知覚パラメータ (明るさなど) を調整できるようにし、コントラスト比を尊重しながらアプリケーションのパレットを自動的に変更することで、包括的かつ適応的なアプリケーションを構築できる。Leonardo Webインターフェイスは、ユーザがダークモードを設定または削除し、インターフェイスの明るさを調整できる、アクセス可能なアダプティブカレンダーアプリケーションの例を提供する:
Baldwin氏は、アクセシビリティの懸念をデザインに含めることの重要性と、オープンソースのLeonardoがその目的にどのように適合するかを強調した:
アクセシブルなカラーシステムを何年にもわたって作成および維持してきた後、私はこの問題を柔軟でスケーラブルで合理的な方法で解決することを心がけています。
(…) インクルーシブなデザインは私たち全員に影響を与えます。そのため、Leonardoをオープンソースプロジェクトにすることが優先事項です。私たちは、誰もがアクセシブルなカラーパレットを簡単に作成できるようにして、製品がアクセシビリティと包括的なデザインをエンドユーザの手に届けられるようにしたいと考えています。
実際のところ、Web Content Accessibility Guidelineのコントラスト標準 (Project Silver) の最新のアップデートでは、パーソナライゼーションの重要性が強調されている。視覚障害は複雑であり、ユーザが自分の視覚体験を環境に合わせて調整できるようにし、制約がユーザ体験の向上につながる。
Leonardoは、色の選択に関連する前後の監査および調整プロセスを自動化する。デザイナと開発者は熱心にLeonardoを受け取っている。あるデザイナはTwitterで、リリースに反応した:
これは素晴らしいですね!CIECAM02、目標コントラストレベル、および手動のキーカラー!もっと遊ぶのが待ちきれません。
Web開発者は、他のツールやライブラリとの可能な統合を強調した:
@TailwindCSS / ChakraUIパレットを生成するのに適しています!
LeonardoはAdobeオープンソースプロジェクトであり、AdobeのデザインシステムであるSpectrumのカラーシステムを生成するために使用される。Leonardoは、Apache 2.0ライセンスの下で使用できる。貢献とフィードバックは歓迎され、GitHubプロジェクトを通じて提供されるだろう。