カラーコード変換(HEX / RGB / HSL)
コントラスト比(WCAG 2.1)
| 背景色 |
コントラスト比 |
通常テキスト |
大きなテキスト |
テキスト表示例 |
| 白 |
- |
- |
- |
サンプル |
| 黒 |
- |
- |
- |
サンプル |
利用方法
各入力フォームの使い方
- カラーピッカー・HEX・RGB・HSL のいずれかを変更すると他のフォームが自動で同期します。
- 各行の「コピー」ボタンで値をクリップボードにコピーできます。
- 「明るく」「暗く」でHSLの明度(L)を10ずつ増減します。「反転」でRGB各値を反転します。
コントラスト比とは
- テキストの色と背景色の明るさの差を数値化したものです。数値が大きいほど読みやすい配色です。
- 表では、選択した色をテキスト色として、白背景・黒背景に置いたときのコントラスト比をそれぞれ表示しています。
通常テキスト・大きなテキストとは
- 通常テキスト:本文など一般的なサイズ(おおむね 18px 未満 / 太字なら 14px 未満)のテキスト。小さいぶん読みにくくなりやすいため、より高いコントラストが求められます。
- 大きなテキスト:見出しなど大きめのサイズ(18px 以上、または太字で 14px 以上)のテキスト。文字が大きくて判別しやすいため、基準が少し緩くなっています。
AA・AAA・✗ の意味
- これは WCAG(Web Content Accessibility Guidelines) というウェブアクセシビリティの国際規格における達成基準のレベルです。
- AAA(緑):最高レベル。通常テキスト 7:1 以上・大きなテキスト 4.5:1 以上。より多くの人が読みやすい配色です。
- AA(青):標準レベル。通常テキスト 4.5:1 以上・大きなテキスト 3:1 以上。多くのウェブサイトで推奨される最低ラインです。
- ✗(赤):基準未達。コントラストが不足しており、見えにくい・読みにくい配色です。特に視覚に障害のある方には利用しづらくなります。
免責事項
当サイトをご利用したことによる、またはご利用になれないことにより生じるトラブルや損害には、当方は一切の責任を負いません。