CSSで読みやすい文字の色を設定する

-

Webデザインにおいて、明るい背景色に明るい文字、暗い背景色に暗い文字を配置すると、視認性が低下します。誰にでも読みやすいデザインにするためには、背景色と文字色のコントラスト比を高くする必要があります。

WCAGのAA基準では、このコントラスト比を4.5:1以上にすることが推奨されています。

Web Content Accessibility Guidelines (WCAG) 2.2


CSSではcontrast-color()関数を使用することで、背景色に応じて読みやすい文字色を計算することができます。

この関数は、指定された色に対して白か黒のうち、よりコントラスト比の高い色を返します。


.content {
  background-color: var(--bg-color);
  /* 背景色に応じて、自動で白か黒の読みやすい方が選ばれる */
  color: contrast-color(var(--bg-color));
}


ただしグレーのような中間色の場合、必ずしも最適な色になるとは限りません。それでも、色の管理がしやすくなり、とても便利な機能です。


5/19（火）～ 5/20（水）開催のバックオフィスDXPOに出展します。

このブログの人気の投稿

googleドライブの同期は、フォルダ選択ができました。

-
あれ、PCアプリがインストールできない…。 と思ったら、久しぶりの「ドライブ容量不足」。懐かしい感じさえあります。 メインＰＣとして使っているノートＰＣは、ＳＳＤに換装してありますが、ネックはやはりドライブの容量です。超快適な高速レスポンスと引き替えに容量を捨てたのですが、アドビツール群などデカイやつもインストールして持ち歩いているので、どうしてもＳＳＤ容量が圧迫されます。 私のＰＣにはgoogleドライブアプリを入れて、「同期」機能を便利に使っています。 しかし丸ごと同期していると不要なファイルまで同期されて、なけなしのＳＳＤの容量を食ってしまいます。その中には、時々しか参照しないような、クラウドのストレージだけにあれば良いようなファイルも結構沢山あるのです。調べてみれば解りますが、だれでも実際の所、パソコンの中にあるデータの殆どは、たまにしか参照しないファイルばかりのはずです。 googleドライブのＰＣ用アプリでは、同期するフォルダを選択できるので、これを活用します。直下のフォルダのみ選択できるので、うまくフォルダを作って運用してみてください。 右下に鎮座している googleドライブのアイコンを右クリックして 表示されたメニューから「設定」をクリック 同期オプションの「このパソコンに一部のフォルダのみを同期」にチェックを入れ googleドライブ以下のサブフォルダが一覧されるので、同期したいフォルダにチェックを入れます 最後に「変更を摘要」ボタンをクリック これだけでＯｋです。 マイドキュメント内は殆どが MS Office ファイルで、オフラインで使っています。googleドライブアプリでの同期は自動バックアップとしての意味が強いので、これはそのままにします。 自動バックアップしたいフォルダ、社内やパートナーと共有しつつローカルで参照したいフォルダだけ残します。 google ドキュメントを使っているフォルダはリンクファイルしかコピーされないので共有不要だと思います（容量はたいしたことないので、ランチャー（開き用）として使っているならアリですね）。 写真類は結構ローカルドライブの「肥やし」になっているので、１年前以上古いモノは思い切って全てクラウドに預けちゃいましょう。思ったほど困りませんし、パソコ...
続きを読む

技術メモ「503 Service Unavailable」

-
イメージ
開発メンバーから「開発中のWEBページが開けなくなった」とヘルプ要請がありました！ 開発中のWEBページにアクセスすると「HTTP Error 503. The service is unavailable.」の画面が表示されて、どのページも開けません。 503エラーは、サーバーにアクセス集中したときのエラーなのですが... 今回は思いがけない問題が原因でした。 同現象が発生した人のため、再発したときの解決ために、原因究明までの手順を残しておきます。 ------ ① まずIISを再起動します。 　　－＞　復旧しませんでした。 ② IISの初期ページが開けるか？ 　　－＞　503エラー ③ IISを停止してみます。 　　－＞　「localhost で接続が拒否されました。」のエラーに変わりました。 　　－＞　503エラーが変化したことから、WEBサーバーまでの通信は問題ないようです。 ④ WEBサイトを作成し直して、IISの初期ページが開けるか？ 　　－＞　OK　（IISの問題？） ⑤ 仮想ディレクトリを作成し直して、開発中のWEBページが開けるか？ 　　－＞　503エラー！ ⑥ ④と⑤のアプリケーションプールが異なっていたことから、アプリケーションプールを変更 　　－＞　OK ------ DefaultAppPoolが破損して、停止していたことが原因だったようです。 破損していたDefaultAppPoolを使用しないようにして、ひとまず対処完了です！ インプラスホームページはこちら（ https://implus.co.jp/ ）
続きを読む

グーグルグループのメーリングリストの返信先が個人になってしまう

-
イメージ
グーグルグループで、メーリングリストを作ると、返信先が個人になってしまいます。 「返信」でメーリングリストに送りたいことが多いですし、詳しい人以外は気づかないで個人に返信してメーリングリストに送ったと思い込んでしまうことも少なくありません。googleさん、 不親切ですねぇ。 googleの理念 に反してますよ～。 ◆メーリングリストの返信先を個人ではなく、メーリングリスト宛てに設定する 「グループ設定（歯車マーク）」→「設定（左メニュー）」→「メールオプション」で、「返信の送信先をユーザが決定する」をクリックして、現れたリストから「グループ全体」を選択します。（下の画像） 選択できたら、上の方にある「保存」ボタンを押すのを忘れずに！ これで、返信先を気にせずにメーリングリストが使えます。 毎日に関わる小さなカイゼンが積み重なって大きな快適を生み出します。ストレスの蓄積も減りますね。こういうの大切ですね～。
続きを読む