Couleurs

Kuik propose 6 nuances de couleurs, déclinées en 10 luminances différentes.

Les nuances sont les suivantes :

• color1 : Couleur primaire
• color2 : Couleur secondaire
• color3 : Couleur tertiaire
• success : État succès
• error : État erreur
• neutral : Nuances de gris

Ces palettes ont été générées à l'aide de Leonardo et déclinées selon l'algorithme HSLUV.

En savoir plus sur la génération de palettes

Les 10 luminances sont repérées par des numéros :

Numéro	Luminance équivalente
10	7.7
20	16.5
30	25.6
40	36.7
50	47.1
60	57.9
70	66.7
80	79.6
90	93.2
100	98.3

Contraste et accessibilité

Du point de vue de l'accessibilité, la palette est constituée avantageusement : il suffit d'un écart de 50 entre deux couleurs pour permettre d'avoir un niveau de contraste double A (AA) du point de vue du RGAA.

Par exemple :

• ❌ Contraste invalide entre color1-30 et color1-50
• ✅ Contraste valide entre color2-10 et success-70

Les niveaux de contrastes adéquats varient selon le contexte. Le contraste minimum requis peut varier selon :

• La taille du texte
• L'épaisseur des caractères
• L'élément concerné (texte / fond, bordure / fond, etc.)
• L'état de l'élément (naturel / désactivé, etc.)

Règles du RGAA à propos des couleurs

Niveaux de contrastes

Avant-plan → ↓ Arrière-plan	10	20	30	40	50	60	70	80	90	100
Avant-plan Gris coloré, neutre Primaire Secondaire Tertiaire Succès Erreur Arrière-plan Gris coloré, neutre Primaire Secondaire Tertiaire Succès Erreur
10
20
30
40
50
60
70
80
90
100

Modes d'affichage

Les navigateurs prennent en charge deux modes d'affichage : light (mode clair) et dark (mode sombre), en vue de proposer un confort visuel aux utilisateurs.

Afin de répondre à ce besoin, les palettes de Kuik s'adaptent au mode d'affichage choisi par l'utilisateur.

Luminance en mode clair	Équivalence en mode sombre
10	100
20	90
30	80
40	70
50	60
60	50
70	40
80	30
90	20
100	10

De la même façon, les valeurs extrêmes black (noir) et white (blanc) s'inversent également.

Palettes

Teintes extrêmes

	Variable	Hex	R,G,B
	white
	black

Gris coloré, neutre

	Variable	Hex	R,G,B
	neutral--10
	neutral--20
	neutral--30
	neutral--40
	neutral--50
	neutral--60
	neutral--70
	neutral--80
	neutral--90
	neutral--100

Primaire

	Variable	Hex	R,G,B
	color1--10
	color1--20
	color1--30
	color1--40
	color1--50
	color1--60
	color1--70
	color1--80
	color1--90
	color1--100

Secondaire

	Variable	Hex	R,G,B
	color2--10
	color2--20
	color2--30
	color2--40
	color2--50
	color2--60
	color2--70
	color2--80
	color2--90
	color2--100

Tertiaire

	Variable	Hex	R,G,B
	color3--10
	color3--20
	color3--30
	color3--40
	color3--50
	color3--60
	color3--70
	color3--80
	color3--90
	color3--100

Succès

	Variable	Hex	R,G,B
	success--10
	success--20
	success--30
	success--40
	success--50
	success--60
	success--70
	success--80
	success--90
	success--100

Erreur

	Variable	Hex	R,G,B
	error--10
	error--20
	error--30
	error--40
	error--50
	error--60
	error--70
	error--80
	error--90
	error--100