Grille d’analyse des contrastes d’une charte

8 commentaires

Publié le 7 août 2015 par Sébastien Delorme

En cette belle journée d’été, nous sommes très heureux de partager avec vous la toute première version de notre grille d’analyse des contrastes d’une charte.

Ce document est simple, il s’agit d’un tableur (Excel) et de quelques macros qui permettent de calculer automatiquement les contrastes des couleurs d’une charte graphique.

Présentation de la grille

Saisir la liste des couleurs de la charte

Son fonctionnement est très simple, il vous suffit de renseigner l’ensemble des couleurs de votre charte, ou de celle de votre client, dans l’onglet « Démarrage ».

Sur cette première version, seule la saisie des codes RGB (Red, Green, Blue) est possible, mais nous publierons très prochainement une version permettant la saisie directe des codes hexadécimaux.

Visionner les combinaisons possibles et les ratios de contrastes correspondants

Lorsque toutes les couleurs sont renseignées, l’onglet « Matrice des couleurs » permet d’afficher toutes les combinaisons possibles avec ces couleurs.

Aperçu de l’onglet « Matrice des couleurs ».

Pour chaque combinaison, le ratio de contraste est indiqué. C’est ce ratio de contraste qui permet de vérifier si le contraste suffisant entre les contenus et l’arrière-plan.

Visionner les combinaisons possibles pour le respect du niveau AA (WCAG 2.0 ou RGAA 3)

Enfin, les onglets « Grands textes (AA) » et « Petits textes (AA) » permettent de visionner les combinaisons de couleurs valides pour les grands textes et les petits textes au niveau AA des WCAG ou du RGAA 3.

Grands textes

Le ratio de contraste pour les grands textes doit être supérieur ou égal à 3.

Un grand texte est :

  • Un texte non gras supérieur ou égal à 18pt.
  • Un texte en gras supérieur ou égal à 14pt.

Aperçu des combinaisons de couleurs valides au niveau AA pour du grand texte.

Petits textes

Le ratio de contraste pour les petits textes doit être supérieur ou égal à 4,5.

Un petit texte est :

  • Un texte non gras inférieur à 18pt.
  • Un texte en gras inférieur à 14pt.

Aperçu des combinaisons de couleurs valides au niveau AA pour du petit texte.

Licence d’utilisation

Cette grille est sous licence Creative Commons BY-SA 3.0 FR.

N’hésitez pas à l’utiliser, la partager, l’adapter, etc. Tout en conservant la même licence d’utilisation et en citant l’auteur initial.

Des commentaires ou suggestions d’amélioration ?

Si vous utilisez cette grille, n’hésitez pas à nous transmettre vos commentaires et suggestions à travers les commentaires de ce billet.

