アクセシブルなパレット: カラーシステムでHSLを使うのをやめる

• Postmarkでカラーシステムを再構築した経験と、以前のパレットで直面した問題について著者が共有します。
• 以前のパレットの主な問題は、色の知覚される明るさに一貫性がなく、色のバリエーション間のコントラスト比が予測不能だったことです。
• 著者は、これらの問題がHSLカラーモデル固有の欠陥と、デザインツールにおけるより良い代替案へのサポート不足によって生じたと説明します。
• 著者は、HSLの代わりに、人間の明るさと彩度の知覚を反映するよう設計されたCIELABおよびLCh色空間を、より優れた代替案として紹介します。
• 著者は、一貫した明るさと予測可能なコントラスト比を持つカラーシステムを構築するためのツールであるAccessible Paletteアプリを紹介します。
• このアプリでは、ユーザーが明るさレベルをカスタマイズし、コントラスト比を制御し、RGBまたはCIELAB色空間に基づいてカラーパレットを生成できます。
• 著者は、現在のWCAG 2.1コントラスト比計算の欠陥について論じ、アプリで使用されているAdvanced Perceptual Contrast Algorithm（APCA）を紹介します。
• 著者は読者に対し、できるだけ将来を見据え、規格準拠のためにWCAG 2.1とAPCAの両方のガイドラインを考慮してカラーシステムを構築してみるよう勧めています。
• 著者はAccessible Paletteアプリを使う利点を強調し、質問やフィードバックがあればいつでも連絡してほしいと読者を招いています。

[GN⁺]

Hacker Newsのコメント

• 一般的なディスプレイおよび印刷システムでは、彩度の高い赤と青は緑よりも暗く見えます。
• コントラストのルールを適用すれば色の選択はアクセシブルになりますが、この記事の手法は、アクセシブルでありながら視覚的にも魅力的な選択を可能にします。
• 彩度の高いディスプレイ上の緑は実在しうるほどには高彩度ではありませんが、現実世界にあるほとんどの緑よりは高彩度です。
• 木や草における赤と緑のチャンネルのバランスは、ステレオグラムで見栄えよく機能します。
• WCAG 2.1の色コントラスト推奨は、ときにコントラストが十分でないサンプルよりも読みにくい結果を生むことがあります。
• この記事は、色に関する包括的な資料へのリンクを提供しています。
• コメント投稿者は、ClickHouseでログに色を付ける際にこの記事の考え方を活用しています。
• APCAは、WCAG 2の色コントラストアルゴリズムの潜在的な後継として言及されています。
• 色を扱う際、ツールやアルゴリズムは単なる数学的近似にすぎないため、自分の目を信じることが重要です。
• CSS color() 関数は、sRGBだけでなくさまざまな色空間をサポートしています。
• アクセシビリティと色覚異常との相互作用に関する知覚モデルの妥当性に疑問を投げかけています。
• LChの代替としてoklabを提案しています。
• 記事で言及されているAPCA Contrastは、WCAG 2.1のContrast Ratioよりも一部の色に対して公平だと考えられています。
• 色彩理論とAPCAに関する追加資料が提供されています。
• 著者は、Webフォームだけでなく、あらゆるソフトウェアで使えるアルゴリズムを望んでいます。
• Kritaの高度なカラーピッカーで使われている色モデルHSYについて、別の記事でも言及されています。