複数の色の値を入力するとグリッドでそれぞれのコントラストを確認できるツール

ryo_n574 のブックマーク 2022/05/12 10:43

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/4715747093162564706/comment/ryo_n574" data-user-id="ryo_n574" data-entry-url="https://b.hatena.ne.jp/entry/s/contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp" data-original-href="https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcontrast-grid.eightshapes.com%2F%3Fversion%3D1.1.0%26background-colors%3D%26foreground-colors%3D%2523FFFFFF%252C%2520White%250D%250A%2523F2F2F2%250D%250A%2523DDDDDD%250D%250A%2523CCCCCC%250D%250A%2523888888%250D%250A%2523404040%252C%2520Charcoal%250D%250A%2523000000%252C%2520Black%250D%250A%25232F78C5%252C%2520Effective%2520on%2520Extremes%250D%250A%25230F60B6%252C%2520Effective%2520on%2520Lights%250D%250A%2523398EEA%252C%2520Ineffective%250D%250A%26es-color-form__tile-size%3Dcompact%26es-color-form__show-contrast%3Daaa%26es-color-form__show-contrast%3Daa%26es-color-form__show-contrast%3Daa18%26es-color-form__show-contrast%3Ddnp" data-user-icon="/users/ryo_n574/profile.png">EightShapes Contrast Grid</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/accessibility">accessibility</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/color">color</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%22color%20contrast%22">color contrast</a>]</li></ul><br><p style="clear: left">複数の色の値を入力するとグリッドでそれぞれのコントラストを確認できるツール</p><a class="datetime" href="https://b.hatena.ne.jp/ryo_n574/20220512#bookmark-4715747093162564706"><span class="datetime-body">2022/05/12 10:43</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

EightShapes Contrast Grid

contrast-grid.eightshapes.com2022/02/21

Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2...

3 人がブックマーク・1 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

EightShapes Contrast Grid

はてなブックマーク

公式Twitter

はてなのサービス