UIデザインに使用するカラーのコントラストをチェックできる、使いやすくて、アクセシビリティを重視したツール -Contrastly
Post on:2025年9月17日
sponsorsr
UIデザインでカラーを決めるときに、カラーのコントラストを確認することは必須です。コントラストをチェックできるツールはたくさんありますが、Tailwinds CSSのカラー、16進数コンバーター、コントラストの確認がひとまとめになった便利ツールを紹介します。
Tailwind CSSを使うときはもちろん、使わないときでもカラーの比較をしながら探せるので、非常に便利です。
Contrastly -Tailwind Colors Contrast Checker
Contrastlyの使い方は簡単、登録など面倒なことは一切不要です。
下記ページにアクセスし、背景色と前景色を設定すると、WCAG AAとWCAG AAAの合否をリアルタイムに確認できます。
Contrastly -Tailwind Colors Contrast Checker
カラーはTailwind CSSのカラーパレット順に並んでおり、幅広いデザインスタイルに適しています。ホバーでTailwind CSSのコードも表示されます。
カラーのコントラストは、WCAG 2.2のコントラスト比計算式を使用してチェックされます。「Pass」でグリーンのチェックがつけば、十分なコントラストが確保されています。
コントラストチェック結果
Tailwind CSSのカラー以外を設定したいときは、「Use Color Picker」をクリックすると、カラーピッカーが表示されます。もちろん、HEX値の入力もサポートしてます。
カラーは、HEX値でもカラーピッカーでも設定できます
Contrastlyでカラーのコントラストは、下記の計算式で算出されています。簡単に説明すると、2色の相対輝度を比較しています。
コントラストチェックの計算式
WCAG 2.2の公式は、下記より。
Aboutページには、作者がこのツールを作成した経緯などが記されています。
複数のツールを何度も行き来していることに気がつき、一つで完結するためにこのツールを作成したとのことです。また、それをこうして公開してくれるのは、ありがたいことですね！
sponsors
