scelta dei colori di background e colori di contrasto

borgo italia · 5 Set 2016

due paginette per poter valutare la scelta del colore di background e valutare quale colore conviene utilizzare (contrasto) per avere una migliore leggibilità.
nella pagina codiciCOLORI.php si sceglie un colore di background

PHP:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>codice colori</title>
<style type="text/css">
body {
    background-color: #000;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
#container{
    display:block;
    background-color: #333333;
    width:95%;
    margin-left:2.5%;
    margin-right:2.5%;
    height:auto;
}
.titoli{
    display:block;
    width:80%;
    margin: 2px 10% 2px 10%;
    border: 1px solid #fff;
    font-size:1em;
    font-weight:bold;
    text-align:center;
}
.standard{
    width:45%;
    margin-left:27.5%;
    margin-right:27.5%;
}
.standard td{
    width:15%;
    height:25px;
    text-align: center;
    vertical-align: middle;
    font-size:1em;
}
.standard a{
    color:#FFF;
    text-decoration:none;
}
.standard a:hover{
    font-weight:bold;
}
.standard td:hover{
    border:2px inset #fff;
}
.alternativi{
    width:60%;
    margin-left:20%;
    margin-right:20%;
}
.alternativi td{
    width:10%;
    height:25px;
    text-align: center;
    vertical-align: middle;
    font-size:1em;
}
.alternativi a{
    color:#FFF;
    text-decoration:none;
}
.alternativi a:hover{
    font-weight:bold;
}
.alternativi td:hover{
    border:2px inset #fff;
}
.grigi td{
    width:10%;
    height:25px;
    text-align: right;
    vertical-align: bottom;
    font-size:1em;
    cursor: pointer;
}
.grigi{
    width:80%;
    margin-left:10%;
    margin-right:10%;
}
.grigi td{
    width:5%;
    height:25px;
    text-align:right;
    vertical-align:bottom;
    font-size:0.6em;
    color:#FF0000;
    cursor: pointer;
}
.grigi td:hover{
    border:2px inset #fff;
}
.grigi a{
    color:#FF0000;
    text-decoration:none;
}

</style>
</head>
<body>
<div id="container">
    <div class="titoli">sono elencati/rappresentati i COLORI STANDARD, i COLORI ALTERNATIVI e la SCALA DEI GRIGI<br>cliccando su un colore si ottine una pagina con background del colore selezionato<br>e testo e casella degli altrti colori in modo da valutarne il contrasto</div>
    <div class="titoli">COLORI STANDARD<br>cliccare sul codice o sul colore o sul nome</div>   
    <table class="standard">
        <tr style="background-color:#FFF; color:#000; text-align:center; vertical-align:middle; ">
          <td style="border:inherit; ">codice</td>
          <td style="border:inherit; ">colore</td>
          <td style="border:inherit; ">nome</td>   
        </tr>
<?php
$standard=array('White'=>'FFFFFF','Black'=>'000000','Red'=>'FF0000','Blue'=>'0000FF','Green'=>'00FF00','Yellow'=>'FFFF00','Magenta'=>'FF00FF');
    foreach($standard as $nome => $codice){
        echo "<tr>";
        echo "<td><a href=\"contrasto.php?col=$codice\" alt=\"$codice\" title=\"$codice\">#$codice</a></td><td style=\"background-color: #$codice; cursor: pointer;\" onclick='javascript:window.location.href=\"contrasto.php?col=$codice\";'>&nbsp;</td><td><a href=\"contrasto.php?col=$codice\" alt=\"$nome\" title=\"$nome\">$nome</a></td>";
        echo "<tr>";
    }
?>   
    </table>
    <div class="titoli">COLORI ALTERNATIVI<br>cliccare sul colore o sul codice per vedere il contrasto<br>molto spesso è difficile vedere la differenza tra colori vicini</div>
    <table class="alternativi">
        <tr style="background-color:#FFF; color:#000; text-align:center; vertical-align:middle; ">
          <td style="border:inherit; ">codice</td>
          <td style="border:inherit; ">colore</td>
          <td style="border:inherit; ">codice</td>
          <td style="border:inherit; ">colore</td>
          <td style="border:inherit; ">codice</td>
          <td style="border:inherit; ">colore</td>
        </tr>
