アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
背景色が白のときに前景色として使える色78色のまとめ
これまで2回のViewpointで、Webセーフカラーのコントラスト比と、さまざまな視覚特性における見やすさ、そして弱視である私の主観的な見やすさを紹介する記事を書きました。 Webセーフカラーとコントラスト比と色覚特性と(7月12日) Webセーフカラーとコントラスト比と色覚特性と(2)(8月11日) これらの記事を書いた後も調査を続け、216色のWebセーフカラーすべてをチェックしました。その結果、JIS X 8341-3:2010で規定している4.5:1以上のコントラスト比を持つ色の組み合わせは78通りあることがわかりました。今回のコラムではこの結果についてご紹介します。 話の発端を振り返ってみる 過去2回のコラムにも書きましたが、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデー
熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話
Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。 普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。 そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。 Webアクセシビリティにおけるコントラストとは？ イメージ画像 / Unsplash *コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Button Contrast Checker | Aditus | Free tool
