Webアクセシビリティガイドラインのコントラスト比について色相環を使って視覚化してみた。｜brightflavor@育休中Webデザイナー×グラフィックレコーダー
2-PCCS色相環の各色を背景色にした時、レベルAA達成になる色合いは？さて、コントラスト比は4.5:1で作るのがベストと改めて確認できたので、ここから色の勉強や色彩検定などで必ず出てくる色相環をベースに作ってみることにします。 ■前提として ・「PCCS色相環」の24色のカラーコードを基準色として利用。 ※RGB値（16進数）のコードは下記サイトより。 ・文字は白（#FFFFFF）。 ・色相環24色を背景色とし、HSVの「明度」を変化させ、どこまで明度を落とすとレベルAA（コントラスト比 4.5:1）達成になるかをみる。 ・測定に使用したアプリは「カラー・コントラスト・アナライザー」 結果、こうなりました。 色相環で表すとこんな感じに。 こうしてみると、レベルAA達成の時点でダーク寄りの色合いになってしまうのが、よくわかると思います。特に、朱色（v4）から緑（v12）のあたりまでの色は、
カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku
こんにちは。 最近、今更ながらPodcastって面白いなぁーとワクワクしてます。 どうも、しばひろです。 ということで、Shibajukuでもポッドキャストを始めてみました。 Shiabajukuのサロンメンバーたちの会話を盗み聞きしてもらうというポッドキャスト「シバジュク酒場」です。 さて、今日は、色んなWebサイトでよく見かけるカード型コンポーネントについて書いてみたいと思います。 というのも、よく見かけるコンポーネントだからこそ、色んなマークアップ方法があると思うのですが、僕なりのマークアップ方法が誰かの参考になるかもしれないし、色んなコンポーネントのマークアップを考えるきっかけになるかもしれないので書いてみようと思いました。 カード型コンポーネントって何？ まず、カード型コンポーネントがどんなコンポーネントかっていうと、まるでカードのような縦型になっていて、一般的には、最初に画像が
新卒社員がアクセシビリティ勉強会に参加して感じたこと｜sakashita kako / Fenrir Inc.
はじめに初めまして！新卒の坂下です。2019年度フェンリルの新卒で入社し、駆け出しのデザイナーとして日々業務を行なっています。 今回は2019年12月にフェンリルで開催されたアクセシビリティ勉強会について、学んだことや感想などを新卒の視点から書いていこうと思います。 noteを書くのは初めてなので文章がおかしい点などあるかとは思いますが、温かい目で見ていただけると幸いです。 アクセシビリティ勉強会 フェンリルでは不定期でデザインに関する様々な勉強会を行っております。 今回の題材となっている勉強会ではfreee株式会社の伊原力也さん、Cocktailzの伊敷政英さんを講師としてお招きし、実践的に学べる勉強会型ワークショップを開催していただきました。フェンリルのデザイン部門に所属するデザイナーとディレクター、実際にアクセシビリティに取り組んでいるエンジニアなど総勢60名を対象に行われ、お昼休憩
Web標準でつくるガラケーサイト
このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
アクセシビリティを向上していくために出来ることから進めていく活動 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。フロントエンドチームのUXエンジニア みーた です。 今回は私が今一番熱く燃えている🔥アクセシビリティ向上をここ半年間どうやって社内外で布教しているかを５つほど紹介したいと思います。アクセシビリティ向上していきたいけど、ひとりじゃできないし、どうしていったらいいのか分からない！って人に是非読んでいただきたいです:) なぜアクセシビリティ向上に熱を入れてるのか アクセシビリティとは「障がい者のための対応」というイメージを持つ方がまだ多くいるかと思いますが、そうではなく 「能力や環境にかかわらずユーザー全員が、同じ情報を得られること」だと考えています。 屋外で画面を見ると見づらい 怪我をしてマウス操作が難しい 歩きスマホが危ないと言われていても情報を得たい このように健常者であっても普段の生活の中で困ることはあるかと思いますが、アクセシブルな対応が出来ているとこれらを解消出来ちゃ
文字色が#333のときに背景色として使える色90色のまとめ | Web担当者Forum
1か月前に書いたコラムで、文字色が黒のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。 文字色が黒のときに背景色として使える色141色のまとめ（Web担当者Forum） http://web-tan.forum.impressrd.jp/u/2012/04/03/12500この記事にはたくさんの反響がありました。その中には「実際にウェブ制作で使われるのは#000ではなく#333や#666なので、こちらについても調べてほしい」というコメントもいただきました。 先天性の弱視である私自身、以前からウェブを使っている中で「この文字色はいわゆる真っ黒じゃなくて濃いグレーなんだな。なんでこういう色を使ってるんだろう。読みにくいなあ」と感じていました。そこで文字色が#333の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにし
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
（WIP）ReactNativeのアクセシビリティ項目の日本語訳
一人から始めるWebアクセシビリティ
アクセシブルなウェブの実装のためにWAI-ARIAを使いこなす #a11y_mgn @masuP9
Webアクセシビリティ53についての覚書 - ねんがんのWebユーザビリティテストに参加した