Vos commentaires

  • Par levy, le 7 août 2015 à 17h13.

    Bonjour,

    bravo pour ce petit outil bien utile, une petite remarque attention pour la définition de ce qu’est un grand texte ce n’est pas aussi simple et c’est ce qui met dans le mur 100% des outils de test automatique des contrastes actuellement

    C’est 14 et 18 si la taille du texte par défaut est environ à 12pt ce qui n’est pas forcement le cas mais que wcag a considérer comme étant la base la plus courante.
    Il faut donc en réalité tenir compte de ce que l’auteur à définit comme taille par défaut pour son corps de texte.

    Exemple si il a choisi une taille à 16pt, le grand texte sera au dessus de 19pt gras et 24pt non gras.

    C’est pour cela qu’il est préférable de dire :

    Un grand texte est :
    – Un texte non gras supérieur ou égal à 1,5 x la taille du texte par défaut.
    – Un texte en gras supérieur ou égal à 1,2 x la taille du texte par défaut.

    Répondre

    • Par Sébastien Delorme, le 14 septembre 2015 à 11h23.

      Bonjour Aurélien,

      Nous ne sommes pas tout à fait d’accord avec cette interprétation.
      Je vais éclaircir notre choix en plusieurs points.

      1. C’est un choix délibéré pour rendre plus compréhensible la notion de petit texte et grand texte pour des graphistes.

      L’objectif de cette grille est d’aider le plus tôt possible à la prise en compte des contrastes.

      Parler de texte supérieur ou égal à 1,5 fois la taille de texte par défaut est inadapté pour un graphiste. La relativité d’une taille de texte étant un sujet orienté intégration HTML/CSS.

      2. WCAG précise clairement qu’un petit texte est inférieur 18 points non gras, ou 14 points gras.

      How to meet WCAG 2.0 Contrast (Minimum)

      Situation A: text is less than 18 point if not bold and less than 14 point if bold

      Situation B: text is at least 18 point if not bold and at least 14 point if bold

      G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text

      The objective of this technique is to make sure that users can read text that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.5, this technique relaxes the 7:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).

      Et un dernier lien pour la route : large scale (text)

      large scale (text): with at least 18 point or 14 point bold

      C’est très clair dans la spécification.

      3. WCAG mentionne 1,5 ou 1,2 fois la taille de texte par défaut dans le cas d’intégration en polices en unités relatives (car il ne faut justement pas utiliser le point comme unité pour les polices en CSS)

      Si on code une taille de texte en point, 14 points restent 14 points, quelle que soit la taille par défaut du corps de texte.
      Certes, on n’utilisera pas le point (ni le pixel) en intégration, mais un point reste un point.

      Le doute s’installe quand on commence à parler d’unités relatives dans WCAG.
      Et là, je n’ai pas la même interprétation que toi, mais peut-être me trompe-je ?

      The actual size of the character that a user sees is dependent both on the author-defined size and the user’s display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.

      Comme il n’est pas possible d’utiliser directement l’unité point dans les CSS, il est précisé comment arriver à retrouver une taille réelle de 14 ou 18 points.
      Les WCAG précisent donc que 14 points est environ équivalent à 1.2em ou 120% dans le cas d’une taille de texte par défaut à 100%.

      Si effectivement la taille par défaut est modifiée par le site (author), alors la taille en point devra être obtenue auprès de l’agent utilisateur (le navigateur) : The point size should be obtained from the user agent.

      Répondre

      • Par levy, le 21 septembre 2015 à 19h55.

        Sur le 1 je suis tout à fait d’accord sur le fait que ce soit plus simple. Par contre je ne suis pas d’accord sur le fait que ce soit suffisant car si il n’y a pas « d’entente » préalable entre le designer et l’intégrateur sur la taille du texte par défaut ce que le designer va considérer comme grand texte ne le sera en fait peut être pas pour l’intégrateur ou l’évaluateur.

        sur le 2 oui si tu considère effectivement que l’auteur utilise des font size en point ce qu’il par ailleurs ne devrait pas faire

        sur le 3 je suppose que c’est effectivement là que notre point de vue diverge. Cela dit si j’en crois http://disic.github.io/rgaa_methodologie/#couleurs pour critère 3.3 et 3.4 le RGAA a la même interprétation que moi.

        C’ est également un point sur lequel j’avais longuement échangé directement avec Gregg Vanderheiden (un des éditeur de la spec lors de la création des wcag 2.0) suite à mes retours : https://lists.w3.org/Archives/Public/public-comments-wcag20/2008Mar/0088.html à l’occasion j’essayerai de les retrouver

      • Par levy, le 21 septembre 2015 à 21h07.

        petit complément :
        voilà les deux retours dont le mien qui avait entrainé l’ajout de la note 4 :
        http://trace.wisc.edu/bugzilla_wcag/issuereports/issue_ind.php?id=2381
        http://trace.wisc.edu/bugzilla_wcag/issuereports/issue_ind.php?id=2430

        qui indique que pour savoir ce qui est un grand texte il faut te reporter à la taille défini pour ton texte par rapport à ton h1. « Relative scaling can be calculated from the default sizes in a similar fashion ».

  • Par Gaël Poupard, le 11 août 2015 à 11h43.

    Cet outil est gé-nial !

    C’est vraiment brillant et simple d’utilisation, bravo !

    Petite coquille sur la définition des « Petits textes », la phrase contient « grands textes » :)

    Répondre

    • Par Sébastien Delorme, le 11 août 2015 à 12h38.

      Merci Gaël pour ce retour qui fait très plaisir !
      La coquille est corrigée.

      Répondre

  • Par Florian Sanders, le 15 septembre 2015 à 11h38.

    Je viens seulement de découvrir l’outil, vraiment top !

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page