<?php
$col01=array("FF","CC","99","66","33","00");
$col02=array("FF","CC","99","66","33","00");
$col03=array("FF","CC","99","66","33","00");
for($k1=0;$k1<6;$k1++){
    for($k2=0;$k2<6;$k2++){
        for($k3=0;$k3<6;$k3++){
            $colore=$col01[$k1].$col02[$k2].$col03[$k3];
            if($k3==0 || $k3==3){echo "<tr>";}
            echo "<td><a href=\"contrasto.php?col=$colore\" alt=\"$colore\" title=\"colore\">#$colore</a></td>";
            echo "<td style=\"background-color:#$colore; cursor: pointer;\" alt=\"$colore\" title=\"$colore\" onclick='javascript:window.location.href=\"contrasto.php?col=$colore\";'>&nbsp;</td>";
            if($k3==2 || $k3==5){echo "</tr>";}
        }
    }
}
?>
    </table>
    <div class="titoli">SCALA DEI GRIGI<br>cliccare sul colore o sul codice per vedere il contrasto</div>
<?php
$c=array('F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1','0');
echo "<table class=\"grigi\">";
foreach($c as $v1){
    echo "<tr>";
    foreach($c as $v2){
        $p=$v1.$v2;
        $codice=str_repeat($p, 3);
        echo "<td style=\"background-color:#$codice; \" onclick='javascript:window.location.href=\"contrasto.php?col=$codice\";' title=\"$codice\" alt=\"$codice\"><a href=\"contrasto.php?col=$codice\" title=\"$codice\" alt=\"$codice\">#$codice</<A</td>";
    }
    echo "</tr>";
}
echo "</table>";
?>
</div>
</body>
</html>

