そのあと、2色をWCAGのAAとAAAに照らして確認し、画面上でテキストを見ます。色を、HEX、RGB、HSL、HSV、OKLCHの間で変換したり、背景の上でテキストが読みやすいかをテストしたりできます。無料で、ブラウザ上で動作します。
色の変換方法
- 「選択」で色を選ぶか、「任意の色」に値を入力または貼り付けます。
- 同じ色を、HEX、RGB、HSL、HSV、OKLCH、あればCSSの名前で読みます。
- 使いたい形式の横の「コピー」、または「HEXをコピー」を押します。
コントラストの確認方法
- 「テキスト色」と「背景色」を選ぶか、「メインカラーをテキストとして使う」または「背景として使う」を使います。
- コントラスト比と、通常のテキスト、24pxの「大きな文字」、19pxの「太字」、「ボタンの輪郭」について、AAとAAAに合格するかどうかを確認します。
- 組み合わせが不合格の場合は、提案された、合格する近い色を使ってください。
どの形式を使うか
HEXとRGBは、色の赤、緑、青の光を表し、どこでも使えます。HSLとHSVは、色相、彩度、明度または輝度を表し、手で色を調整しやすくなります。OKLCHは、最新のCSS形式で、その明度は、人が見たときの色の明るさに合うため、同じLの2色は、本当に同じ明るさに見え、パレットやテーマに最適です。最近のすべてのブラウザが、CSSのoklch()に対応しています。
コントラスト比のしくみ
比は、2色の相対輝度を比べたもので、同じ色なら1:1、白地に黒なら21:1です。結果は決して切り上げられないため、4.49:1はAAに不合格です。テキストの色が透けている場合は、先に背景と混ぜられます。組み合わせが不合格の場合は、合格する近い色が、どちら側にも提案されます。
WCAG AAは、通常のテキストに4.5:1、大きな文字に3:1を求めます。AAAは、通常のテキストに7:1、大きな文字に4.5:1を求めます。これを満たすと、弱視の方や、明るい画面で読む方の助けになります。
このツールが理解する入力
#の有無を問わない、3桁、4桁、6桁、8桁のHEX、カンマまたはスペース区切りのrgb()とrgba()、deg、turn、radが付いたhsl()、hsv()、oklch()、oklab()、148のCSSの色名、59, 130, 246のような単純な数値。スラッシュの後や4つ目の値としてのアルファ値は保たれます。
こんな方に
テーマを作るWebデザイナーや開発者、ブランドカラーが読みやすいか確認する小さな会社のオーナー、スライドを作る学生、ある形式の色を別の形式にしたいすべての方。写真から色を見つけるには、画像のカラーピッカーを使ってください。
よくある質問
適切なコントラスト比はどのくらいですか？
通常のテキストでは4.5:1以上を目安にしてください。高いほどよく、7:1はAAAを満たします。
同じ色の値が画面によって少し違って見えるのはなぜですか？
画面によって明るさや色が異なります。数値は同じですが、表示によって見え方が変わります。
何かアップロードされますか？
いいえ。変換はブラウザ上で行われます。