ユーザーインターフェースのための、美しくアクセスしやすいカラーシステム

美しく、アクセスしやすいウェブサイトやアプリをデザインするための包括的なカラーシステムです。

背景
インタラクティブコンポーネント
境界線と区切り線
単色
アクセス可能なテキスト
1
2
3
4
5
6
7
8
9
10
11
12
グレーモーヴスレートセージオリーブサンドトマトレッドルビークリムゾンピンクプラムパープルバイオレットアイリスインディゴブルーシアンティールジェイドグリーングラスブロンズゴールドブラウンオレンジアンバーイエローライムミントスカイ
影、ハイライト、オーバーレイ
1
2
3
4
5
6
7
8
9
10
11
12
ブラックホワイト

アクセシビリティを簡単に

テキストカラーは、対応する背景色に対して目標コントラスト比をクリアすることが保証されています。

自動ダークモード

ダークテーマへの切り替えは、コンテナにクラスを適用するだけです。ダークモードはすぐに機能します™。

透過バリアント

各スケールには、対応するアルファカラーバリアントがあり、色のついた背景にブレンドする必要があるUIコンポーネントに便利です。

APCAテキストコントラスト

コントラストの目標は、人間の視覚がテキストをどのように認識するかを正確に予測する、最新のAPCAコントラストアルゴリズムに基づいています。

P3色域のサポート

広色域の色空間でのブレンドの違いを考慮し、可能な限り明るい黄色と赤色を実現します。

ユーザーインターフェース向けに設計

各ステップは、背景、ホバー状態、境界線、オーバーレイ、テキストなど、特定のユースケースを念頭に置いて設計されています。