Material Design Colors
HTML Color Names
コントラスト比チェックツール
カラーを選択
背景色、および文字色の入力欄に、16進数カラーコード / RGB値 / RGBA値のいずれかをペースト、または入力するか、カラーピッカーから色を選択して「チェック」ボタンを押すとコントラスト比が計算されます。
結果
コントラスト比：
| 1.4.3 コントラスト（最低限レベル）の達成基準 【適合レベル AA】 | 1.4.3 コントラスト（最低限レベル）の達成基準 【適合レベル AA】（大きな文字） |
|---|---|
| 1.4.6 コントラスト（高度レベル）の達成基準 【適合レベル AAA】 | 1.4.6 コントラスト（高度レベル）の達成基準 【適合レベル AAA】 （大きな文字） |
|---|---|
| 1.4.11 非テキストにおけるコントラストの達成基準 【適合レベル AA】 |
|---|
- 達成基準 1.4.3 （WCAG 2.0, 2.1, 2.2 および JIS X 8341-3:2016 / レベル AA）
- テキスト及び文字画像の視覚的提示には、少なくとも 4.5:1 のコントラスト比がある（附随的、ロゴタイプを除く）。
（大きな文字）サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 3:1 のコントラスト比がある。 - 達成基準 1.4.6 （WCAG 2.0, 2.1, 2.2 および JIS X 8341-3:2016 / レベル AAA）
- テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある（附随的、ロゴタイプを除く）。
（大きな文字）サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。 - 達成基準 1.4.11 （WCAG 2.1, 2.2 / レベル AA）
- ユーザインタフェース コンポーネント、およびグラフィカルオブジェクトにおいて、隣接した色との間で少なくとも 3:1 のコントラスト比がある。
- なるべく大きい画面で操作することを前提にしています。スマートフォンなど小さい画面での使用はあまり考慮していません。
- コントラスト比チェックにはRGBA値も使用できますが、アルファチャンネルの値は無視されますので、RGB値で入力した場合と同じ結果になります。
