WCAG AA に合格するにはどのくらいのコントラスト比が必要ですか？
通常のテキストは 4.5:1、大きなテキスト（18pt 以上、または 14pt の太字）は 3:1 が必要です。WCAG コントラストチェッカーは、この両方のしきい値と、合格・不合格の状態をその場で表示します。
コレクション
デザイン・カラーツール
色のコントラスト比が WCAG に適合しているかを確認し、色覚特性をシミュレートし、アスペクト比を計算できます——すべてブラウザーで動く無料のデザイン補助ツールです。
このカテゴリには 3 個のツールがあります
← ホームこのコレクションの目的
アクセシブルで均整のとれたビジュアルは、正しい数字から始まります。このコレクションは、デザイナー、開発者、コンテンツ制作者が色のアクセシビリティを確認し、見え方をシミュレートし、正しい比率を固定するために使う TeaFun のツールをまとめています。
よくある使い方
- デザインを納品する前に、本文とその背景が WCAG AA のコントラスト比を満たしているかを確認します。
- 配色を緑色覚異常と赤色覚異常で確認し、状態を表す色だけが意味を担っていないかを確かめます。
- 切り抜きや書き出しの前に、画像や動画のフレームをきれいな 16:9 や 4:3 の比率に固定します。
このコレクションでできること
デザインの裏にある数字を正しくするための三つのツールです。WCAG コントラストチェッカー、色覚シミュレーター、そしてアスペクト比計算機。コントラストチェッカーは前景色と背景色を受け取り、WCAG の AA と AAA のしきい値に対してコントラスト比を示すので、文字が読めるかどうかを当て推量せずに分かります。色覚シミュレーターは、よくある色覚特性を持つ人にその配色がどう見えるかを近似します。アスペクト比計算機は、拡大縮小や切り抜きの際に比率を正しく保ちます。いずれも小さく的を絞ったツールで、デザインを作るためのキャンバスではなく、終盤に行う確認のためのものです。
このコレクションの使い方
文字が色や画像の背景の上に乗るときは、必ずコントラストチェッカーを使います。両方の色を入力し、通常のテキストで少なくとも 4.5:1、大きなテキストや太字で 3:1 を満たすかを確認します。色が意味を担うもの——グラフ、状態を示すバッジ、フォームのエラー表示——にはすべて色覚シミュレーターを通し、色がなくても情報が伝わるかを確かめます。相当数の利用者が何らかの色覚特性を持つからです。ゆがませずにサイズを変えたいときは、アスペクト比計算機を使います。片方の寸法と目標の比率を入力すれば、もう片方を求めてくれます。
これらの確認が大切な理由
アクセシビリティと比率は、目だけで判断すると間違えやすいものです。校正済みのモニターでは問題なく見える配色が、日なたのスマートフォンではコントラスト不足になることがあり、あなたにははっきり読める配色も、色が唯一の手がかりなら色覚特性のある利用者には成り立たないことがあります。WCAG の比率が存在するのは、まさに人間のコントラスト判断が当てにならないからです。比率も同じく大切です。切り抜きを誤った画像や引き伸ばされた動画は、人が名前は言えなくても気づいてしまう小さな欠点です。これらのツールは代わりにデザインをしてくれるわけではありません。良い目でも見落としうる、測れる間違いを捕まえてくれるので、作品があなた自身の画面の外でも通用するのです。
注目のツール
よくある質問
色覚シミュレーターはどのように動作しますか？
入力した色に標準的な色覚変換行列を適用し、さまざまな種類の色覚特性でどう見えるかを近似します——すべてブラウザー内でローカルに計算します。
情報を伝える手段を色だけにしてもよいですか？
いけません。特定の色を見分けられない人がいるため、色による合図には必ず別の手がかりを添えてください——ラベル、アイコン、模様、または文字です。シミュレーターは、色が失われても意味が残るかどうかの確認に役立ちます。
アスペクト比は画像や動画にとってなぜ重要なのですか？
誤った比率で切り抜いたり拡大縮小したりすると、内容がゆがむか、レターボックスの黒帯が入ってしまいます。16:9 や 1:1 のような標準比率に固定すれば、表示される場所がどこであっても、比率が保たれて予測しやすくなります。