scelta dei colori di background e colori di contrasto

Discussione in 'Snippet PHP' iniziata da borgo italia, 5 Settembre 2016.

  1. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    15.354
    Mi Piace Ricevuti:
    100
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    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==|| $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==|| $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($p3);
            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($p3);
    ?>
        <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
     
  2. MarcoGrazia

    MarcoGrazia Utente Attivo

    Registrato:
    15 Dicembre 2009
    Messaggi:
    624
    Mi Piace Ricevuti:
    6
    Punteggio:
    18
    Sesso:
    Maschio
    Occupazione:
    Sviluppare web design (Studiare)
    Località:
    Udine
    Home Page:
    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.
     
    A borgo italia piace questo elemento.
Sto caricando...

Condividi questa Pagina