JavaScriptで背景色から文字色を導出する
この記事を読んで、文字色の判定の基準が気になったので調べてみました。 w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも 4.5:1 になるようにとなっていました。大きい文字では 3:1 まで。 Material DesignもWCAGのこの基準をもとにしているそうです。
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事を読んで、文字色の判定の基準が気になったので調べてみました。 w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも 4.5:1 になるようにとなっていました。大きい文字では 3:1 まで。 Material DesignもWCAGのこの基準をもとにしているそうです。
いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし
すぴかあやか（角田綾佳）＠キテレツ on Twitter: "コピーの一部を強調のために色をつけると、元々の文字色に負けてしまうジレンマについて書きました。作っている最中は「強調した」と思うので気がつきにくいけれど、あとで冷静に見ると色薄いな…みたいなことをよくやってしまいます。 https://t.co/w4ztPuiv1E"
コピーの一部を強調のために色をつけると、元々の文字色に負けてしまうジレンマについて書きました。作っている最中は「強調した」と思うので気がつきにくいけれど、あとで冷静に見ると色薄いな…みたいなことをよくやってしまいます。 https://t.co/w4ztPuiv1E
項目 内容 記事の種類 はてなブログの書き方、はてなブログの使い方 SEO施策 関係なし SXO施策 関係なし 難しさ かんたん 重要さ 重要 次のような方にオススメ！ はてなブログのフォントの色を変えたい はてなブログの文字色の変え方が分からない ブログ記事を装飾したい ブログ記事の見栄えを良くしたい 読みやすいブログ記事を作りたい ぴっぴも本ブログを始めた頃、フォントの色を変更して読みやすいブログ記事を作りたいと思いました。 フォント色の変更て難しいと思っていたんですけど、見たまま編集の場合、色を変えたいところを指定して「文字色」ボタンを押すだけなんです。 そのような訳で今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログのフォント色の変更手順を紹介します。 記事の内容 はてなブログのフォント色の変更方法 はてなブログの文字色の変えるときの注意点 はてなブログのフォント色を変
見出し 行頭に#を付けると見出し形式になります。 #の数が見出しレベルと一致します 入力例 # 見出し1です ## 見出し2です ### 見出し3です #### 見出し4です ↓ 表示結果 見出し2です 見出し3です 見出し4です 太字・斜体・訂正線 ** または __ によって囲まれた文字列は「太字」になります。 * または _ によって囲まれた文字列は「斜体」になります。 ~~ で囲まれた文字は「訂正線」になります。 入力例 これは **太字** です。 これは __太字__ です。 これは *斜体* です。 これは _斜体_ です。 これは ~~訂正線~~です。 ↓ 表示結果 これは 太字 です。 これは 太字 です。 これは 斜体 です。 これは 斜体 です。 これは 訂正線です。 URLリンク [表示テキスト](URL) でURLリンクになります。 入力例 [ドキュメント情報共有
ノンデザイナーズ・デザインブックを読んだら、配置・文字・色についてスゴイわかりやすかった。。。 - くらげになりたい。
ノンデザイナーズ・デザインブックの感想文。 というか、気になった言葉のクリップ集。 好きな部分...(´ω｀) デザインには、そして人生にも、全般的に通用する方針がもう一つあります。 それは、臆病になるな、ということです。 これもすき(´ω｀) しかし、ルールを破るためのルールを覚えておいてください。 それは、ルールを破るためには、まずルールを知らなければならないということです これも〜(´ω｀) 活字はけっしてコミュニケーションを妨げてはならないのです。 デザイン(と言っても幅広いですが)に関して、まとめて理解できるのでよかった(´ω｀) p.13 4つの基本原則 コントラスト ... はっきり異ならせること 反復 ... 視覚的要素をくり返すこと 整列 ... 他の要素と視覚的な関連をもつこと 近接 ... 関連する項目は、近づけてグループ化すること p.15 近接の原則 近接の原則と
【はてなブロガー】【文字色】色相環から学ぶ文字色カスタムのうまい使い方3選！これでチカチカブログともおさらば！ - 田舎の時代がやってくるやん
こんにちはひがじんです。 今回は、ブログで毎回悩む配色を色相環や色の性格に合わせて上手に活用し、記事が色でごちゃごちゃにならずに【色美人】ブログになれる使い方を紹介していきます！ 【色相環】の勉強をしてみました。 様々な業界や場面で色が使われている ファッションの色 ゲーム・アニメの色 ビジネスの色 子育ての色 医療・福祉の色 自然界の色 【色相環から学ぶブログ記事の配色方法】 【違和感なくブログをさらーっと読ませたいなら彩度を抑えて色は多用しない】 【伝えたいことが鮮明で強烈なら補色効果】 【場面やテンションに合わせた色文字の使い方】 簡単文字色性格 まとめ 記事を書き終えて最後の仕上げに文字色を変えるのですが、、 あれも重要、これも重要、こっちも伝えたい！ そんなこんなでいつの間にかブログが色でぐちゃぐちゃになることありませんか？ 最終的に香港の歓楽街みたいになって何がなんやら、、 目
カテゴリーの文字色を変更！簡単です♪
カテゴリーを新規追加したらまたもとの色に PageSpeedInsightsでコントランスがわかりずらいとカテゴリーのピンク色に白い文字の指摘があったのでピンクはそのままで字を焦茶にしたら合格になったのですが、カテゴリーを新規追加すると反映されないみたい。やり方わすれちゃった～💧ここ1週間ぐらいさがしているのですが見当たらない・・・確か簡単だったのだけどどこだったかな～？簡単なことも残しておかないと忘れてしまう・・・早速【ペイント】を使って説明していきます(^_-)-☆
<script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='./js/midnight.jquery.min.js?ver=5.4.1'></script>
HTMLを記述する <div class="kv"> <div class="bg"> <div class="text-block text-white"> <p class="text">webkore<br>Text Split Layout</p> </div> </div> <div class="text-block text-black"> <div class="text-inner"> <p class="text" aria-hidden="true">webkore<br>Text Split Layout</p> </div> </div> </div> 全体のHTMLコードです。 白と黒の2色のテキストを用意 2色のテキストをピッタリと重ね合わせる テキストの親要素等にwidthやoverflowで、はみ出た部分を非表示にしていく このような流れで作ります。 キー
人生に変化を求めている20代前半の社畜です。ニッチな記事を書いていければいいと思います。(このブログではアフィリエイトプログラムを使用しています。) 人生を加速させたい。 はてなブログを見ていると「なんか、文字が見にくいな～」と思うことがあると思います。 その理由は、文字サイズと文字の色にあることが多いです！(何故か文字サイズが小さく、色が薄いテンプレートが多いんですよね…) 今回は、標準文字の文字の大きさと文字の色を変更する方法を紹介していきます！ はてなブログの文字は何で見にくいの？はてなブログの文字が見にくい理由は、文字サイズが15px等の小さめに設定されていたり、文字の色が薄く設定されているテーマが多いためです。 Googleでは、通常の文字の大きさが16px以上であることが推奨されているので、この機会に自分のブログのフォントについて確認してみましょう！ テーマごとにデフォルトで設
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar
はてなブログのフォント（文字）色の変更は指定しボタンを押すだけ！ - ぴっぴのはてなブログでアフィリエイト
Markdown記法/書き方（見出し・表・リンク・画像・文字色など）
背景色に合わせて文字色や画像の色を変更したいときに使えるMidnight.js
CSSを使って画像を境に文字色を反転させる方法を解説 | 模写修行メディア
はてなブログの通常文字が見にくい…？？文字色の変更と文字サイズの変更方法！
www.jaxa.jp
ofunato.jp
mapikotan.com
magcomi.com
www.nikkei.com
aipure.ai