Tool
CSS Playground
設定を変えるとリアルタイムにプレビューが更新されます。できた CSS をコピーしてそのまま使えます。
| 基準 | 必要比 | 結果 |
|---|---|---|
| AA（通常） | 4.5:1 | |
| AA（大文字） | 3:1 | |
| AAA（通常） | 7:1 |
見出しサンプル
本文のテキストです。この色の組み合わせで読みやすいか確認してください。
何ができるか
- Grid … 列数・ギャップ・auto-fit / 固定列＋メディアクエリなど。CSS / Tailwind / HTML 例を出力し、プレビューを見ながらコピー
- Contrast … 前景・背景のコントラスト比を計測。WCAG AA / AAA の判定と、通すための代替色候補を表示
出力はブラウザ内だけです。ログインやファイルアップロードはありません。
使い方の目安
- タブを選ぶ Grid / Shadow / Contrast
- 値をいじる 右側（または下）のプレビューがリアルタイムで変わる
- CSS をコピー プロジェクトのスタイルシートへ貼り付けて調整
コントラストはデザインの最終判定ではなく、公開前のざっと確認用です。詳細なアクセシビリティは A11y 詳細チェックも併用してください。
どんなときに使うか
- カードやギャラリーの並びを、メディアクエリを書く前に試したいとき
- デザイン色の組み合わせが WCAG 基準で通るか、公開前に確認したいとき
- CSS と Tailwind の両方が出てくるので、どちらの書き方のプロジェクトでもそのまま使える
出力の読み方
Grid
- auto-fit（自動折返し）
…
minmax(最小幅, 1fr)で幅に合わせて自動で折返ります。カードの並びに多い指定です - 固定列 + メディアクエリ … 列数を固定し、768px 以下で1列に落とします。本文＋サイドバーなど、折返したくない構成向け
- gap は px / rem から選べます。rem はルート文字サイズに合わせて縮尺が変わるため、本文の行間と合わせやすいです
Contrast
- AA（通常 4.5:1）が基本線。大文字（18pt 以上 / 14pt 太字以上）は 3:1 で許容されます
- AAA（7:1）は必須ではありません。長時間読まれる本文で狙うと安心感があります
- 基準を満たさない場合、このツールは通すための代替色候補も出します
生成した CSS は、クラス名を自分のプロジェクトに合わせて書き換えて使ってください。
よくある質問
入力した値がサーバーに送られますか？
いいえ。Grid の生成もコントラストの計算も、すべてこのブラウザの中で行います。108.works のサーバーには送らず、履歴も保存しません。
Tailwind の出力はそのまま使えますか？
使えます。クラス名付きの記述が出るので、Tailwind を使っているプロジェクトではコピーしてそのまま貼れます。CSS 出力と内容は同じです。
コントラストの判定はアクセシビリティ診断と同じですか？
違います。ここでは色のコントラスト比だけを確認します。見出し構造・alt・フォーカスなど、アクセシビリティ全体の確認は A11y 詳細チェックで行えます。
公開前に見るべきことはほかにもありますか？
表示崩れ・フォーム・SSL など、公開後に自分で見る項目は サイト公開後に自分で見るチェック項目 に整理しています。