ToolPronto
文字色のコントラストと配色を確認
比率を測り、合格する候補を探してCSSの色をコピーできます。
カラー確認
文字のコントラスト確認
文字色と背景色の組み合わせをWCAG 2.xの基準で確認します。
読みやすさは実際の表示で確認できます。読みやすさは実際の表示で確認できます。
- コントラスト比
- 16.68:1
- 通常文字 AA
- ✓ 合格
- 大きな文字 AA
- ✓ 合格
カラーフォーマット
#17201Brgb(23 32 27)hsl(147 16% 11%)カラー確認
5色カラーパレット
5色のパレットを生成し、固定、確認、色覚シミュレーション、CSS出力まで行えます。
この表示は一定の計算による近似で、診断や適合性試験ではありません。書き出す色は変わりません。
元のパレットのコントラスト確認
各行では、1色目を文字、2色目を背景として判定します。
- 色1を色2の上に表示
#096447 / #E2F3EC6.24:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色1を色3の上に表示
#096447 / #17201B2.32:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色1を色4の上に表示
#096447 / #F4F6F36.61:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色1を色5の上に表示
#096447 / #6D46D91.21:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色2を色1の上に表示
#E2F3EC / #0964476.24:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色2を色3の上に表示
#E2F3EC / #17201B14.51:1通常文字 AA: 合格通常文字 AAA: 合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色2を色4の上に表示
#E2F3EC / #F4F6F31.06:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色2を色5の上に表示
#E2F3EC / #6D46D95.18:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色3を色1の上に表示
#17201B / #0964472.32:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色3を色2の上に表示
#17201B / #E2F3EC14.51:1通常文字 AA: 合格通常文字 AAA: 合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色3を色4の上に表示
#17201B / #F4F6F315.35:1通常文字 AA: 合格通常文字 AAA: 合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色3を色5の上に表示
#17201B / #6D46D92.80:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色4を色1の上に表示
#F4F6F3 / #0964476.61:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色4を色2の上に表示
#F4F6F3 / #E2F3EC1.06:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色4を色3の上に表示
#F4F6F3 / #17201B15.35:1通常文字 AA: 合格通常文字 AAA: 合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色4を色5の上に表示
#F4F6F3 / #6D46D95.48:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色5を色1の上に表示
#6D46D9 / #0964471.21:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色5を色2の上に表示
#6D46D9 / #E2F3EC5.18:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格 - 色5を色3の上に表示
#6D46D9 / #17201B2.80:1通常文字 AA: 不合格通常文字 AAA: 不合格大きな文字 AA: 不合格大きな文字 AAA: 不合格 - 色5を色4の上に表示
#6D46D9 / #F4F6F35.48:1通常文字 AA: 合格通常文字 AAA: 不合格大きな文字 AA: 合格大きな文字 AAA: 合格
カラーコントラストチェッカーでできること
WCAGのコントラスト比と文字サイズ別の基準を計算し、パレット内の色の近さも確認できます。 比率を測り、合格する候補を探してCSSの色をコピーできます。
よくある使い方
- 文字と背景の組み合わせを確認する。
- 合格する代替色を探す。
- 見分けにくい配色を見つける。
使い方
- 文字色と背景色を選びます。
- コントラスト比とWCAG判定を確認します。
- 色を調整するか、合格するCSS値をコピーします。