みなさんこんにちは！おさかなです！
今回は「Contrast Ratio」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・デザインを勉強中の方、デザイナーの方
・コントラストを確認したい方
・Web制作などに携わっている方
「Contrast Ratio」って何？
「Contrast Ratio」とは、Web上で使える「コントラスト判定ツール」のことです。
背景色と文字色の、コントラスト比を数値で教えてくれるので、デザインを作成する際などに参考になると思います！(わーお！)
このサイト内には、Lea Verou著の「CSS Secrets: Better Solutions to Everyday Web Design Problems」という本も紹介されています！
英語ベースですが「CSS」を極めたい方にはオススメです。
実際につかってみよう！
まずはサイトにアクセスします。(こんな感じ！)
左側の入力ボックスが「背景色」、右側の入力ボックスが「文字色」になります。
初期値は、whiteとhsla(200,0%,0%,.7)
入力ボックス内で「上下の矢印」を押すと「±1」ずつ、「Shift」を押しながら「矢印」を押すと「±10」ずつ、数値を変更することができます！
「Swap colors」を押すことで、背景色と文字色を入れ替えることもできます！(いいね！)
真ん中にある緑の数字が「コントラスト比」です。
丸の上にカーソルを合わせると…？より正確な「数値」と「英語の判定」(AAAなど)を見ることができます！(ふむふむ…。)
数字が大きいほど、良い組み合わせで、小さくなると緑色の丸が赤色に変わってしまいます💦
英語の判定は
「AAA」＞「AA」＞「AA Large」＞「Fail」
の順に良いと判断されているようです。
実は左側にあるテキストにも、様々なフォントが使用されており、色の組み合わせに合うフォントを探すこともできます！(すごい！)
↓おさかなの好きな色の組み合わせは「15.3」と判定されました！(ハッカーっぽいくてかっこいい！)
これで全ての操作は完了です。
お疲れ様でした🍵
このツールを使って、ぜひ素敵なデザインを作成してみてください！(一緒にがんばりましょう！)
↓こちらの「コントラスト判定ツール」もオススメ！
ここまで読んでくださり、ありがとうございました！
当サイトを気に入っていただけましたら、匿名OK！15円から！のサポート支援に是非！ご協力をお願いいたします！
ご支援いただいたものは、「プログラム関連の書籍」や「新しいWebサービス」などから知見を得るために活用させていただきます。✨
※「受け取り人メールアドレス」には「osakana1699@gmail.com」を入力してください。
