/* =========================================================================== Corrections de contraste - chargee APRES le theme et apres monokai. POURQUOI UN FICHIER A PART. theme-1.css est un build Bootstrap minifie sur une seule ligne, et monokai-sublime.css vient de highlight.js : ce sont des fichiers de bibliotheque. Les retoucher, c'est perdre la correction a la premiere regeneration, sans que rien ne previenne. Tout ce qui suit est donc une surcharge, posee en dernier dans la cascade. LA REGLE VISEE est WCAG AA : 4,5:1 pour le texte courant, 3:1 seulement pour le grand texte (>= 24px, ou >= 18,7px en gras). Les bandeaux verts du haut de page echappent au constat a ce titre ; les trois boutons de pied de page, eux, sont en 16px gras - donc du texte courant, donc 4,5:1. CHAQUE VALEUR CI-DESSOUS A ETE MESUREE, pas estimee, et porte sa marge : on vise 4,75 et non 4,50, parce qu'un outil qui arrondit autrement ferait repasser au rouge une valeur posee pile sur le seuil. La teinte et la saturation d'origine sont conservees dans tous les cas : seule la clarte bouge. Les couleurs restent celles du theme, en lisible. =========================================================================== */ /* --- Ligne de date : gris 8f8f8f sur blanc, 3,23 --------------------------- */ .date, #Date_Last_Modified, .meta, .meta span a, .blog-post .image-caption, .blog-post .image-caption a { color: #727272; /* 4,81 sur blanc */ } /* --- Code en ligne dans le texte courant ---------------------------------- Le rose Bootstrap d63384 donne 4,50 sur blanc - exactement le seuil - et descend a 3,86 des que le mot tombe dans un encadre colore. On ne cale pas la valeur sur le blanc : un se promene dans toutes les alertes du billet, et le rose doit tenir sur la plus sombre d'entre elles. Les six fonds possibles ont ete mesures ; le plus exigeant est .alert-danger (f8d7da). Une seule couleur, valable partout : blanc 6,37 light 6,22 warning 5,75 info 5,46 success 4,91 danger 4,77 Une couleur par type d'encadre aurait tenu aussi, et aurait fini par diverger le jour ou le theme change une seule des six. */ code { color: #b0236a; } /* --- Coloration syntaxique : les deux jetons Monokai sous le seuil --------- Les six autres couleurs de la palette passent deja (de 5,50 a 14,66) et ne sont pas touchees. */ .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #fa4a89; /* etait f92672, 4,13 -> 4,77 */ } .hljs-comment, .hljs-deletion, .hljs-meta { color: #938e79; /* etait 75715e, 3,19 -> 4,75 */ } /* --- Boutons de pied de billet : Precedent / Accueil / Suivant ------------- Blanc sur le vert de marque 5fcb71 = 2,05. En 16px gras, ces liens sont du texte courant au sens WCAG - la tolerance a 3:1 du grand texte commence a 18,7px en gras - donc le seuil est bien 4,5. On change l'ENCRE et non le fond : le vert reste exactement celui du bandeau de titre et des liens. C'est la couleur qu'on reconnait de loin, pas le blanc du libelle. Assombrir le vert aurait donne deux verts differents sur la meme page. */ .nav-link-prev, .nav-link-next, .blog-nav .nav-link { color: #212529; /* 7,54 sur le vert */ } .nav-link-prev:hover, .nav-link-next:hover, .blog-nav .nav-link:hover, .nav-link-prev:focus, .nav-link-next:focus, .blog-nav .nav-link:focus { color: #000; } /* Les fleches sont dessinees par Font Awesome dans le meme lien : elles heritent de color, mais le theme les peint separement. */ .blog-nav .arrow-prev, .blog-nav .arrow-next { color: inherit; } /* --- Le vert de marque comme couleur de lien ------------------------------ Le theme pose "a { color:#5FCB71 }" en dur - pas seulement la variable --bs-link-color - donc c'est bien la regle "a" qu'il faut surcharger, et non la variable, qui serait ignoree ici. #5FCB71 sur blanc donne 2,05. C'est la non-conformite la plus repandue du blog : l'index a lui seul porte 63 liens dans ce vert (les "Lire" et les numeros de billet). Le billet 57, sur lequel l'audit a tourne, n'en contient aucun - d'ou un constat absent du rapport. On baisse la clarte en gardant la teinte (130 deg) et la saturation : le lien reste vert, et visiblement le meme vert. MEME PRECAUTION QUE POUR LE CODE EN LIGNE : la valeur n'est pas calee sur le blanc mais sur le plus sombre des fonds ou un lien peut tomber. Cale sur le blanc, elle donnait 4,76 la et retombait a 3,57 dans un encadre .alert-danger - une correction qui ne corrige que la ou on l'a regardee. blanc 6,35 light 6,20 theme-bg-light 5,83 warning 5,73 info 5,45 success 4,90 danger 4,76 */ :root { --bs-link-color: #246d30; --bs-link-hover-color: #1b5325; } a { color: #246d30; } a:hover, a:focus { color: #1b5325; } /* --- ...sauf la ou le fond n'est pas blanc -------------------------------- La regle "a" ci-dessus est volontairement peu specifique, mais elle atteindrait quand meme les liens poses sur les aplats colores, ou un vert fonce serait illisible. On y reaffirme l'encre, mesuree sur place. Les boutons (.btn) n'ont pas besoin d'etre cites : leur couleur vient d'une regle de classe, plus specifique que "a". */ .footer a { color: #fff; /* 13,24 sur le bleu nuit 223142 du pied de page */ } /* --- Bandeau / colonne de titre, fond vert de marque ---------------------- Le titre est en blanc 24px gras : 2,05, alors que le seuil du grand texte - le plus indulgent de la norme - est deja de 3. Aucun outil ne l'avait releve ; la mesure, elle, ne laisse pas de doute. Meme geste que pour les boutons de pied de billet : le vert ne bouge pas, c'est l'encre qui change. Le bandeau reste reconnaissable de loin. SUR LA SPECIFICITE. Les selecteurs ci-dessous reprennent EXACTEMENT ceux du theme (.header .blog-name a, .header .nav-item .nav-link...). Une version plus courte comme ".header a" serait battue par le theme sur les liens de navigation - et, pire, gagnerait contre ".btn-primary", qui n'a qu'une classe : le bouton "Get in Touch" passerait en encre foncee sur son fond sombre, soit 1,36. Une surcharge trop large casse ailleurs ce qu'elle repare ici. */ .header { color: #212529; /* 7,54 sur le vert */ } .header .blog-name, .header .blog-name a { color: #212529; } .header .nav-item .nav-link { color: #1a1d20; /* etait blanc a 80% d'opacite : 1,78 une fois fondu */ } .header .nav-item .nav-link.active { color: #000; font-weight: 700; /* l'etat courant se lisait par la couleur seule ; la graisse le dit maintenant aussi */ } .header .nav-item .nav-link:hover, .header .nav-item .nav-link:focus { color: #000; } /* --- Bouton "Get in Touch" de l'en-tete ------------------------------------ Son fond n'est pas une couleur mais un VOILE : rgba(0,0,0,0.3) pose sur le vert. Mesure naivement il parait tres contraste ; une fois le voile fondu avec le vert qu'il recouvre, le fond reel est #428E4F et le texte blanc n'y vaut que 4,03. C'est le piege de ce genre d'audit : un fond semi-transparent se mesure sur ce qu'il laisse passer, pas sur ce qu'il declare. Ni le blanc (4,03) ni l'encre foncee (3,83) ne passent sur ce fond-la : c'est le voile qu'il faut epaissir. A 0,45 le fond devient #34703E et le blanc y vaut 5,94, sans changer la teinte ni la nature de l'effet. */ .header .btn-primary { color: #fff; background: rgba(0, 0, 0, 0.45); } .header .btn-primary:hover, .header .btn-primary:focus { color: #fff; background: rgba(0, 0, 0, 0.55); } .profile-section .bio a { color: #16281a; /* blanc souligne sur le vert : 2,05 */ } /* --- Boutons pleins .btn-primary ------------------------------------------- Leur fond EST le vert de marque. Bootstrap l'avait vu et posait d'office --bs-btn-color:#000 pour cette teinte ; le theme ajoute ensuite une regle ".btn-primary { color:#fff }" qui annule ce calcul et ramene le bouton a 2,05. On revient a l'encre foncee - c'est-a-dire a ce que Bootstrap avait deduit tout seul de la couleur choisie. Le bouton de l'en-tete n'est pas concerne : son fond n'est pas le vert mais un voile sombre, et il est traite plus haut avec sa propre regle, plus specifique. */ .btn-primary { color: #212529; /* 7,54 sur le vert */ } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #000; }