app.contrast-finder.org Open in urlscan Pro
51.68.82.203  Public Scan

Form analysis
1 forms found in the DOM

Name: formulaire — GET result.html

<form id="colorModel" name="formulaire" class="form-horizontal" action="result.html" method="GET">
  <div class="form-group "> <label for="foreground-input" class="col-lg-3 control-label">Couleur du texte</label>
    <div class="col-lg-4"> <input id="foreground-input" name="foreground" aria-describedby="foreground-sample-invalid help-block-colors" type="text" class="form-control form-color-input" required="required" value="rgb(70,136,71)"> </div>
    <div id="foreground-sample" class="col-lg-2 color-sample sample-bordered" style="background-color:rgb(70,136,71);">
      <div id="foreground_ColorPicker" class="colorPickerContainer"> <input id="foreground_imputColorPicker" tabindex="-1" type="color" aria-label="Couleur du texte" value="#468847"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
          viewBox="0 0 24 30" width="18">
          <path fill="rgb(0, 0, 0)"
            d="M1 20.303c0 1.467 1.125 2.667 2.5 2.667S6 21.77 6 20.303c0-1.467-2.5-5.333-2.5-5.333S1 18.836 1 20.303zm20.085-10.54l-5.877-5.878c-.392-.392-.86-.658-1.36-.798l.92-.92c.316-.315.315-.82.003-1.133-.31-.314-.82-.31-1.13.003L9.825 4.85c-.014.015-.028.03-.04.046l-4.87 4.866c-1.22 1.22-1.22 3.197 0 4.416l5.878 5.877c1.22 1.22 3.2 1.22 4.42 0l5.876-5.877c1.22-1.22 1.22-3.197 0-4.416zM5.6 12c0-.39.15-.78.447-1.077l5.876-5.876c.596-.596 1.558-.596 2.154 0l5.876 5.876c.298.298.447.687.447 1.077H5.6z">
          </path>
        </svg> </div> <span id="foreground-sample-invalid" style="display:none;" class="invalid-color">Couleur invalide</span>
    </div>
  </div>
  <div class="form-group "> <label for="background-input" class="col-lg-3 control-label">Couleur du fond</label>
    <div class="col-lg-4"> <input id="background-input" name="background" aria-describedby="background-sample-invalid help-block-colors" type="text" class="form-control form-color-input" required="required" value="#DFF0D8"> <span
        id="help-block-colors" class="help-block">Couleur au format hexadécimal, RGB ou par mot clé. <br> Exemple : <code>#FFFFFF</code>, <code>rgb(255,255,255)</code> ou <code>white</code></span> </div>
    <div id="background-sample" class="col-lg-2 color-sample sample-bordered" style="background-color:#DFF0D8;">
      <div id="background_ColorPicker" class="colorPickerContainer"> <input id="background_imputColorPicker" tabindex="-1" aria-label="Couleur du fond" type="color" value="#DFF0D8"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
          viewBox="0 0 24 30" width="18">
          <path fill="rgb(0, 0, 0)"
            d="M1 20.303c0 1.467 1.125 2.667 2.5 2.667S6 21.77 6 20.303c0-1.467-2.5-5.333-2.5-5.333S1 18.836 1 20.303zm20.085-10.54l-5.877-5.878c-.392-.392-.86-.658-1.36-.798l.92-.92c.316-.315.315-.82.003-1.133-.31-.314-.82-.31-1.13.003L9.825 4.85c-.014.015-.028.03-.04.046l-4.87 4.866c-1.22 1.22-1.22 3.197 0 4.416l5.878 5.877c1.22 1.22 3.2 1.22 4.42 0l5.876-5.877c1.22-1.22 1.22-3.197 0-4.416zM5.6 12c0-.39.15-.78.447-1.077l5.876-5.876c.596-.596 1.558-.596 2.154 0l5.876 5.876c.298.298.447.687.447 1.077H5.6z">
          </path>
        </svg> </div> <span id="background-sample-invalid" style="display:none;" class="invalid-color">Couleur invalide</span>
    </div>
  </div>
  <div class="form-group "> <label for="ratio" class="col-lg-3 control-label">Ratio minimum</label>
    <div class="col-lg-4"> <select id="ratio" name="ratio" class="form-control">
        <option value="3">3</option>
        <option value="4.5" selected="selected">4.5</option>
        <option value="7">7</option>
      </select> </div>
    <div class="col-lg-1 hidden" id="currentRatio" aria-live="off">
      <div id="isValidRatio"> <img id="isValidRatio_Passed" src="public/0.10.1/images/ico-passed-m.png" alt="Le contraste de vos couleurs est suffisant." class="hidden"> <img id="isValidRatio_Failed" src="public/0.10.1/images/ico-failed-m.png"
          alt="Le contraste de vos couleurs est insuffisant." class=""> </div>
      <div id="currentRatioTxt"> <span class="sr-only">Ratio actuel :</span> <output form="colorModel" for="ratio background-input foreground-input" name="currentRatioData" id="currentRatioData"></output> </div>
    </div>
  </div>
  <div class="form-group"> <label for="isBackgroundTested" class="col-lg-3 control-label">Couleur à modifier</label>
    <div class="col-lg-4"> <select id="isBackgroundTested" name="isBackgroundTested" class="form-control">
        <option value="false" selected="selected">Modifier la couleur du texte</option>
        <option value="true">Modifier la couleur du fond</option>
      </select> </div>
  </div>
  <div class="form-group "> <label for="algo" class="col-lg-3 control-label">Propose-moi</label>
    <div class="col-lg-4"> <select id="algo" name="algo" class="form-control">
        <option value="Rgb" selected="selected">des couleurs valides et proches de la couleur initiale</option>
        <option value="HSV">une palette de couleurs valides</option>
      </select> </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-3 col-lg-4"> <input id="submit-button" type="submit" class="btn btn-default btn-lg btn-outline-success" value="Trouver des couleurs valides"> </div>
  </div> <input type="hidden" name="lang" value="fr">
