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

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

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

    通常のテキスト

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

    大きなテキスト

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

    クイック修正

    Aa

    プレビューテキスト

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

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

    テキスト
    #000000
    背景
    #2596be

    WCAG基準

    Level AA

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

    Level AAA

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

    すべてのテキストサイズに対してコントラストが不十分です - WCAG基準に不適合です。

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

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

    テキストと背景色のためにカラーピッカーを使って色を選ぶか、RGBの16進数形式で色を入力してください(例: #259 または #2596BE)。スライダーを調整して色を選択できます。Webコンテンツアクセシビリティガイドライン(WCAG)には、視覚的に読みやすいテキストを判断するための特定のガイドラインがあります。この基準は、特定のアルゴリズムを使用して色の組み合わせを比較可能な比率にマッピングします。この公式を使用して、WCAGはテキストとその背景のコントラスト比が4.5:1であれば通常の(本文)テキストに適しており、大きなテキスト(18pt以上の通常、または14pt以上の太字)は少なくとも3:1のコントラスト比を持つべきであると述べています。

    主な機能

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

    高度なツール

    • 自動カラー修正
    • テキストと背景のサンプル
    • 色名検出
    • 結果のエクスポート