フロントエンドとモバイル
カラー・アクセシビリティツール
Web上の色に関する作業は、見た目の合う色を選ぶことと、誰が見ても機能する色にすることの2つに分かれます。色を別の形式に変換する、基準色から濃淡やハーモニーのパレットを組み立てる、背景に対して文字が読みやすいか確認する。これらはほぼすべてのUIで発生する別々の作業で、どれか1つ間違えると公開した瞬間に問題が現れます。
色変換は1つの色をHEX・RGB・HSL・HSV・CMYK・Lab・OKLCHの7形式で同時に示すので、変換を推測する必要がありません。カラーコントラストチェッカーはWCAGの基準で検証し、APCAコントラストチェッカーは新しいAPCAモデルで判定します。色覚シミュレーターは色や画像を視覚モデルで比較し、失敗するパレットを見つけます。
5個のツール
Color & Accessibilityツールに関するFAQ
WCAGのコントラストとAPCAの違いは何ですか。
WCAGのコントラスト比は単純な輝度の計算式で、明るい文字と暗い文字を知覚とはずれた形で非対称に扱います。APCAはより知覚に近いモデルでコントラストを表現します。カラーコントラストチェッカーはWCAGの基準をカバーし、APCAコントラストチェッカーは同じ色の組み合わせに新しいAPCAモデルを適用します。
自分のカラーパレットが色覚特性を持つユーザーにも機能するか確認する方法はありますか。
視覚特性をシミュレーションするのが唯一の確実な確認方法で、色覚特性は元の色を見ただけでは分からない形で色の知覚に影響します。色覚シミュレーターは色や画像を複数のシミュレーション視覚モデルのもとで並べて比較できます。
HSLの代わりにOKLCHを使うべきなのはどんなときですか。
OKLCHは知覚的に均一になるよう設計されているため、明度の値を変えても、HSLのように彩度の見え方がずれることが少なくなります。色変換は同じ色をOKLCHとHEX・RGB・HSL・HSV・CMYK・Labで並べて示すので、直接比較できます。