カラーパレット

カラーパレットは、ライトテーマとダークテーマの両方に対応し、アクセシビリティと一貫性を重視した設計のカラーシステムです。WCAG 2.1 AA基準を満たし、ユーザビリティと視覚的調和を実現します。

機能

テーマ対応: ライトテーマとダークテーマの自動切り替え
アクセシビリティ: WCAG 2.1 AA基準準拠のコントラスト比
セマンティック: 明確な意味を持つカラーシステム
一貫性: 全プロジェクトで統一されたカラートークン
型安全性: TypeScriptとVanilla Extractによる型安全な実装

カラーパレット

Text Colors

テキストの階層と意味を表現するカラーパレット

Primary

メインコンテンツや見出し

Secondary

補足情報やキャプション

Disabled

非活性状態のテキスト

Link

ハイパーリンクやクリック可能な要素

Error

エラーメッセージや警告

Success

成功状態のメッセージ

Background Colors

レイアウトの階層と視覚的分離を提供する背景色

Base

ページ全体の背景

Section

セクション区切りの背景

Content

コンテンツエリアの背景

Content Emphasis

強調されたコンテンツの背景

Accent Gradients

特別な要素や装飾に使用するグラデーション

Accent Gradient

装飾的な要素や特別な強調に使用

使用方法

CSS変数

カラートークンはCSS変数として定義されており、テーマ切り替えが容易です：

:root {
  --color-text-primary: #212121;
  --color-bg-base: #F3F8F6;
  /* ... */
}

Vanilla Extract

型安全なCSS-in-JSライブラリを使用して、コンパイル時にカラーの整合性を保証しています：

import { style } from '@vanilla-extract/css';
import { tokens } from './tokens';

export const myComponent = style({
  color: tokens.colors.text.primary.light,
  backgroundColor: tokens.colors.background.light.base,
});

デザイン原則

アクセシビリティファースト

すべてのカラーコンビネーションはWCAG 2.1 AA基準を満たし、十分なコントラスト比を確保しています。

セマンティックな意味

各カラーには明確な意味があり、ユーザーが直感的に理解できるよう設計されています。

テーマ一貫性

ライトテーマとダークテーマ間で一貫した視覚的階層を維持しています。

ベストプラクティス

一貫性の維持: 同じ意味の要素には同じカラーを使用
コントラストの確保: テキストと背景のコントラスト比を常に確認
意味の明確化: カラーのみに依存せず、アイコンやテキストと組み合わせて使用
テーマ対応: ライトテーマとダークテーマの両方で適切に表示されることを確認

カラーパレット

機能