コントラスト確認・判定ツール2【Contrast Ratio】を使ってみよう!

Technology
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Contrast Ratio」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・デザインを勉強中の方、デザイナーの方
・コントラストを確認したい方
・Web制作などに携わっている方

「Contrast Ratio」って何?

Contrast Ratio」とは、Web上で使える「コントラスト判定ツール」のことです。
背景色と文字色の、コントラスト比を数値で教えてくれるので、デザインを作成する際などに参考になると思います!(わーお!)

Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

このサイト内には、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」と判定されました!(ハッカーっぽいくてかっこいい!)

これで全ての操作は完了です。
お疲れ様でした🍵

このツールを使って、ぜひ素敵なデザインを作成してみてください!(一緒にがんばりましょう!)

↓こちらの「コントラスト判定ツール」もオススメ!

【デザイナー必見】コントラスト確認ツール【Colorable】とは?
みなさんこんにちは!おさかなです!今回は「Colorable」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・デザインを勉強中の方、デザイナーの方・コントラストを確認したい方・Web制作などに携わって...

ここまで読んでくださり、ありがとうございました!

当サイトを気に入っていただけましたら、匿名OK!15円から!のサポート支援に是非!ご協力をお願いいたします!
ご支援いただいたものは、「プログラム関連の書籍」や「新しいWebサービス」などから知見を得るために活用させていただきます。✨

※「受け取り人メールアドレス」には「osakana1699@gmail.com」を入力してください。

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました