scelta dei colori di background e colori di contrasto

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Lo scrivo qua :D

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.
 
  • Like
Reactions: borgo italia
Discussioni simili
Autore Titolo Forum Risposte Data
giorgione_tg Celle alterne con scelta dei colori Snippet PHP 0
G Scelta dei Breakpoint HTML e CSS 1
S Gestire scelta dropdown con dati da Mysql PHP 2
C scelta operazione di calcolo in c++ C/C++ 7
S Scelta software/cms per creazione sito Webdesign e Grafica 6
E Sito con procedure guidate per la scelta prodotti CMS (Content Management System) 0
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
delfinogrisu scelta dvr se esiste...... IP Cam e Videosorveglianza 0
A [PHP] Cancellare riga database a scelta dell'utente PHP 2
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
I Scelta rete per 500 connessioni wifi solo LAN Reti LAN e Wireless 0
bubino8 [HTML] <input type="file"> Testo a scelta HTML e CSS 3
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
L Scelta form con jquery jQuery 1
A Scelta telecamere di sorveglianza IP Cam e Videosorveglianza 0
E scelta cavi telecamere IP Cam e Videosorveglianza 3
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
G Scelta DVR e Telecamere videosorveglianza IP Cam e Videosorveglianza 2
S [PHP] Abilitare un pulsante dopo scelta file... PHP 3
B [MySQL] campo di scelta MySQL 6
giancadeejay [PHP] INSERT into tabella tramite scelta checkbox PHP 0
K Server per sito di annunci: aiuto nella scelta Hosting 4
asevenx [Javascript] Estrazione dal database di un valore in base ad una scelta Javascript 7
A Scelta dvr IP Cam e Videosorveglianza 1
napuleone Leggere la scelta radio Javascript 0
M Aruba Cloud VPS: Guida alla scelta delle taglie Server Dedicati e VPS 6
A eseguire funzione dopo scelta dal form PHP 4
P [VENDO] Invii DEM internazionali o nazionali, con scelta 3 target Vendere e Acquistare pubblicita' online 0
P [VENDO] Invii DEM internazionali o stranieri, con scelta 3 target Email Marketing 0
B Scelta impianto videosorveglianza IP Cam e Videosorveglianza 30
L scelta webserver Apache 1
felino [Wordpress][Theme][Popart] Consiglio sulla scelta del Theme WordPress 14
G Aiuto scelta hosting Discussioni Varie 24
W Sviluppo APP da zero scelta hosting e DB Sviluppo app per Android 1
G Scelta template per iniziativa editoriale WordPress 5
filomeni Scelta del Powerline Reti LAN e Wireless 9
C Aiuto scelta CMS CMS (Content Management System) 1
novello88 Scelta di una manuale sulla programmazione Java Java 2
F Creazione 2° select in base alla scelta effettuata sulla 1° select Javascript 2
F Creazione 2° select in base alla scelta effettuata sulla 1° select PHP 1
voldemort Scelta Router Professionale per una grande struttura alberghiera Reti LAN e Wireless 5
H Menù a discesa contenente dati db, la scelta dal menù deve essere inviata in un altro db. PHP 1
G Scelta device fisico di supporto sviluppo app per Android Sviluppo app per Android 2
R Caratteristiche e scelta Hosting Hosting 8
G Tabella con campo a scelta multipla (dropbox) MS Access 1
R Scelta CMS Per Sito "non blog Style" CMS (Content Management System) 3
T Scelta servizio hosting per un principiante Hosting 2
C Aiuto scelta soluzioni hosting(VPS) o cloud computing(cloud storage) per app iOS Cloud Computing e Cloud Server 3
T [risolto] Realizzare un form email con multi scelta Sviluppo app per Android 2

Discussioni simili