</form>

Text Content

 * english
 * español
 * français
 * polski
 * português
 * occitan
 * 한국어




CONTRAST FINDER

Contrast-Finder trouve les bons contrastes de couleurs pour l’accessibilité web

Le critère de succès 1.4.3 du WCAG impose pour le texte un rapport de contraste
minimum de 4.5 (et de 3 pour le texte agrandi).

Couleur du texte


Couleur invalide
Couleur du fond
Couleur au format hexadécimal, RGB ou par mot clé.
Exemple : #FFFFFF, rgb(255,255,255) ou white

Couleur invalide
Ratio minimum
3 4.5 7
Ratio actuel :
Couleur à modifier
Modifier la couleur du texte Modifier la couleur du fond
Propose-moi
des couleurs valides et proches de la couleur initiale une palette de couleurs
valides



CONTRAST FINDER, C’EST QUOI ?

Contrast-Finder est un outil qui calcule le contraste entre deux couleurs
(arrière-plan et premier plan) et qui vérifie si il est suffisant. Si ce
contraste n’est pas valide, l’outil suggère plusieurs propositions de couleurs
alternatives ayant un contraste correct.

Contrast-Finder est conçu pour être utilisé par les webdesigners, les
développeurs web ou les professionnels de l’accessibilité web afin d’améliorer
la lisibilité des pages HTML et des sites web.


AIDE / COMMENT UTILISER CET OUTIL ?

L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.

 * Couleur du texte
 * Couleur du fond
 * Ratio minimum
 * Couleur à modifier
 * Propose-moi


PREMIER PLAN : COULEUR DU TEXTE

C’est la couleur du texte. Vous pouvez remplir ce champ avec un nom de couleur
CSS, une valeur hexadécimale, ou une valeur RGB. La valeur saisie est alors
prévisualisée à droite du champ.

COULEUR PAR MOTS-CLÉS

Exemple : Black, Silver, YellowGreen, MediumPurple.
Les valeurs autorisées sont les noms des couleurs utilisables en CSS (du niveau
CSS 1 au niveau CSS 4).

COULEUR EN HEXADÉCIMAL

Exemple : #AABBCC. Notez que #ABC fonctionne également, nous complétons
automatiquement le champ avec #AABBCC. Vous pouvez également utiliser ce champ
sans le caractère #, ainsi FFF ou FFFFFF fonctionnent parfaitement.

COULEUR EN RGB

