web-dev-qa-db-ja.com

ウェブサイトの一部としてのカラーコントラストツール

最近、カラーコントラストを変更するツールがいくつかあるWebサイトにアクセスして、開発中のサイトに追加できるようにそれらを見つけようとしました。明らかに、私はここにいるので失敗しました。どこで入手できるか誰か知っているかどうか尋ねているところです。私のサイトでこれらのオプションをどこで入手できるかを誰かが知っているなら、私はそれを本当に感謝します。ダイム上の異なるスタイルシートを切り替えるボタンにすぎないようです。

私がそれらを見つけたサイトは http://screenreader.net です。

contrast tools

accessibilitycontrast
2
jlg

問題のウェブサイトではPHPクエリ文字列（ http://screenreader.net/index.php？colourscheme = ...）使用するスタイルシートを決定します。これはおそらく次のようなコードで行われます。

<link rel="stylesheet" type="text/css" href="<?php echo $_GET["colourscheme"].".css"; ?>" />

これは使用できるソリューションの1つですが、ご覧のように理解するのは簡単ではなく、率直に言って、コードでは見栄えがよくありません。

別の解決策は、いくつかのボタンを用意し、JavaScript関数を使用してスタイルシートを変更することです。あなたが使用できる私自身の発明のJSフレームワークがあります： tils.JS 。いくつかの単純なHTMLとJSがこれを機能させます。

<a href="javascript:document.changeStylesheet('id','stylesheet.css')">Change Style</a>

これにより、クリックしてスタイルシートを変更するリンクを作成できます。本当にスマートになりたい場合は、ユーザーが選択したスタイルシートを同じフレームワークを使用してCookieに保存し、次にアクセスしたときに再度選択することができます。

EDIT：上記のソリューションでは、javascript:疑似プロトコルを使用しているため、ページが壊れてスタイルシートのURLが表示される場合があります。代わりに、これを使用する方が賢明です。

<a href="javascript:void(0)" onclick="document.changeStylesheet('id','stylesheet.css')">Change Style</a>
2
ArtOfCode

提供されたWebサイトでテーマを変更すると、URLが追加のパラメーターcolourschemehttp://screenreader.net/index.php?colourscheme=blackonwhiteで変更されることがわかります。次に、それをバックエンドで分析し、必要なCSSファイルをすべてのスタイルで配置します。画像をもっと見てください。enter image description here

3
alx lark

次のリソースは、特に、サイトのアクセシビリティの評価と管理に役立ちます。 色のコントラスト管理面：

1）プログラムによるコントラストの変更： https://stackoverflow.com/questions/21034791/color-contrast-customization-in-web-design ;

2）いくつかのツールへのリンクがある記事： http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-contrast

3）他の興味深い記事： http://lea.verou.me/2012/10/easy-color-contrast-ratios

お役に立てれば！

1
Aleksandr Blekh