デザインスタジオ

Web、UIデザインには欠かせない「コントラスト比」とは?【テンプレ付】

Web、UIデザインには欠かせない「コントラスト比」とは?

執筆日:2025年03月06日 提供元:株式会社Engineerforce

「プレスホルダーにおけるコントラスト比の活用事例」のFigmaテンプレート


1. コントラスト比とは


2. 背景色と文字色で「4.5:1以上」を目指す

プレスホルダーにおけるコントラスト比の活用事例
Figmaファイルの活用事例

3. おすすめのコントラスト比チェックサイト

Adobe color
Colorable
Accessibility Color Wheel
スクリーンショット
Contrast Ratio by Lea Verou


4. WCAG(Web Content Accessibility Guidelines)とは?


5. まとめ


「プレスホルダーにおけるコントラスト比の活用事例」のFigmaテンプレート


6. デザイン研修会でデザイン思考を学びませんか?