カラーコントラストチェッカー

    アクセシビリティを確保するために、前景色と背景色のコントラスト比をテストします。

    1.00:1
    コントラスト
    Fail
    非常に低い

    通常のテキスト

    AA (4.5:1)
    AAA (7:1)

    大きいテキスト

    AA (3:1)
    AAA (4.5:1)
    Black
    #000000
    Black
    #2596be

    クイックフィックス

    Aa

    プレビュー・タイトル

    素早い茶色の狐は怠け者の犬を飛び越える

    小さいテキストの例(12px)

    テキスト
    #000000
    背景
    #2596be

    WCAG基準

    Level AA

    コントラスト比は、通常のテキストで最低4.5:1、大きなテキストで最低3:1。ほとんどのウェブサイトに必要。

    Level AAA

    コントラスト比は、通常のテキストで7:1、大きなテキストで4.5:1に強化されている。最適なアクセシビリティのために推奨される。

    すべての文字サイズに対してコントラストが不十分 - WCAG基準に適合していない。

    カラーコントラストチェッカー

    文字色と背景色のコントラスト比を計算します。

    テキストと背景色のカラーピッカーで色を選択するか、16進数のRGB形式(例: #259, #2596BE)で色を入力してください。スライダーで色を調整することも可能です。ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)では、テキストの可読性を判断するための基準が定められています。この基準は、色の組み合わせを特定のアルゴリズムで評価し、コントラスト比を算出します。WCAGによると、通常のテキスト(本文)では4.5:1以上、大きなテキスト(18pt以上、または14pt以上の太字)では3:1以上のコントラスト比が推奨されています。

    主な特徴

    • リアルタイムのコントラスト比計算
    • WCAG AA & AAA コンプライアンス・チェック
    • 微調整用のHSLスライダー
    • 複数のプレビュー形式

    高度なツール

    • 自動カラーフィックス
    • テキストと背景のサンプル
    • 色名検出
    • 結果をエクスポートする