カラーコントラストチェッカー (WCAG)

この計算ツールについて

このツールは、前景色と背景色のWCAGコントラスト比を計算します。値は1:1（同じ色でコントラストなし）から21:1（純白の上の純黒）までで、各色の相対輝度から求められます。さらにその比を、公式のアクセシビリティ基準であるAAとAAAのしきい値、すなわちAAが4.5:1、AAAが7:1と照らし合わせ、文字と背景の組み合わせが基準を満たすだけの読みやすさを備えているかを判定します。なお規格は大きな文字に3:1という緩い基準も認めていますが、このツールはそれを適用しません。

ウェブデザイナーやフロントエンド開発者が、配色を世に出す前に確かめるために使います。コントラストの低い文字は最もよくあるアクセシビリティの苦情の一つで、地域によっては法的な要件を満たさないこともあるからです。アクセシビリティの監査担当者も、ウェブサイトやアプリのWCAG適合を確かめる際に同じ計算を使い、デザインシステムはこの問題をそもそも避けるため、AAを満たす色の組をコンポーネントライブラリに組み込んでいることが多くあります。