カラーユニバーサルデザイン推奨配色セット ver.4の配色を使用したスタイルシート

カラーユニバーサルデザイン推奨配色セット ver.4 に基づいたスタイルシートを公開します。
自治体のホームページなど、アクセシビリティ(accessibility, a11y)が重視される場合にご利用ください。

全20色

アクセントカラーが9色、ベースカラーが7色、また無彩色から4色が選定され、合計20色あります。
※ver.3とは、同じ色でもrgb値が異なりますのでご注意ください。

スタイルシート

スタイルシートにしました。クラスを付与したhtmlを作成すれば、これらの色が反映されます。

.text-red {
    color: #ff4b00 ;
}
.text-yellow {
    color: #fff100 ;
}
.text-green{
    color: #03af7a ;
}
.text-blue {
    color: #005aff ;
}
.text-skyblue {
    color: #4dc4ff ;
}
.text-pink {
    color: #ff8082 ;
}
.text-orange {
    color: #f6aa00 ;
}
.text-purple {
    color: #990099 ;
}
.text-brown {
    color: #804000 ;
}
.text-lightpink {
    color: #ffcabf ;
}
.text-cream {
    color: #ffff80 ;
}
.text-yellowgreen{
    color: #d8f255 ;
}
.text-lightskyblue {
    color: #bfe4ff ;
}
.text-beige {
    color: #ffca80 ;
}
.text-lightgreen {
    color: #77d9a8 ;
}
.text-lightpurple {
    color: #c9ace6 ;
}
.text-white {
    color: #ffffff ;
}
.text-lightgray {
    color: #c8c8cb ;
}
.text-gray {
    color: #84919e ;
}
.text-black {
    color: #000000 ;
}
.background-red {
    background-color: #ff4b00 ;
}
.background-yellow {
    background-color: #fff100 ;
}
.background-green{
    background-color: #03af7a ;
}
.background-blue {
    background-color: #005aff ;
}
.background-skyblue {
    background-color: #4dc4ff ;
}
.background-pink {
    background-color: #ff8082 ;
}
.background-orange {
    background-color: #f6aa00 ;
}
.background-purple {
    background-color: #990099 ;
}
.background-brown {
    background-color: #804000 ;
}
.background-lightpink {
    background-color: #ffcabf ;
}
.background-cream {
    background-color: #ffff80 ;
}
.background-yellowgreen{
    background-color: #d8f255 ;
}
.background-lightskyblue {
    background-color: #bfe4ff ;
}
.background-beige {
    background-color: #ffca80 ;
}
.background-lightgreen {
    background-color: #77d9a8 ;
}
.background-lightpurple {
    background-color: #c9ace6 ;
}
.background-white {
    background-color: #ffffff ;
}
.background-lightgray {
    background-color: #c8c8cb ;
}
.background-gray {
    background-color: #84919e ;
}
.background-black {
    background-color: #000000 ;
}

• text-(色名) : 文字色を指定する
• background-(色名) : 背景色を指定する

注意点

カラーユニバーサルデザイン推奨配色セット ver.4の冊子に記載がありますように、この20色は、どの組み合わせで使ってもよい、というものではありません。この20色から選ぶ場合でも、選び方が良くないと、見分けにくい色の組み合わせが生じることがありますのでご注意ください。

JIS安全色版はこちら をごらんください。