BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Adobeのオープンソースのアダプティブでアクセス可能なカラーパレットジェネレーター

Adobeのオープンソースのアダプティブでアクセス可能なカラーパレットジェネレーター

原文(投稿日:2020/03/29)へのリンク

デザインシステムSpectrumのAdobeのデザイナであるNate Baldwin氏は、オープンソースのカラージェネレータであるLeonardoの最初のメジャーバージョンをリリースした。Leonardoは、コントラスト比に基づいて生成された色を使用して、アクセス可能なアダプティブカラーシステムの作成を自動化することにより、デザイナの生産性とエンドユーザエクスペリエンスの向上に努めている。Leonardoは完全なテーマ生成もサポートしており、デザイナとエンジニアの両方を対象としている。

Leonardoは、デザイナとエンジニアの両方と共有できる、Javascriptモジュール (@adobe/leonardo-contrast-colors) とカラーパレット構成の作成に役立つWebインターフェイスで構成されている。

Leonardoは、ターゲットのコントラスト比に基づいてアダプティブカラーパレットを作成します。次のWebインターフェイスの画像は、2〜6の範囲のコントラスト比のリストに従って生成されるカラースケールと生成コード (右下) を示している:

Browser window showing Leonardo web app. Color and target contrast ratio inputs showing a generated color scale

デフォルトでは、Leonardoは2つのコントラスト比 (3と4.5) を提案する。これらは、大きなテキスト (3:1) と通常のテキスト (4.5:1) に対してWeb Content Accessibility Guidelines 2.0 (Level AA)で推奨されているものである。このインターフェースでは、生成された色を背景コンテキストの組み合わせで表示できる。

Leonardo 1.0では、デザイナは複数のコントラストベースのカラーパレット (テーマなど) を一度に作成することもでき、各出力色は共有背景とのコントラストに基づいている。Adobeでは、Adobe Spectrumの色に基づいて、次のアダプティブテーマの例を提供している:

Leonardo interface for themes

前に示したインターフェースにより、デザイナはテーマの明るさ、コントラスト、ベースカラーを調整できる。デザイナは、さまざまな色覚異常 (CVD)でテーマがどのように見えるかをシミュレートできる。デザイナはCIECAM02または明度-色相-クロマ (LCH) スペースで作業することもできる。これらは人間の色の知覚に合わせて設計されている。

LeonardoのJavaScriptモジュールは、generateContrastColorsgenerateBaseScalegenerateAdaptiveThemeの3つの主要な機能を持つAPIを開発者に公開する。APIを使用すると、開発者はユーザが主要な知覚パラメータ (明るさなど) を調整できるようにし、コントラスト比を尊重しながらアプリケーションのパレットを自動的に変更することで、包括的かつ適応的なアプリケーションを構築できる。Leonardo Webインターフェイスは、ユーザがダークモードを設定または削除し、インターフェイスの明るさを調整できる、アクセス可能なアダプティブカレンダーアプリケーションのを提供する:

Leonardo calendar application demo

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プロジェクトを通じて提供されるだろう。

この記事に星をつける

おすすめ度
スタイル

BT