la pagina contatto.php mostra tutte le combinazioni

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>valutazione contrasto</title>
<?php
$bck=trim("#".$_GET['col']);
?>
<style type="text/css">
body {
    background-color:<?php echo $bck; ?>;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
#container{
    display:block;
    background-color:<?php echo $bck; ?>;
    width:95%;
    height:100%;
    margin-left:2.5%;
    margin-right:2.5%;
    height:auto;
    font-size:1em;
}
#testata{
    display:block;
    float:left;
    width:100%;
    background-color:#000;
    color:#FFF;
    margin-bottom:2px;
}
#testata a{
    color:#FFF;
    text-decoration:none;
}
#testata a:hover{
    font-weight:bold;
}
#sx{
    display:block;
    float:left;
    width:32%;
    height:90%;
    max-height:480px;
    overflow-y:scroll;
    margin: auto;
    text-align:center;
}
#ce{
    display:block;
    float:left;
    width:32%;
    height:90%;
    max-height:480px;
    overflow-y:scroll;
    margin: 0 2% 0 2%;
    text-align:center;
}
#dx{
    display:block;
    float:left;
    width:32%;
    height:90%;
    max-height:480px;
    overflow-y:scroll;
    margin:auto;
    text-align:center;
}
table{
width:100%;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
  <div id="testata">
    <h2>CODICE COLORE BACKGROUD: <?php echo $bck;?></h2>
    <a href="codiciCOLORI.php">torna a scelta</a>
    <table>
  <tr>
    <td style="width:33%; text-align:center; ">contrasto con colori STANDARD</td>
    <td style="width:34%; text-align:center; ">contrasto con colori ALTERNATIVI</td>
    <td style="width:33%; text-align:center; ">contrasto con SCALA GRIGI</td>
  </tr>
</table>

    </div>
    <div id="sx">
    <table>
<?php
$standard=array('White'=>'FFFFFF','Black'=>'000000','Red'=>'FF0000','Blue'=>'0000FF','Green'=>'00FF00','Yellow'=>'FFFF00','Magenta'=>'FF00FF');
foreach($standard as $nome => $colore){
?>   
  <tr style="color:#<?php echo $colore;?> ; ">
    <td style="width:15%; "><?php echo $colore;?></td>
    <td style="width:24%; background-color:#<?php echo $colore;?> ;">&nbsp;</td>
    <td style="width:61%; text-align:left; ">testo di contrasto <b>AAaaZZzz09</b></td>
  </tr>
<?php
}
?>
    </table>
    </div>
    <div id="ce">
    <table>
<?php
$col01=array("FF","CC","99","66","33","00");
$col02=array("FF","CC","99","66","33","00");
$col03=array("FF","CC","99","66","33","00");
$conta=0;
for($k1=0;$k1<6;$k1++){
    //echo "<tr>";&nbsp;
    for($k2=0;$k2<6;$k2++){
        for($k3=0;$k3<6;$k3++){
            $colore=$col01[$k1].$col02[$k2].$col03[$k3];
?>   
    <tr style="color:#<?php echo $colore;?> ; ">
    <td style="width:15%; "><?php echo $colore;?></td>
    <td style="width:24%; background-color:#<?php echo $colore;?> ;">&nbsp;</td>
    <td style="width:61%; text-align:left; ">testo di contrasto <b>AAaaZZzz09</b></td>
    </tr>
<?php
        }
    }
}
?>
    </table>
    </div>
    <div id="sx">
    <table>
<?php
$c=array('F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1','0');
foreach($c as $v1){
    echo "<tr>";
    foreach($c as $v2){
        $p=$v1.$v2;
        $colore=str_repeat($p, 3);
?>
    <tr style="color:#<?php echo $colore;?> ; ">
    <td style="width:15%; "><?php echo $colore;?></td>
    <td style="width:24%; background-color:#<?php echo $colore;?> ;">&nbsp;</td>
    <td style="width:61%; text-align:left; ">testo di contrasto <b>AAaaZZzz09</b></td>
    </tr>   
<?php
    }
}
?>
    </table>
    </div>

</div>
</body>
</html>

è possibile scegliere tra i colori standar, i colori alternativi e la scala dei grigi

MarcoGrazia · 16 Mag 2017

Lo scrivo qua

Sì, non so dove inserire questa discussione, volevo metterla sotto uno script di Borgo relativo alla scelta dei colori per una pagina web, ma non mi sembrava giusto.
Quindi lo metto qua, se poi i mod vorranno spostarlo in una sede più opportuna ben venga

Dunque si diceva... il web accessibile, sono anni che seguo le vicende sia del sito Webaccessibile.org sia delle questioni allegate all'accessibilità sul web, e i colori sono una di quelle cose dibattute più a lungo, perché i problemi legati alla percezione degli stessi che le persone hanno, sono tanti quante sono le persone al mondo.
In pratica nessuno di noi percepisce lo stesso colore allo stesso modo, ma ci sono altre persone che hanno proprio una percezione diversa.
Per questo il W3C ha stabilito delle linee guida sull'uso dei colori ( e non solo ) nelle pagine web.
Ma non è tutto, per anni proprio webaccessibile.org in collaborazione anche con ipovedenti e persone cosiddette "daltoniche" hanno creato un software in grado di gestire facilmente il contrasto dei colori ( tra sfondo e testo ) in grado di facilitare la scelta dei colori di layout di una pagina o porzione di essa, anche in funzione dei problemi di vista degli utenti.
I software li trovate sia in versione Windows che Mac qui

spero di fare cosa gradita a chi ha esigenze di sviluppare siti web accessibili. ( come me )

Marco Grazia.

scelta dei colori di background e colori di contrasto

borgo italia

Super Moderatore

MarcoGrazia

Utente Attivo

Discussioni simili

scelta dei colori di background e colori di contrasto

borgo italia

Super Moderatore

MarcoGrazia

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency