カラーコードをHEX・RGB・HSLに相互変換するツールです。文字色と背景色のコントラスト比を計算して、読みやすさの基準（WCAG）を満たしているかもチェックできます。
カラーコード変換
HEX（#06384b）、RGB（rgb(6, 56, 75)）、HSL（hsl(197, 85%, 16%)）のどの形式でも入力できます。
| HEX | |
|
|---|---|---|
| RGB | |
|
| HSL | |
|
| CMYK 目安 |
|
コントラスト比チェック
文字色と背景色を選ぶと、コントラスト比とWCAGの判定を表示します。
- 文字色
- 背景色
大きな文字のサンプル
通常の文字のサンプルです。この文章が読みやすいかどうかを確認してください。
コントラスト比−
| AA（推奨） | AAA（より高い基準） | |
|---|---|---|
| 通常の文字 | ||
| 大きな文字 24px以上、または太字18.66px以上 |
WCAGのコントラスト基準
WCAG（Web Content Accessibility Guidelines）は、Webサイトを誰にとっても使いやすくするための国際的なガイドラインです。文字と背景のコントラスト比について、次の基準が定められています。
| AA | AAA | |
|---|---|---|
| 通常の文字 | 4.5：1以上 | 7：1以上 |
| 大きな文字 | 3：1以上 | 4.5：1以上 |
コントラスト比は1：1（同じ色）から21：1（白と黒）までの値で、数字が大きいほど読みやすくなります。まずはAA（通常の文字で4.5：1以上）を目安にするのがおすすめです。薄いグレーの文字は、おしゃれに見えても読みにくくなりがちなので注意しましょう。
あわせて使いたいツール
- CSSグラデーション・影の生成ツール：グラデーションや影（box-shadow）のCSSを作れます。
- ボタンCSS生成：ボタンのデザインを見ながら、CSSを作れます。
このツールは役に立ちましたか？
これからの開発の参考にしたいので、いいねボタンで教えてください。
コメント