色コードをそろえて、文字と背景のコントラストを確認する

Rakuruno編集・検証｜更新：2026年10月9日

見た目で選んだ色を文字の背景に使うときは、前景と背景の組合せを確認します。色コードをそろえる作業と、文字が読みやすいか確認する作業を分けて進めます。

RGBをHEXで確認する

1. カラーコード変換に rgb(47,111,237) を入力します。
2. HEX表示が #2f6fed であることを確認します。この例では透明度のない色を使います。
3. コントラスト比チェックで、文字色を #FFFFFF、背景色を #2F6FED にします。

比率表示と通常文字の判定を見る

青と白は表示で約4.55:1となり、AA通常文字の判定を満たします。判定は丸める前の比率で行います。通常文字は4.5:1以上、大きな文字は3:1以上がAAの基準です。詳しい定義や例外はW3Cのコントラストの説明を確認してください。

同じ白文字でも、背景を変えると結果が変わる

背景色をミントの #22B8A7 に変えると、白文字との比率は約2.48:1で、AA通常文字を満たしません。次に文字色を #172033 へ変えると約6.57:1となり、通常文字の判定を満たします。色を単独で合格・不合格と考えず、実際の組合せで確認します。

比率だけで画面全体を評価しない

この手順は不透明な単色の前景・背景の計算です。写真やグラデーションの上の文字、半透明の重なり、hover時の色は、実際に見える組合せを別に確認します。文字の大きさや太さ、リンクの分かりやすさ、操作時の表示まで自動で検査するものではありません。採用する色を決めたら実画面でも確認してください。