HSLの明度が色相によって知覚的に揃わない問題を示し、sRGBの色をOKLCH色空間へ変換する関数と、WCAG 2.1のコントラスト比を計算して4.5:1を満たす明るさに自動で調整する関数をJavaScriptで解説する記事。
シェアックリップ
シェアされたアックリップです。
そのほかの #カラーコントラスト ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
色のコントラストを測る2つの方式、WCAG 2 のコントラスト比と APCA（Lc 値）の違いを解説する記事。WCAG 2 の計算の手順、達成基準ごとに必要な比率、WCAG 2 の限界と APCA の位置づけを扱う。法律や規格で使われているのは WCAG 2 のコントラスト比だと書いている。
デジタル庁のデザインシステム（DADS）を参考に、小さい文字やコントラスト比をウェブサイトで点検するAIエージェント向けスキルを紹介する記事。Pythonで候補を拾い、ブラウザで確かめ、人が判断する二段階の点検を解説する。
テキストと背景のコントラスト比が基準を下回ったときに、色相と彩度を保ったまま明度だけを二分探索で調整して補正候補色を求める方法を、WCAG 2.2の計算式とJavaScriptの実装で解説する。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
JIS X 8341-3の試験実施ガイドラインと発注ガイドラインをもとに、アクセシビリティ診断の見積もりで試験するページ数を決める方法を整理する。ページの選び方と枚数の目安を、公開された試験結果と照らして解説する。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
Playwright と @axe-core/playwright で、WCAG の A・AA の違反を自動テストで見つける方法を解説する記事。メニューを開いた状態のような操作後の画面を検査する書き方や、既知の問題を除いて新たな違反だけを検出する方法を扱う。自動テストで検出できるのは一部であることも書いている。