HEX・RGB・HSL・CMYKと文字のコントラスト比の確認方法

カラーコードとは、ひとつの色を別の表記で書いたものです。HEX、RGB、HSLは、画面上の同じ光を表しているため、丸め誤差を除けば正確に相互変換できます。CMYKは紙に載せるインクを表すため、画面の値からの変換は推定にすぎません。WCAGコントラスト比は、2つの色の明るさの差を示す別の数値で、文字が読みやすいかどうかを判断する基準になります。カラーコード変換に色を貼り付けると、すべての形式をまとめて確認できます。

カラーコード変換別の形式のカラーコードが必要無料で使う

写真、ロゴ、スクリーンショットの中にある色が必要な場合は、先に画像カラーピッカーでピクセルから色を読み取り、そのHEX値をここに貼り付けてください。画像から正確な色を取り出す方法で手順を説明しています。

HEXとRGBは同じ数値です

HEXコードは、16進数の2桁ずつ3組で表されます。#34D6A0には、赤、緑、青の値が含まれています。各組は00からFFまでの数で、10進数では0から255に当たります。つまり34は52、D6は214、A0は160で、RGB形式ではrgb(52, 214, 160)になります。

16進数で書くのは見た目が変わるだけです。省略形の#abcは、各桁を2つずつ重ねて#aabbccを意味します。8桁のコードは末尾に透明度の組を加え、00が完全な透明、FFが完全な不透明を表します。そのため#34D6A080はおよそ半透明になります。RGBAでは同じ透明度を0から1の数値で書きます。

CSSは色の名前も受け付けます。rebeccapurpleは#663399です。カラーコード変換はブラウザ自体で名前を読み取るため、ブラウザが認識する名前ならどれでも使えます。

HSLは人が色を説明する方法に近い形式です

HSLは色相、彩度、明度の略です。色相は色相環上の角度で、赤が0度、緑が120度、青が240度です。彩度は色がどれだけ灰色から離れているか、明度は色がどれだけ黒や白から離れているかを表します。

同じ#34D6A0はhsl(160, 66%, 52%)です。色相は緑と青の間にあり、彩度は高く、明度は中間よりわずかに高い値です。HSLは手作業で編集しやすい形式です。色相を保ったまま明度だけを動かせば、明るい色味や暗い色味を簡単に作れます。

HSVはHSLによく似ていますが、明度の代わりに、最も強い色の明るさを示す値（Value）を使います。一部のカラーピッカーはこちらを使うため、他のツールで目にすることがあるでしょう。カラーコード変換では、HSLと並べて表示するので比較できます。

CMYKはインク用なので推定値です

画面は光を加えて色を作ります。赤、緑、青を合わせると白になります。一方、印刷は白い紙にシアン、マゼンタ、イエロー、ブラックのインクを重ね、光を吸収させて色を作ります。2つの方式は完全には一致しないため、CMYKの値は常に変換による近似です。

カラーコード変換は単純な計算式を使います。ブラックのKは、0から1の範囲で赤、緑、青の値のうち最大のものを1から引いた値です。シアン、マゼンタ、イエローは、Kを差し引いた残りから求めます。この式は、印刷所が使うインク、用紙、カラープロファイルを考慮していません。そのため印刷結果は異なる可能性があり、非常に明るい色はCMYKインクでは再現できない場合もあります。CMYKの値は印刷会社と相談する際の目安として使い、大量印刷の前には必ず校正刷りを依頼してください。

コントラストは色相ではなく明るさの問題です

WCAGコントラスト比は、2色の相対輝度を比べて算出します。相対輝度は、ガンマ補正後の赤、緑、青の値から計算されます。緑は人の目が最も敏感に反応するため、最も大きな重みで扱われます。まず各チャンネルを0から255の範囲から変換し、その後、輝度は赤の0.2126倍、緑の0.7152倍、青の0.0722倍を足して求めます。

コントラスト比は、明るい方の輝度に0.05を加えた値を、暗い方の輝度に0.05を加えた値で割ったものです。黒と白の組み合わせは最大の21対1になります。色相が大きく異なっていても、明るさが同じであれば比率は低くなります。このチェックは、まさにそうした見落としを防ぐためのものです。低いコントラストが原因でQRコードが読み取れないこともあります。

基準値

WCAG 2.xには2つのレベルがあり、必要な比率は文字の大きさによって変わります。

• レベルAA：通常の文字は4.5対1、大きな文字は3対1
• レベルAAA：通常の文字は7対1、大きな文字は4.5対1

大きな文字とは、24ピクセル以上、または太字で18.66ピクセル以上のものを指します。それより小さいものは通常の文字として扱います。白地に灰色の文字は、よくある不合格例です。#777777のような中間の灰色を白の上に置くと、約4.48対1になります。通常の文字ではAAをわずかに下回り不合格ですが、大きな見出しであればAAに合格します。

カラーコード変換は比率を小数第2位まで表示しますが、合否の判定は正確な値で行っています。そのため、表示上は4.50でも、実際にわずかに下回っていれば不合格になります。このチェックが対象とするのは、色の明るさの差だけです。フォントの太さ、行間、色覚多様性による見え方は含まれていないため、実際のページを本来のサイズで別途確認してください。

色合いと濃淡

カラーコード変換の下に並ぶ帯には、その色を中心に9段階の見本が表示されます。白に混ぜた4段階の明るい色合い、元の色、黒に混ぜた4段階の暗い色です。ひとつクリックするとそのHEXコードがコピーされます。ブランドの一色から、明るい背景色、ホバー時の色、濃い文字色といった関連する色のセットを作りたいときに役立ちます。使う前には、選んだ組み合わせをそれぞれコントラストの項目で確認してください。

fixmintでの使い方

1. 色の欄に、HEX、RGB、HSL、またはrebeccapurpleのようなCSSの色名を貼り付けます。
2. HEX、RGB、HSL、HSV、CMYKの行を確認します。必要な行の横にあるコピーを押します。CMYKには「概算」と表示されます。
3. 背景色の欄に背景の色を入力するか、そのカラーサンプルを使い、白背景、黒背景、あなたの背景色の下にある比率を確認します。
4. 各比率の下にある4つのマーク（AAとAAA、それぞれ通常の文字と大きな文字用）を確認します。
5. 色合いと濃淡で見本をタップすると、コピーされます。

よくある質問

CMYKの値は正確ですか？

いいえ。プリンター、用紙、カラープロファイルを無視した単純な計算による変換です。目安として扱い、校正刷りを依頼してください。

コントラスト比が合格すれば、デザインはアクセシブルになりますか？

文字の色が測定可能な基準の一つを満たしたという意味です。アクセシビリティは、文字の大きさ、間隔、動き、ページの作り方にも左右されるため、この比率は指針であり、完全な評価ではありません。

スタイルシートにはどの形式で保存すればよいですか？

最も読みやすく編集しやすい形式を選んでください。HEXはコンパクトで一般的です。HSLは色相を変えずに明度だけを変えられるため、手作業での調整が簡単です。