Palettes de couleurs à fort contraste, ratios vérifiés

Palettes de couleurs à fort contraste

Palettes de couleurs à fort contraste avec ratios WCAG | We.Inc

Cinq palettes de couleurs originales à fort contraste, chaque paire texte et bouton vérifiée selon WCAG 2.2, avec un testeur pour ajuster les couleurs et copier le CSS.

Une palette à fort contraste est un ensemble de couleurs de marque où le texte reste facile à lire sur son fond. WCAG 2.2 le mesure sous forme de ratio, de 1:1 à 21:1. Le texte courant exige au moins 4.5:1 pour le niveau AA et 7:1 pour le niveau AAA ; le grand texte exige 3:1 et 4.5:1. Les palettes de cette page détaillent chaque paire.

Minimums de contraste WCAG 2.2

La plupart des sites de palettes alignent de jolis échantillons côte à côte, ce qui ne dit rien sur la lisibilité du texte posé dessus. Chaque palette ci-dessous attribue un rôle à chaque couleur (fond, texte, texte secondaire, accent, texte sur l'accent) et vérifie les paires que vous associeriez réellement sur une page.

Questions fréquentes

Quel ratio de contraste correspond à un fort contraste ?

Il n'existe pas de seuil officiel unique appelé fort contraste. Le niveau AA de WCAG demande 4.5:1 pour le texte normal et le niveau AAA demande 7:1, c'est pourquoi beaucoup de designers visent 7:1 pour le texte courant comme objectif de fort contraste.

À partir de quelle taille parle-t-on de grand texte ?

WCAG considère comme grand un texte d'au moins 18 points, ou 14 points en gras. La note explicative du W3C les situe à environ 24px et 18.5px en pixels CSS.

Puis-je arrondir 4.47 à 4.5 ?

Non. Le W3C précise que le ratio n'est pas arrondi, donc une paire à 4.499:1 n'atteint pas 4.5:1. C'est pour cette raison que le testeur tronque les valeurs.

Les boutons et les icônes doivent-ils aussi être contrastés ?

Oui. Le critère de succès 1.4.11 de WCAG 2.2 exige au moins 3:1 entre les éléments des contrôles ou les graphiques porteurs de sens et les couleurs adjacentes.

Mon logo doit-il respecter ces ratios ?

Non. Le texte faisant partie d'un logo ou d'un nom de marque n'a aucune exigence de contraste selon le critère 1.4.3. Tout le reste de la page autour y reste soumis.

Pourquoi cinq rôles et non cinq échantillons

Adapter une palette à votre marque

Les cinq palettes et leurs ratios

Les ratios sont calculés avec la formule WCAG 2.2 et tronqués à deux décimales.

Toutes les paires vérifiées des cinq palettes

Utiliser une palette dans votre CSS

Encre sur papier en propriétés personnalisées CSS

Nommez les variables selon leur rôle, pas selon leur couleur : changer de palette plus tard ne demandera qu'une modification par ligne.

La formule de contraste en JavaScript

Le même calcul que celui du testeur, écrit à partir de la définition de la luminance relative du W3C.

Testeur de palette

Choisissez une palette, puis modifiez n'importe quelle couleur. Chaque paire est revérifiée pendant la saisie.

Palette de départ

Encre sur papier

Équipe de nuit

Registre forestier

Bleu du port

Argile chaude

Fond

Texte courant

Texte secondaire

Texte sur l'accent

Contraste de chaque paire de cette palette

{a} sur {b}

Réussi

Échec

Couleur hexadécimale invalide

Horaires d'ouverture

Ouvert du mardi au samedi, de 9 à 5. Sans rendez-vous avant midi.

Fermé les jours fériés.

Réserver une visite

Copier les variables CSS

Copié.

La copie a échoué. Sélectionnez le code et copiez-le à la main.

Les {n} paires atteignent le niveau AA pour le texte courant.

{k} paires sur {n} n'atteignent pas 4.5:1 pour le texte courant.

Tous les calculs se font dans votre navigateur.

Commencer gratuitement · Sans carte bancaire

Voir aussi: Guides

Produit

Pour qui

Fonctionnalités

Ressources

Entreprise

Plan du site