Exemple : rgb(255,255,255).
De la même manière, 255,255,255 fonctionne également, nous remplaçons la valeur
de ce champ par rgb(255,255,255).


ARRIÈRE-PLAN : COULEUR DU FOND

C’est la couleur d’arrière-plan.
Ce champ fonctionne comme le champ couleur du texte.


RATIO MINIMUM

Trois valeurs possibles : 3, 4.5 et 7.

Comment choisir un ratio ? Cela dépend des éléments suivants :

 * Niveau d’accessibilité souhaité : AA ou AAA.
 * Le texte est-il en gras ?
 * Taille du texte.

NIVEAU AA

Deux éléments (la taille et la graisse du texte) donnent 4 combinaisons :

 * Texte non gras + taille du texte < 24px : ratio = 4.5
 * Texte non gras + taille du texte > 24px : ratio = 3
 * Texte en gras + taille du texte < 19px : ratio = 4.5
 * Texte en gras + taille du texte > 19px : ratio = 3

NIVEAU AAA

Pour le niveau AAA, la logique est la même avec une augmentation de la valeur
des ratios :

 * Le ratio 4.5 devient 7
 * Le ratio 3 devient 4.5

INTERPRÉTATION DE LA TAILLE DES TEXTES

 * Le critère 19px peut être compris comme équivalent à 14pt ou 120% ou 1.2em.
 * Le critère 24px peut être compris comme équivalent à 18pt ou 150% ou 1.5em.

Pour une compréhension complète et exhaustive de l’interprétation de la taille
des textes, le lecteur est renvoyé à la définition de texte agrandi du WCAG.

INFORMATIONS COMPLÉMENTAIRES SUR LE CONTRASTE POUR L’ACCESSIBILITÉ

En complément, toutes les informations détaillées (en français et en anglais)
sur le rapport de contraste entre le texte et son arrière-plan :

 * en français
   * RGAA 3.2016 - Critère 3.3 (Niveau AA)
   * RGAA 3.2016 - Critère 3.4 (Niveau AAA)
   * RGAA 3.2016 Glossaire - Contraste
 * en anglais
   * WCAG 2.0 Glossary - Contrast Ratio
   * WCAG 2.0 - Contrast (Minimum): success criteria 1.4.3 (Level AA)
   * WCAG 2.0 - Contrast (Minimum): understanding success criteria 1.4.3
   * WCAG 2.0 - Contrast (Enhanced): success criteria 1.4.6 (Level AAA)
   * WCAG 2.0 - Contrast (Enhanced): understanding success criteria 1.4.6
   * WCAG 2.0 - MathML version of the relative luminance definition
   * WCAG 2.0 - Defintion of large-scale text


COULEUR À MODIFIER

Il s’agit de la couleur du texte ou de la couleur du fond. Par défaut, c’est la
couleur du texte.

La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une
couleur valide. L’autre couleur ne changera pas.


PROPOSE-MOI / LES ALGORITHMES

“COULEURS VALIDES ET TRÈS PROCHES DE LA COULEUR INITIALE”

Ceci est l’algorithme par défaut. Il propose des couleurs extrêmement proches de
la couleur initiale. (La proximité est calculée sur des critères mathématiques,
qui peuvent être différents d’une vision graphique.)

L’algorithme dans certains cas ne renvoi aucun résultat ; dans ce cas,
choisissez l’autre algorithme. :)

“PALETTE DE COULEURS VALIDES”

Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. En
revanche, les couleurs proposées peuvent être plus éloignées, voire franchement
distincte de la couleur initiale.


UNE QUESTION ?

Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous
:

 * Forum Asqatasun
 * Twitter @Contrast_Finder
 * Contrast-Finder sur Github


CONTRIBUER À CONTRAST-FINDER

Toutes les contributions sont chaleureusement accueillies ! Traduction,
correction, rapport de bug, nouvelle fonctionnalité… N’hésitez pas à jouer avec
le code source ou à en discuter sur le forum.

Tu kiffes Contrast-Finder ?
Essaye Asqatasun, le logiciel libre de mesure de l’accessibilité

Propulsé par Contrast Finder v0.10.1, disponible sous licence GNU AGPL v3

© 2013-2024 - À propos - @Contrast_Finder - Contrast-Finder.org