コンテンツへスキップ

色コード変換・コントラスト比

  • HEX#0E7566
  • RGBrgb(14, 117, 102)
  • HSLhsl(171, 79%, 26%)

HSL は整数に丸めて表示しています。この値を貼り直すと、元の色から最大で3/255ほどずれることがあります(HEXとRGBは元の値のままです)。境界に近い色では、上のコントラスト比の合否が変わることがあります。

  • HEX#FFFFFF
  • RGBrgb(255, 255, 255)
  • HSLhsl(0, 0%, 100%)

HSL は整数に丸めて表示しています。この値を貼り直すと、元の色から最大で3/255ほどずれることがあります(HEXとRGBは元の値のままです)。境界に近い色では、上のコントラスト比の合否が変わることがあります。

この大きさが小さい文字の見え方です。長い文章もこの太さで読むことになります。

大きい文字の見え方

コントラスト比5.59:1
  • 小さい文字 AA 4.5:1満たす
  • 大きい文字 AA 3:1満たす
  • UI部品・境界線 3:1満たす
  • 小さい文字 AAA 7:1満たさない
「大きい文字」はおよそ24px以上、太字なら19px以上が目安です。それ未満は小さい文字の基準(4.5:1)で判断してください。

HEX・RGB・HSLを相互に変換します。文字色と背景色を入れると、コントラスト比とアクセシビリティ基準(WCAG)の合否も同時に出ます。

よくある質問

入力した色は送信されますか。

されません。変換も比の計算もブラウザの中だけで行われます。

比は足りているのに読みにくく感じます。

起こります。コントラスト比は明るさの差だけを見ていて、色相の差や字の細さは考慮しません。見本を並べているのはそのためで、最後は目で確かめてください。

透明度のある色は扱えますか。

扱えません。半透明の色は下に重なる色で見え方が変わるため、比が一意に決まらないためです。実際に重なった後の色を入れてください。

基準を満たすように色を直すには、どちらを動かせばよいですか。

背景のほうが直しやすいことが多いです。文字色はブランドの色に縛られていることが多いのに対し、背景は明るさを少し動かしても印象が変わりにくいためです。HSLに切り替えて明度(L)だけを5ずつ動かし、比が基準を超えたところで止めるのが手早い方法です。色相と彩度はそのままなので、配色の性格は保たれます。

ダークモードでも同じ基準ですか。

同じです。ただし、明るい背景で成立した組み合わせが暗い背景でそのまま成立するとは限らないので、両方の配色で確かめる必要があります。とくに、明るい背景で使っていた彩度の高い色は、暗い背景に置くと比が足りなくなりがちです。

色覚の違いには対応していますか。

この道具が見ているのは明るさの差だけで、色の見分けやすさは判定していません。コントラスト比を満たしていても、赤と緑のように色相だけで区別している情報は、見分けられない人がいます。色だけで意味を伝えないこと(形・文字・位置を併用すること)は、比とは別に必要な配慮です。

スポンサーリンク