カラーコントラストチェッカー
無料オンラインWCAG カラーコントラストチェック、インストール不要
カラーコントラストと WCAG とは?
カラーコントラスト比は、前景(テキスト)色と背景色の明るさの違いを測定します。Web Content Accessibility Guidelines(WCAG)2.1 は、可読性のための最小コントラスト要件を設定しています。WCAG AA は通常テキストに 4.5:1、大きなテキスト(18pt 以上または 14pt 以上の太字)に 3:1 を必要とします。WCAG AAA はより厳しい要件があります:通常テキストに 7:1、大きなテキストに 4.5:1。コントラスト比が高いほど、特に視覚障害のあるユーザーにとってテキストを読みやすくなります。
カラーコントラストチェッカーの使い方
前景色(テキスト色)と背景色を入力または選択します。ツールがコントラスト比を計算し、通常テキストと大きなテキストの両方について WCAG AA と AAA 規格を満たしているかどうかを示します。Swap ボタンを使用して色を素早く交換します。Visual Preview はカラーの組み合わせによるサンプルテキストを表示し、可読性を評価するのに役立ちます。Color Blindness Simulation を有効にして、さまざまなタイプの色覚異常を持つユーザーに色がどのように見えるかを確認します。
色覚異常シミュレーションについて
約 8% の男性と 0.5% の女性が何らかの形の色覚異常を持っています。Protanopia は赤の知覚に影響します(赤は暗く見えます)。Deuteranopia は緑の知覚に影響します(緑と赤は似て見えます)。Tritanopia は青の知覚に影響します(青は緑に見えます)。Achromatopsia は完全な色覚異常(灰色の色調のみ)です。これらのシミュレーションでデザインをテストすると、すべてのユーザーのアクセシビリティを確保するのに役立ちます。
▶プロジェクトに必要なコントラスト比は?
▶デザインがコントラスト要件に失敗するのはなぜですか?
▶このツールは UI 要素のコントラストをチェックしますか?
▶ダークモードデザインに使用できますか?
このツールが役に立ったら、作者にコーヒーをおごってください。
コーヒーをおごる