Ouvrez exemples, controles et outils lies seulement apres le flux principal entree/sortie.
Guides
Exemples
Points de depart pour cet outil
#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)
Cas d'utilisation
Couleur
Convertissez HEX, RGB et HSL puis verifiez le contraste WCAG entre premier plan et arriere-plan.
Traite l'entree en mode Local navigateur et permet de verifier avant copie.
Combinez Color convertisseur avec les outils lies pour raccourcir le flux.
Comparez encore l'entree originale et la forme de sortie.
Verifiez les differences de runtime, encodage, fuseau horaire et politique de securite.
Poursuivez avec un outil lie pour confirmer que Color convertisseur convient a l'etape suivante.
Exemples couleur
Texte de previsualisation pour verifier le contraste.
Ratio de contraste
5.17
AA
Premier plan
#2563eb
Arriere-plan
#ffffff
Objectif WCAG
AA 4.5:1 / AAA 7:1
Utilisez 3:1 seulement pour texte grand ou gras.
Diagnostic couleur
Verifiez seuils AA/AAA, limites de transparence et luminance avant de copier des tokens de design.
Texte normal AA
Passe
4.5:1
Grand texte AA
Passe
3:1
Texte normal AAA
Echec
7:1
Marge AA
+0.67
Les valeurs positives depassent AA pour texte normal.
Ecart de luminance
0.847
Un ecart plus grand se lit souvent mieux.
Notes couleur
AA passe, mais AAA demande 7:1.
Rapport accessibilite couleur
Copiez un rapport WCAG de contraste avec valeurs, seuils, avertissements et controles d'accessibilite.
Etat du contraste
AA
Ratio de contraste
5.17
Texte normal AA
Passe
4.5:1
Grand texte AA
Passe
3:1
Texte normal AAA
Echec
7:1
Marge AA
+0.67
Ecart de luminance
0.847
Entree alpha
Non
Notes de verification
AA passe, mais AAA demande 7:1.
Checklist accessibilite
Testez la paire sur le fond rendu final, pas seulement sur l'apercu uni.
Verifiez hover, focus, disabled, visited et selected avant publication.
Confirmez taille et graisse reelles avant de compter sur le seuil grand texte.
Stockez ensemble les tokens avant-plan et arriere-plan pour reutiliser la paire volontairement.
Ne communiquez pas erreurs, alertes ou actions requises uniquement par la couleur.
# Rapport accessibilite couleur
- Verifie a: Heure de copie navigateur
- Premier plan Entree: #2563eb
- Premier plan HEX: #2563eb
- Premier plan RGB: rgb(37, 99, 235)
- Premier plan HSL: hsl(221, 83.2%, 53.3%)
- Arriere-plan Entree: #ffffff
- Arriere-plan HEX: #ffffff
- Arriere-plan RGB: rgb(255, 255, 255)
- Arriere-plan HSL: hsl(0, 0.0%, 100.0%)
- Ratio de contraste: 5.17
- Etat du contraste: AA
- Texte normal AA: Passe (4.5:1)
- Grand texte AA: Passe (3:1)
- Texte normal AAA: Echec (7:1)
- Marge AA: +0.67
- Ecart de luminance: 0.847
- Gestion alpha: Aucune entree alpha detectee dans avant-plan/arriere-plan.
## Notes de verification
- AA passe, mais AAA demande 7:1.
## Checklist accessibilite
- Testez la paire sur le fond rendu final, pas seulement sur l'apercu uni.
- Verifiez hover, focus, disabled, visited et selected avant publication.
- Confirmez taille et graisse reelles avant de compter sur le seuil grand texte.
- Stockez ensemble les tokens avant-plan et arriere-plan pour reutiliser la paire volontairement.
- Ne communiquez pas erreurs, alertes ou actions requises uniquement par la couleur.
Premier plan
#2563eb
Arriere-plan
#ffffff
Sortie
Valeurs de couleur
Sortie prete a copier
Premier plan HEX: #2563eb
Premier plan RGB: rgb(37, 99, 235)
Premier plan HSL: hsl(221, 83.2%, 53.3%)
Arriere-plan HEX: #ffffff
Arriere-plan RGB: rgb(255, 255, 255)
Arriere-plan HSL: hsl(0, 0.0%, 100.0%)
Ratio de contraste: 5.17 (Texte normal AA)
Color convertisseur - outil Couleur gratuit en ligne | bobob.app