カラー

コントラストチェック

前景色と背景色の組み合わせを WCAG AA・AAA で判定します。

前景色

背景色

大きな見出しテキスト

18 ピクセルの標準本文。ほとんどの読み物で使われるサイズです。

14 ピクセルの小さな文字。最も基準を満たしにくいケースです。

2.38コントラスト比

AA 通常テキスト

4.5:1 が必要

不合格

AA 大きいテキスト

3:1 が必要

不合格

AAA 通常テキスト

7:1 が必要

不合格

AAA 大きいテキスト

4.5:1 が必要

不合格

AA UI コンポーネント

3:1 が必要

不合格

関連ガイド

HEX、RGB、HSL、そして新しい色空間HEX、RGB、HSL、LCH、OKLCH が互いにどう関係するのか、HSL で作ったパレットが中間調で濁る理由、そして色域のクリッピングとアルファ合成が最終的な色に何をするのかを解説します。推測に頼らず WCAG の色コントラストを満たすコントラスト比が何を測っているのか、テキストと UI コンポーネントに対する AA と AAA のしきい値、そして毎回静かに不合格になる白地にグレーという失敗について解説します。

関連ツール

カラー変換

色を HEX、RGB、HSL、CSS 表記の間で変換します。

カラー

パレット生成

1 つのベースカラーから明度違いや配色パターンを作ります。

カラー