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

文字色と背景色を選ぶと、コントラスト比と、WCAGのAAとAAAを満たすかどうかがわかります。満たさない場合は、基準を満たす最も近い文字色が表示されます。

背景色
文字色

大きな文字、24 px

素早い茶色の狐が、のろまな犬を飛び越える。

コントラスト比

4.54:1

  • AA 通常の文字 4.5:1合格
  • AA 大きな文字 3:1合格
  • AAA 通常の文字 7:1不合格
  • AAA 大きな文字 4.5:1合格
  • AA ボタン、アイコン、枠線 3:1合格

文字サイズ

  • 大きな文字 24 px 24 px以上、太字なら18.66 px以上合格
  • 通常の文字 16 px 16 px以上、一般的な目安合格

無料ツールです。保証も責任も負いません。結果はtransjt.aiの無料ツールが自動で生成したものにすぎません。不完全だったり誤っていたりする場合があります。transjt.aiは、これに基づく判断や変更について一切の保証をせず、責任も負いません。使用する前に、すべての結果を必ず確認してください。

仕組み

3ステップで​色の​コントラストを​チェック。

  1. 01

    2つの色を選ぶ

    文字色と背景色を、HEXで入力するかピッカーで選びます。

  2. 02

    比率を確認

    1:1から21:1まで、WCAGの各レベルとあわせて表示します。

  3. 03

    基準を満たさない色を修正

    基準を満たす最も近い色を、ワンクリックで適用できます。

  4. AIで作ったサイトで試してみましょう。

    今日​デザインして、​明日​公開。

    無料で始めるデモを予約
FAQ

質問と回答。

変換の前によく寄せられる質問。

デモを予約
  • WCAG 2のレベルAAでは、通常の文字に4.5:1以上、大きな文字(24 px、太字なら18.66 px)とアイコンやフォームの枠線に3:1以上が求められます。レベルAAAでは7:1と4.5:1です。

  • 2色の相対輝度から、(L1 + 0.05) ÷ (L2 + 0.05)で計算します。L1は明るいほうの色です。白地に黒は21:1で、これが最大値です。

  • 文字色の色相はそのままに、背景に対して4.5:1に届くまで明度を最小限だけ動かします。そのため、元の色だとわかる色のままです。

  • はい。登録不要で、制限もありません。

今日​デザインして、​明日​公開。

transjtでは一秒一秒が大切です。だから私たちの使命はシンプル。あなたの時間を節約し、ワークフローの手間をなくすことです。