Gestion des couleurs CSS et accessibilité de l’affichage
Gérez espaces colorimétriques, écrans wide-gamut, contraste et replis accessibles.
BotBrowser Team
Vous voulez la documentation structurée pour Plateforme ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
La couleur web est une chaîne : CSS nomme un espace, navigateur convertit, écran limite, préférences modifient l’affichage. L’accessibilité dépend du texte, du fond, de l’état et du repli réellement vus.
Espaces et profils
rgb() utilise généralement sRGB; CSS nomme aussi display-p3, lab et oklch. Un profil relie canaux et condition d’observation, sans garantir la capacité de l’écran. Séparez intention et coordonnées. La spécification CSS Color 5 et MDN color() décrivent le langage, pas chaque écran.
Utilisez des rôles --surface, --text et --focus-ring, avec valeur wide-gamut, repli sRGB et couleurs forcées. Gardez le repli près du rôle.
Conversion color()
color(display-p3 1 0 0) demande une coordonnée; le navigateur l’adapte et peut la comprimer. @supports teste la syntaxe, pas une dalle wide-gamut. Testez gradients, ombres, bordures et états focus, erreur et sélection.
Variabilité de gamut
Un visuel large paraît différent selon écran, lumière et gestion système. N’exprimez jamais un état par rouge et vert seuls : ajoutez texte, icône, motif ou position. Zoom et taille de texte influencent aussi la lisibilité.
BotBrowser prend en charge des parcours autorisés de couleur, contraste et préférences dans ses pipelines documentés, mais ne change pas le gamut physique et ne certifie pas l’accessibilité de chaque appareil. Voir BotBrowser Advanced features et vérifier appareils et aides réelles.
Contraste et accessibilité
Le contraste est une paire et un état. Vérifiez texte, fond, images, overlays, focus, erreur, désactivation et sélection avec les styles calculés. Une fixture inclut titre, texte, lien, focus et erreur, puis zoom, couleurs forcées, clavier et lecteur. Un ratio réussi ne suffit pas pour une police fine ou un motif.
Respectez prefers-contrast, couleurs forcées et prefers-reduced-motion. Gardez les préférences sans profiler l’appareil.
Livraison du repli
Commencez par sRGB ou couleurs système, ajoutez wide-gamut, puis règles de contraste élevé. Si une déclaration échoue, la précédente reste valable. Si aucune paire ne convient, conservez l’état avec texte et icône. Gardez sélection, plage, focus et validation lors du changement de palette.
Notez contexte, syntaxe, valeurs, contraste, préférence et limite visible, sans captures ni données personnelles. Consultez la validation des versions et le guide de compatibilité.
Registre fixe
Figez CSS, rôles, replis, objectif de contraste, fixtures et préférences. Gardez la preuve qu’un P3 peut être accepté puis mappé, ou qu’un fixture demande un repli plus sombre. La note nomme composants et récupération sans promettre des couleurs identiques.
Rejouez après changement de police, icône, image, ombre, webview, impression ou thème. La géométrie peut modifier le contraste. Séquence : rôles, conversion, gamut, états, préférences, preuve.
L’intention de marque reste lisible avec moins de saturation.
Le focus conserve un contour visible.
L’état d’erreur ajoute un texte.
La sélection possède un indice supplémentaire.
La préférence système est respectée.
L’impression utilise un contraste élevé.
Une webview peut changer le fond.
Le test consigne le contexte.
Une capture ne remplace pas le clavier.
L’action reste disponible après changement de couleurs.
L’interface explique la limite.
La fixture est rejouée après mise à jour.
Le repli conserve les libellés.
La revue compare tous les états.
L’intention visuelle reste claire lorsque la saturation baisse. Le focus garde un contour visible et l’erreur ajoute du texte. La sélection possède un indice supplémentaire. La préférence système est respectée sans profil. L’impression utilise un contraste élevé et une webview peut fournir un autre fond. Le test consigne le contexte, conserve l’action et rejoue la même fixture après une mise à jour.
Sources publiques
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.