カラー
カラーピッカー
色を選べば hex/rgb/hsl + コントラストがわかる
s
l
- rgb
- 155, 107, 90
- hsl
- 16°, 27%, 48%
- 白との対比
- 4.52 · AA
- 黒との対比
- 4.64 · AA
概要
好きな色を選ぶと、その hex・RGB・HSL の値に加えて、黒と白に対する WCAG コントラスト比が見られます。
使い方
- カラースウォッチをクリックしてネイティブのピッカーを開くか、hex コードを入力する。
- RGB と HSL の値を読み取る。
- 黒と白に対する WCAG コントラスト比を確認する。
例
- ブランドカラーが背景に対して AA コントラストを満たすか確認する。
- Photoshop の HSL を、CSS に必要な hex コードに変換する。
- 色相をいじりながら補色を目で探る。
よくある質問
AA / AAA って何のこと?
WCAG のコントラスト等級です。AA は本文に 4.5:1、大きい文字に 3:1 が必要。AAA は 7:1 — 最高基準です。
コントラストの表示がなぜ二つ?
その背景に黒い文字と白い文字、どちらを使うべきかを一目で判断できるようにするためです。