色のコントラストチェック

使い方

1. 1
   項目を入力

   数値を入力するか、必要なオプションを選びます。

2. 2
   結果を見る

   値を変えるとすぐに答えが更新されます。

3. 3
   活用する

   結果をコピーするか書き留めてください。何もどこにも送信されません。

About this tool

Enter a text colour and a background colour as hex codes. You see the contrast ratio and whether it passes the WCAG 2 levels: AA needs 4.5 to 1 for normal text and 3 to 1 for large text, AAA needs 7 to 1 and 4.5 to 1. Good contrast helps everyone, especially people with low vision.

When to use it

Check text and background colours against WCAG contrast rules.

Tips

Aim for 4.5:1 for normal text and 3:1 for large text.

Privacy

Everything runs in your browser, so your data is not uploaded or stored.

計算例

With the boxes at their starting values (Text colour (hex): #1f2937; Background colour (hex): #ffffff), the tool shows: AA, normal text (4.5 : 1): Pass; AA, large text (3 : 1): Pass; AAA, normal text (7 : 1): Pass; AAA, large text (4.5 : 1): Pass; Interface parts and icons (3 : 1): Pass; Contrast ratio: 14.68 : 1. Change any box to see your own numbers. The result updates as you type, and nothing leaves your browser.

最良の結果を得るためのヒント

結果を信頼する前にすべての項目を確認してください。数字がひとつ違うだけで答え全体が変わります。給与明細、請求書、証明書、契約書にある正確な数字を使い、計算した日付を控えておきましょう。税率、しきい値、ルールは随時変わるため、税金、手数料、法的な事柄については結果を概算とみなし、このページに記載された公式情報源で確認してください。シナリオは何度でも試せます。何も保存・送信されず、ページを再読み込みすると入力欄はクリアされます。