web-dev-qa-db-ja.com

赤い背景のハイパーリンク

私は現在、色#e20413と#FFFのテキストが付いた非常に目立つエラーボックスがあるWebサイトで作業しています。ただし、これには青色の2つのリンクが含まれているため、読みにくい。

これらの状況でハイパーリンクに通常使用される色は何ですか？

現在の状況の例：

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 10px;
}

.alert-danger {
    color: #FFF;
    background-color: #e20413;
    border-color: #ebccd1;
}

<div class="alert alert-danger">
           This is some text with a link to <a href="">some webpage</a> and some more text with another <a href="">link</a>!
        </div>

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 10px;
}

.alert-danger {
    color: #FFF;
    background-color: #e20413;
    border-color: #ebccd1;
}

<div class="alert alert-danger">
           This is some text with a link to <a href="">some webpage</a> and some more text with another <a href="">link</a>!
        </div>

実際に目に見える： https://jsfiddle.net/kLxv8psg/

colorhyperlinks
4
Joost K

リンクにも白を使用してください

alert a {
    color: white;
}

下線は、それがリンクであることを明確に示しています。 https://jsfiddle.net/2dmp9cbj/

9
user2397282

次のように、厳しい赤い境界線で柔らかい赤を試します。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

18
DarrylGodden

このサイトを試してください：

https://webaim.org/resources/contrastchecker/

基本的にここに色のコントラストの問題があります。ハイパーリンクの標準（そして一般的に最もよく知られている色）であるため、青色を維持することもできますが、最近では、テキストが周囲の文言とは異なる色であり、下線が引かれているかどうかを知るのに十分な知識があります。クリック可能なリンクです。

3
sclarke

これは非常に深いトピックであり、目的に応じてさまざまな調査が行われます。単純で単純な「目立たせながらも読みやすくしたい」というのは、個人的には赤の背景にyellowが好きだからです。

https://jsfiddle.net/uh6f84jm/

1
ap55