Utilisez toujours cette palette de couleurs.
Contrast des couleurs
Vous devez vous assurer que le niveau de contraste du texte et des éléments
interactifs de votre application correspond au niveau AA des Web Content
Accessibility Guidelines (WCAG)
2.1.
Sous chaque palette, chaque nuance montre un exemple de texte blanc et de
texte foncé, avec le ratio de contraste et le niveau WCAG atteint. Le ratio est
le même dans les deux sens : celui du texte blanc sur une couleur vaut aussi
pour du texte de cette couleur sur fond blanc.
| Résultat |
Ratio minimum |
Usage autorisé |
| AAA |
7:1 |
Tout texte |
| AA |
4.5:1 |
Tout texte |
| AA grand texte |
3:1 |
Texte d’au moins 24px (ou 18.66px en gras), icônes, bordures et composants d’interface |
| Échec |
moins de 3:1 |
Décoration uniquement, jamais pour du texte ou une information |
Palette
Primary palette values.
#1e5e02
darker
#3a862d
dark
#40d940
base
#9f3
light
#cf9
lighter
Aa Texte blanc
7.9:1 AAA
Aa Texte foncé
2.53:1 Échec
darker #1e5e02
Aa Texte blanc
4.53:1 AA
Aa Texte foncé
4.41:1 AA grand texte
dark #3a862d
Aa Texte blanc
1.87:1 Échec
Aa Texte foncé
10.69:1 AAA
base #40d940
Aa Texte blanc
1.25:1 Échec
Aa Texte foncé
15.93:1 AAA
light #9f3
Aa Texte blanc
1.14:1 Échec
Aa Texte foncé
17.48:1 AAA
lighter #cf9
Secondary palette values.
#2a0046
darker
#6200a3
dark
#90f
base
#be5cff
light
#e3b9ff
lighter
Aa Texte blanc
17.69:1 AAA
Aa Texte foncé
1.13:1 Échec
darker #2a0046
Aa Texte blanc
10.25:1 AAA
Aa Texte foncé
1.95:1 Échec
dark #6200a3
Aa Texte blanc
5.52:1 AA
Aa Texte foncé
3.62:1 AA grand texte
base #90f
Aa Texte blanc
3.4:1 AA grand texte
Aa Texte foncé
5.87:1 AA
light #be5cff
Aa Texte blanc
1.66:1 Échec
Aa Texte foncé
12.06:1 AAA
lighter #e3b9ff
Tertiary palette values.
#065074
darker
#0f91d2
dark
#6cf
base
#ade4ff
light
#e0f4ff
lighter
Aa Texte blanc
8.72:1 AAA
Aa Texte foncé
2.29:1 Échec
darker #065074
Aa Texte blanc
3.49:1 AA grand texte
Aa Texte foncé
5.72:1 AA
dark #0f91d2
Aa Texte blanc
1.8:1 Échec
Aa Texte foncé
11.1:1 AAA
base #6cf
Aa Texte blanc
1.37:1 Échec
Aa Texte foncé
14.6:1 AAA
light #ade4ff
Aa Texte blanc
1.13:1 Échec
Aa Texte foncé
17.69:1 AAA
lighter #e0f4ff
Neutral palette values.
#080808
darker
#273c46
dark
#697983
base
#c3d1dc
light
#dce3e8
lighter
Aa Texte blanc
20.02:1 AAA
Aa Texte foncé
1:1 Échec
darker #080808
Aa Texte blanc
11.53:1 AAA
Aa Texte foncé
1.73:1 Échec
dark #273c46
Aa Texte blanc
4.5:1 AA
Aa Texte foncé
4.44:1 AA grand texte
base #697983
Aa Texte blanc
1.55:1 Échec
Aa Texte foncé
12.85:1 AAA
light #c3d1dc
Aa Texte blanc
1.29:1 Échec
Aa Texte foncé
15.44:1 AAA
lighter #dce3e8
Text palette values.
States palette values.
#3c8a2e
success
#ff9c00
warning
#c3105c
danger
#82afcc
info
#ffbf47
focus
#384083
visited
Aa Texte blanc
4.31:1 AA grand texte
Aa Texte foncé
4.64:1 AA
success #3c8a2e
Aa Texte blanc
2.09:1 Échec
Aa Texte foncé
9.54:1 AAA
warning #ff9c00
Aa Texte blanc
5.91:1 AA
Aa Texte foncé
3.38:1 AA grand texte
danger #c3105c
Aa Texte blanc
2.34:1 Échec
Aa Texte foncé
8.53:1 AAA
info #82afcc
Aa Texte blanc
1.64:1 Échec
Aa Texte foncé
12.2:1 AAA
focus #ffbf47
Aa Texte blanc
9.42:1 AAA
Aa Texte foncé
2.12:1 Échec
visited #384083
Couleur officielle
La couleur officielle du Canton de Vaud est #3a862d
Couleurs futures
Travail en cours sur les futures couleurs de la palette. Les nuances marquées
« Proposition » attendent la validation du BIC.
Primary palette values.
#195347
darker
#129a39
dark
#82bf82
base
#def4b0
light
#e8e858
lighter
Aa Texte blanc
8.86:1 AAA
Aa Texte foncé
1.95:1 Échec
darker #195347
Aa Texte blanc
3.67:1 AA grand texte
Aa Texte foncé
4.7:1 AA
dark #129a39
Aa Texte blanc
2.15:1 Échec
Aa Texte foncé
8:1 AAA
base #82bf82
Aa Texte blanc
1.18:1 Échec
Aa Texte foncé
14.55:1 AAA
light #def4b0
Aa Texte blanc
1.3:1 Échec
Aa Texte foncé
13.27:1 AAA
lighter #e8e858
Secondary palette values.
#382676
darker
#583faf
dark
#7565d1
base
#a5a0ed
light
#cbcaff
lighter
Aa Texte blanc
12.3:1 AAA
Aa Texte foncé
1.4:1 Échec
darker #382676 Proposition
Aa Texte blanc
7.65:1 AAA
Aa Texte foncé
2.26:1 Échec
dark #583faf Proposition
Aa Texte blanc
4.62:1 AA
Aa Texte foncé
3.73:1 AA grand texte
base #7565d1 Proposition
Aa Texte blanc
2.37:1 Échec
Aa Texte foncé
7.28:1 AAA
light #a5a0ed Proposition
Aa Texte blanc
1.56:1 Échec
Aa Texte foncé
11.06:1 AAA
lighter #cbcaff
Tertiary palette values.
#04424e
darker
#076979
dark
#2196a7
base
#c0d5d9
light
#e0efef
lighter
Aa Texte blanc
11.08:1 AAA
Aa Texte foncé
1.56:1 Échec
darker #04424e Proposition
Aa Texte blanc
6.35:1 AA
Aa Texte foncé
2.72:1 Échec
dark #076979 Proposition
Aa Texte blanc
3.5:1 AA grand texte
Aa Texte foncé
4.92:1 AA
base #2196a7 Proposition
Aa Texte blanc
1.52:1 Échec
Aa Texte foncé
11.33:1 AAA
light #c0d5d9
Aa Texte blanc
1.18:1 Échec
Aa Texte foncé
14.62:1 AAA
lighter #e0efef
Quaternary palette values.
#3c2613
darker
#583718
dark
#774f24
base
#b29c6f
light
#e9e3d4
lighter
Aa Texte blanc
14.2:1 AAA
Aa Texte foncé
1.21:1 Échec
darker #3c2613 Proposition
Aa Texte blanc
10.63:1 AAA
Aa Texte foncé
1.62:1 Échec
dark #583718 Proposition
Aa Texte blanc
7.17:1 AAA
Aa Texte foncé
2.41:1 Échec
base #774f24
Aa Texte blanc
2.66:1 Échec
Aa Texte foncé
6.48:1 AA
light #b29c6f
Aa Texte blanc
1.28:1 Échec
Aa Texte foncé
13.5:1 AAA
lighter #e9e3d4
Neutral palette values.
#111c23
darker
#2b3b45
dark
#5e6e79
base
#d5dce1
light
#e2e7eb
lighter
Aa Texte blanc
17.29:1 AAA
Aa Texte foncé
1:1 Échec
darker #111c23 Proposition
Aa Texte blanc
11.57:1 AAA
Aa Texte foncé
1.49:1 Échec
dark #2b3b45
Aa Texte blanc
5.27:1 AA
Aa Texte foncé
3.27:1 AA grand texte
base #5e6e79 Proposition
Aa Texte blanc
1.38:1 Échec
Aa Texte foncé
12.48:1 AAA
light #d5dce1 Proposition
Aa Texte blanc
1.24:1 Échec
Aa Texte foncé
13.88:1 AAA
lighter #e2e7eb Proposition