Dotclear

Changeset 653:594954ba44b6


Ignore:
Timestamp:
07/26/11 07:13:02 (14 years ago)
Author:
Franck <carnet.franck.paul@…>
Branch:
themes
Message:

Affichage des niveau WCAG (AA ou AAA) des couleurs choisies

File:
1 edited

Legend:

Unmodified
Added
Removed

  • themes/ductile/_config.php

    r649 r653  
    8383} 
    8484 
    85 function computeContrastRatio($c,$b) 
     85function computeContrastRatio($color,$background) 
    8686{ 
    8787     // Compute contrast ratio between two colors 
    8888      
    89      $c = adjustColor($c); 
    90      if (($c == '') || (strlen($c) != 7)) return 0; 
    91      $b = adjustColor($b); 
    92      if (($b == '') || (strlen($b) != 7)) return 0; 
     89     $color = adjustColor($color); 
     90     if (($color == '') || (strlen($color) != 7)) return 0; 
     91     $background = adjustColor($background); 
     92     if (($background == '') || (strlen($background) != 7)) return 0; 
    9393      
    94      $l1 = (0.2126 * pow(hexdec(substr($c,1,2))/255,2.2)) + (0.7152 * pow(hexdec(substr($c,3,2))/255,2.2)) + (0.0722 * pow(hexdec(substr($c,5,2))/255,2.2)); 
    95      $l2 = (0.2126 * pow(hexdec(substr($b,1,2))/255,2.2)) + (0.7152 * pow(hexdec(substr($b,3,2))/255,2.2)) + (0.0722 * pow(hexdec(substr($b,5,2))/255,2.2)); 
     94     $l1 = (0.2126 * pow(hexdec(substr($color,1,2))/255,2.2)) + 
     95          (0.7152 * pow(hexdec(substr($color,3,2))/255,2.2)) + 
     96          (0.0722 * pow(hexdec(substr($color,5,2))/255,2.2)); 
     97 
     98     $l2 = (0.2126 * pow(hexdec(substr($background,1,2))/255,2.2)) + 
     99          (0.7152 * pow(hexdec(substr($background,3,2))/255,2.2)) + 
     100          (0.0722 * pow(hexdec(substr($background,5,2))/255,2.2)); 
    96101 
    97102     if ($l1 > $l2) { 
    98           $r = ($l1 + 0.05) / ($l2 + 0.05); 
     103          $ratio = ($l1 + 0.05) / ($l2 + 0.05); 
    99104     } else { 
    100           $r = ($l2 + 0.05) / ($l1 + 0.05); 
    101      } 
    102      return $r; 
    103 } 
    104  
    105 function contrastRatio($c,$b) { 
    106      if (($c != '') && ($b != '')) { 
    107           $r = computeContrastRatio($c,$b); 
    108           return '<span style="position:absolute;top:0;left:23em;">('.sprintf(__('contrast ratio = %.1f:1'),$r).')</span>'; 
     105          $ratio = ($l2 + 0.05) / ($l1 + 0.05); 
     106     } 
     107     return $ratio; 
     108} 
     109 
     110function contrastRatioLevel($ratio,$size,$bold) 
     111{ 
     112     if ($size == '') { 
     113          return ''; 
     114     } 
     115 
     116     // Eval font size in em (assume base font size in pixels equal to 16) 
     117     if (preg_match('/^([0-9.]+)\s*(%|pt|px|em|ex)?$/',$size,$m)) { 
     118          if (empty($m[2])) { 
     119               $m[2] = 'em'; 
     120          } 
     121     } else { 
     122          return ''; 
     123     } 
     124     switch ($m[2]) { 
     125          case '%': 
     126               $s = (float) $m[1] / 100; 
     127               break; 
     128          case 'pt': 
     129               $s = (float) $m[1] / 12; 
     130               break; 
     131          case 'px': 
     132               $s = (float) $m[1] / 16; 
     133               break; 
     134          case 'em': 
     135               $s = (float) $m[1]; 
     136               break; 
     137          case 'ex': 
     138               $s = (float) $m[1] / 2; 
     139               break; 
     140          default: 
     141               return ''; 
     142     } 
     143 
     144     $large = ((($s > 1.5) && ($bold == false)) || (($s > 1.2) && ($bold == true))); 
     145      
     146     // Check ratio 
     147     if ($ratio > 7) { 
     148          return 'AAA'; 
     149     } elseif (($ratio > 4.5) && $large) { 
     150          return 'AAA'; 
     151     } elseif ($ratio > 4.5) { 
     152          return 'AA'; 
     153     } elseif (($ratio > 3) && $large) { 
     154          return 'AA'; 
     155     } 
     156     return ''; 
     157} 
     158 
     159function contrastRatio($color,$background,$size='',$bold=false) 
     160{ 
     161     if (($color != '') && ($background != '')) { 
     162          $ratio = computeContrastRatio($color,$background); 
     163          $level = contrastRatioLevel($ratio,$size,$bold); 
     164          return  
     165               '<span style="position:absolute;top:0;left:23em;">('. 
     166               sprintf(__('contrast ratio = %.1f:1'),$ratio). 
     167               ($level != '' ? ' / '.sprintf(__('WCAG %s'),$level) : ''). 
     168               ')</span>'; 
    109169     } 
    110170     return ''; 
    … …  
    414474 
    415475'<p class="field picker"><label for="blog_title_c">'.__('Color:').'</label> '. 
    416 form::field('blog_title_c',7,7,$ductile_user['blog_title_c'],'colorpicker').contrastRatio($ductile_user['blog_title_c'],'#ffffff').'</p>'. 
     476form::field('blog_title_c',7,7,$ductile_user['blog_title_c'],'colorpicker'). 
     477contrastRatio($ductile_user['blog_title_c'],'#ffffff', 
     478     (!empty($ductile_user['blog_title_s']) ? $ductile_user['blog_title_s'] : '2em'), 
     479     $ductile_user['blog_title_w']). 
     480'</p>'. 
    417481'</fieldset>'; 
    418482 
    … …  
    428492 
    429493'<p class="field picker"><label for="post_title_c">'.__('Color:').'</label> '. 
    430 form::field('post_title_c',7,7,$ductile_user['post_title_c'],'colorpicker').contrastRatio($ductile_user['post_title_c'],'#ffffff').'</p>'. 
     494form::field('post_title_c',7,7,$ductile_user['post_title_c'],'colorpicker'). 
     495contrastRatio($ductile_user['post_title_c'],'#ffffff', 
     496     (!empty($ductile_user['post_title_s']) ? $ductile_user['post_title_s'] : '2.5em'), 
     497     $ductile_user['post_title_w']). 
     498'</p>'. 
    431499'</fieldset>'; 
    432500 
    … …  
    437505 
    438506'<p class="field picker"><label for="post_simple_title_c">'.__('Color:').'</label> '. 
    439 form::field('post_simple_title_c',7,7,$ductile_user['post_simple_title_c'],'colorpicker').contrastRatio($ductile_user['post_simple_title_c'],'#ffffff').'</p>'. 
     507form::field('post_simple_title_c',7,7,$ductile_user['post_simple_title_c'],'colorpicker'). 
     508contrastRatio($ductile_user['post_simple_title_c'],'#ffffff', 
     509     '1.1em',  // H5 minimum size 
     510     false). 
     511'</p>'. 
    440512'</fieldset>'; 
    441513 
    … …  
    445517 
    446518'<p class="field picker"><label for="post_link_v_c">'.__('Normal and visited links color:').'</label> '. 
    447 form::field('post_link_v_c',7,7,$ductile_user['post_link_v_c'],'colorpicker').contrastRatio($ductile_user['post_link_v_c'],'#ffffff').'</p>'. 
     519form::field('post_link_v_c',7,7,$ductile_user['post_link_v_c'],'colorpicker'). 
     520contrastRatio($ductile_user['post_link_v_c'],'#ffffff', 
     521     '1em', 
     522     $ductile_user['post_link_w']). 
     523'</p>'. 
    448524 
    449525'<p class="field picker"><label for="post_link_f_c">'.__('Active, hover and focus links color:').'</label> '. 
    450 form::field('post_link_f_c',7,7,$ductile_user['post_link_f_c'],'colorpicker').contrastRatio($ductile_user['post_link_f_c'],'#ebebee').'</p>'. 
     526form::field('post_link_f_c',7,7,$ductile_user['post_link_f_c'],'colorpicker'). 
     527contrastRatio($ductile_user['post_link_f_c'],'#ebebee', 
     528     '1em', 
     529     $ductile_user['post_link_w']). 
     530'</p>'. 
    451531'</fieldset>'; 
    452532 
    … …  
    464544 
    465545'<p class="field picker"><label for="blog_title_c_m">'.__('Color:').'</label> '. 
    466 form::field('blog_title_c_m',7,7,$ductile_user['blog_title_c_m'],'colorpicker').contrastRatio($ductile_user['blog_title_c_m'],'#d7d7dc').'</p>'. 
     546form::field('blog_title_c_m',7,7,$ductile_user['blog_title_c_m'],'colorpicker'). 
     547contrastRatio($ductile_user['blog_title_c_m'],'#d7d7dc', 
     548     (!empty($ductile_user['blog_title_s_m']) ? $ductile_user['blog_title_s_m'] : '1.8em'), 
     549     $ductile_user['blog_title_w_m']). 
     550'</p>'. 
    467551'</fieldset>'; 
    468552 
    … …  
    478562 
    479563'<p class="field picker"><label for="post_title_c_m">'.__('Color:').'</label> '. 
    480 form::field('post_title_c_m',7,7,$ductile_user['post_title_c_m'],'colorpicker').contrastRatio($ductile_user['post_title_c_m'],'#ffffff').'</p>'. 
     564form::field('post_title_c_m',7,7,$ductile_user['post_title_c_m'],'colorpicker'). 
     565contrastRatio($ductile_user['post_title_c_m'],'#ffffff', 
     566     (!empty($ductile_user['post_title_s_m']) ? $ductile_user['post_title_s_m'] : '1.5em'), 
     567     $ductile_user['post_title_w_m']). 
     568'</p>'. 
    481569'</fieldset>'; 
    482570 
Note: See TracChangeset for help on using the changeset viewer.

Sites map