Couleurs Cette page présente la palette des couleurs utilisées dans le site Web de la RAMQ, volet Citoyens et dans l’écosystème Web de la RAMQ. Description La palette de couleurs ci-dessous est utilisée pour l’ensemble des éléments visuels du site Web. Harmonisées avec celles de Québec.ca, les couleurs ont été choisies en fonction de leur lisibilité et de l’accessibilité de leurs contrastes, ainsi qu’en respect du nouveau Programme d’identification visuelle du Gouvernement du Québec (PIV). Voici ces couleurs et le code hexadécimal permettant de les reproduire fidèlement : Couleurs principales Bleu foncé#223654 Bleu moyen#095797 Bleu éclatant#3270C8 Bleu ciel#99b9e5 Bleu pâle#b9cde0 Bleu blanc#f1f5f9 Orange foncé#b25031 Orange#ed6b41 Gris-bleu foncé#495057 Gris-bleu moyen#6e7787 Gris argent#c4c8ce Gris pâle 1#e6e7e8 Gris pâle 2#f2f1f1 Noir#000 Blanc#fff Autres couleurs Les couleurs ci-dessous sont réservées à des usages spécifiques : messages d’erreur (rouge), mentions de succès (vert), messages promotionnels (jaune), Carnet santé Québec et autres entités de l’écosystème Web de la RAMQ. Rouge#c00 Vert#00852C Jaune foncé#e0ad03 Jaune pâle#f8e69a Dégradé#fff / #f2f1f1 Bleu Carnet santé#056DF5 Vert Carnet santé#8bccde Vert de gris Carnet santé#c4e5ee Orange pâle Carnet santé#fceae7 Gris pâle Carnet santé#f6f6f6 Note concernant l’usage de photographies Les photographies utilisées pour habiller certaines sections du site Web (par exemple, la zone « En vedette » de l’accueil) doivent être en harmonie avec le concept graphique et la palette de couleurs. Il est souhaitable d’utiliser des images au fond pâle et aéré. Accessibilité Texte Lors du choix de couleur pour un texte, le taux de contraste avec la couleur de l’arrière-plan doit être prise en compte et respecter le taux du standard WCAG 2.1 AA. Ainsi, tout utilisateur sera en mesure de lire le texte, peu importe sa limitation visuelle. L’expérience des utilisateurs sur les appareils mobiles en sera aussi améliorée. Le taux du standard à respecter est de 4.5:1 pour le texte régulier et 3:1 pour le texte agrandi. Un texte agrandi a une taille de 19px gras ou plus, ou de 24px non gras ou plus. Tout ce qui est plus petit est considéré comme du texte régulier. Éléments graphiques Un bon taux de contraste est nécessaire entre un élément graphique (icône) qui communique de l’information et son arrière-plan. Dans ce cas, le taux de contraste à respecter entre la couleur de l’élément graphique et la couleur de l’arrière-plan est de 3:1. Outils de vérification Afin de vérifier le taux de contraste, il existe divers outils : Logiciel Colour Contrast AnalyserExtensions dans des logiciels de Design (XD, Figma, Sketch, etc.)Extensions dans les navigateurs (WCAG Color Contrast Checker)Outils en ligne (Contrast Checker) Pour tous ces outils, il suffit d’inscrire le code de la couleur du texte et le code de la couleur de l’arrière-plan (manuellement ou avec la pipette, si disponible).
