Canvas, CanvasText et compagnie : les couleurs (oubliées) système, du texte au SVG

color-scheme n'est pas prefers-color-scheme

• prefers-color-scheme est une media query. Elle lit la préférence de thème de l'OS (clair, sombre), sans rien déclarer, seulement pour adapter des styles.
• color-scheme est une propriété CSS. Elle déclare au navigateur quels schémas la page (ou un élément) supporte, et sert de base de résolution pour les couleurs système et les styles natifs (scrollbars, contrôles de formulaire).

Sans color-scheme déclaré, un mot-clé comme CanvasText reste ancré sur sa valeur claire, même si prefers-color-scheme: dark matche par ailleurs sur l'OS.

Du texte au SVG, la mécanique commune

Ce que color-scheme change tout seul

:root {
  color-scheme: dark light;
}

Une seule ligne, aucune couleur système déclarée explicitement ailleurs, et pourtant : les cases à cocher, boutons radio, <select>, barres de défilement natifs basculent automatiquement en variante sombre quand l'OS est en sombre. Le navigateur applique ses propres styles UA cohérents avec le schéma déclaré, sans le moindre custom property ni media query à écrire.

C'est la démonstration la plus simple de la mécanique : color-scheme pose le cadre, le navigateur fait le reste pour tout ce qui est natif.

Ajouter une couleur système explicite sur du texte

Par-dessus cette base, une couleur système peut être posée à la main sur du contenu, pas seulement subie sur les contrôles natifs. Exemple sur un <mark> :

mark {
  background-color: Mark;
  color: MarkText;
}

Mark/MarkText suivent le même principe que CanvasText/Canvas : résolution automatique selon le thème actif, à condition que color-scheme soit bien déclaré en amont. Sans cette déclaration, le rendu reste figé sur la variante claire.

Le même principe appliqué au SVG

Prenons humans.svg, utilisé sur Kortic (voir en bas de page) :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 96" style="color-scheme: dark light;" fill="CanvasText" role="img" aria-label="Humans.txt We are people, not machines">
  <path d="M46.93,75.41h.71v1.41h-.25c-.46,0-.74.07-.85.5l-3.73,14.12h-1.91l-3.01-11.15c-.28-1.03-.53-2.37-.53-2.37h-.05s-.28,1.32-.57,2.35l-3.31,11.18h-1.91l-3.7-14.12c-.11-.43-.41-.5-.85-.5h-.28v-1.41h.71c1.15,0,1.68.2,1.95,1.32l2.81,11.06c.21.82.34,1.71.34,1.71h.05s.21-.89.44-1.71l3.56-12.32h1.59l3.24,12.32c.23.82.37,1.71.37,1.71h.05s.16-.89.37-1.71l2.81-11.06c.28-1.12.8-1.32,1.96-1.32ZM59.06,84.98c0,.27-.05.78-.05.78h-8.88c.05,2.9,2.09,4.56,4.48,4.56,2.12,0,3.47-1.41,3.47-1.41l.76,1.16s-1.68,1.64-4.3,1.64c-3.43,0-6.05-2.46-6.05-6,0-3.76,2.6-6.02,5.7-6.02s4.85,2.44,4.85,5.29ZM57.45,84.53c-.09-2.37-1.56-3.53-3.27-3.53-1.91,0-3.59,1.23-3.98,3.53h7.25ZM82.13,90.02h.28v1.41h-.74c-1.15,0-1.5-.23-1.91-1.32l-1.4-3.79h-6.42l-1.43,3.79c-.41,1.1-.74,1.32-1.89,1.32h-.76v-1.41h.3c.41,0,.67-.07.83-.5l5.29-14.12h1.72l5.29,14.12c.16.43.39.5.83.5ZM77.92,84.94l-2.14-5.72c-.28-.75-.62-2.08-.62-2.08h-.05s-.34,1.32-.62,2.08l-2.12,5.72h5.54ZM86.48,82.91h-.05s.05-.39.05-.87v-.78c0-.91-.44-1.3-1.4-1.3h-1.61v1.35h.97c.32,0,.51.18.51.5v9.63h1.56v-4.84c0-.73.09-1.51.32-2.24.51-1.69,1.72-2.96,3.36-2.96.3,0,.58.05.58.05v-1.53s-.3-.07-.62-.07c-1.82,0-3.1,1.32-3.66,3.06ZM102.75,84.98c0,.27-.05.78-.05.78h-8.88c.05,2.9,2.09,4.56,4.48,4.56,2.12,0,3.47-1.41,3.47-1.41l.76,1.16s-1.68,1.64-4.3,1.64c-3.43,0-6.05-2.46-6.05-6,0-3.76,2.6-6.02,5.7-6.02s4.85,2.44,4.85,5.29ZM101.14,84.53c-.09-2.37-1.56-3.53-3.27-3.53-1.91,0-3.59,1.23-3.98,3.53h7.25ZM124.07,80.24c0,2.99-2.12,4.9-4.99,4.9h-3.73v6.3h-1.61v-14.62h-1.5v-1.41h6.83c2.88,0,4.99,1.87,4.99,4.83ZM122.41,80.24c0-2.17-1.4-3.42-3.52-3.42h-3.54v6.91h3.52c2.14,0,3.54-1.3,3.54-3.49ZM136.21,84.98c0,.27-.05.78-.05.78h-8.88c.05,2.9,2.09,4.56,4.48,4.56,2.12,0,3.47-1.41,3.47-1.41l.76,1.16s-1.68,1.64-4.3,1.64c-3.43,0-6.05-2.46-6.05-6,0-3.76,2.6-6.02,5.7-6.02s4.85,2.44,4.85,5.29ZM134.6,84.53c-.09-2.37-1.56-3.53-3.27-3.53-1.91,0-3.59,1.23-3.98,3.53h7.25ZM150.91,85.65c0,3.47-2.74,6.07-6.09,6.07s-6.12-2.6-6.12-6.07,2.74-5.95,6.09-5.95,6.12,2.56,6.12,5.95ZM149.3,85.65c0-2.6-2.02-4.54-4.49-4.54s-4.51,1.94-4.51,4.54,2.02,4.68,4.51,4.68,4.49-2.01,4.49-4.68ZM164.67,85.71c0,3.63-2.18,6-5.17,6-2.83,0-3.79-2.17-3.79-2.17h-.05s.05.41.05,1v5.45h-1.56v-14.19c0-.32-.18-.5-.51-.5h-.97v-1.35h1.59c.99,0,1.38.41,1.38,1.21,0,.46-.02.78-.02.78h.05s.92-2.26,3.98-2.26,5.04,2.46,5.04,6.02ZM163.06,85.71c0-2.81-1.5-4.61-3.66-4.61-1.93,0-3.75,1.37-3.75,4.63,0,2.3,1.26,4.61,3.68,4.61,2.05,0,3.73-1.71,3.73-4.63ZM169.52,89.59v-12.8c0-.98-.41-1.39-1.4-1.39h-1.63v1.35h.97c.32,0,.51.18.51.5v12.8c0,.98.41,1.39,1.4,1.39h1.63v-1.35h-.97c-.32,0-.51-.16-.51-.5ZM183.38,84.98c0,.27-.05.78-.05.78h-8.88c.05,2.9,2.09,4.56,4.48,4.56,2.12,0,3.47-1.41,3.47-1.41l.76,1.16s-1.68,1.64-4.3,1.64c-3.43,0-6.05-2.46-6.05-6,0-3.76,2.6-6.02,5.7-6.02s4.85,2.44,4.85,5.29ZM181.77,84.53c-.09-2.37-1.56-3.53-3.27-3.53-1.91,0-3.59,1.23-3.98,3.53h7.25ZM185.33,93.65h1.31l1.68-4.08h-1.68l-1.31,4.08ZM210.59,76.8v10.04c0,.84.12,2.1.12,2.1h-.05s-.76-1.3-1.31-2.1l-8.26-11.43h-1.47v14.12c0,.34-.18.5-.51.5h-.99v1.41h1.7c.99,0,1.4-.41,1.4-1.39v-10.04c0-.84-.14-2.08-.14-2.08h.05s.76,1.3,1.33,2.08l8.26,11.43h1.47v-14.12c0-.34.18-.5.51-.5h.99v-1.41h-1.7c-.99,0-1.4.41-1.4,1.39ZM227.89,85.65c0,3.47-2.74,6.07-6.09,6.07s-6.12-2.6-6.12-6.07,2.74-5.95,6.09-5.95,6.12,2.56,6.12,5.95ZM226.28,85.65c0-2.6-2.02-4.54-4.49-4.54s-4.51,1.94-4.51,4.54,2.02,4.68,4.51,4.68,4.49-2.01,4.49-4.68ZM232.69,87.11v-5.84h2.9v-1.3h-2.9v-3.17h-1.54v3.17h-1.54v1.3h1.52v6c0,3.83,2.69,4.26,4.02,4.26.39,0,.67-.05.67-.05v-1.39s-.21.05-.53.05c-.87,0-2.6-.34-2.6-3.03ZM261.67,89.52l-1.13-14.12h-1.63l-4.28,9.33c-.37.82-.78,1.89-.78,1.89h-.05s-.41-1.07-.8-1.89l-4.28-9.33h-1.63l-1.13,14.12c-.02.34-.18.5-.51.5h-.85v1.41h1.54c.99,0,1.33-.41,1.4-1.39l.76-9.74c.07-.87.07-2.28.07-2.28h.05s.48,1.48.85,2.28l3.82,8.14h1.45l3.84-8.14c.39-.82.83-2.23.83-2.23h.05s0,1.37.07,2.23l.76,9.74c.07.98.41,1.39,1.4,1.39h1.56v-1.41h-.87c-.32,0-.48-.16-.51-.5ZM274.83,90.09h.97v1.35h-1.59c-.99,0-1.38-.43-1.38-1.37,0-.5.02-.84.02-.84h-.05s-.94,2.49-3.84,2.49c-1.93,0-3.93-1.12-3.93-3.4,0-3.81,5.08-3.95,7.08-3.95h.64v-.14c0-2.39-.87-3.24-2.99-3.24-.58,0-2.25.16-2.25,1v.73h-1.5v-1.09c0-1.6,2.76-1.94,3.77-1.94,3.66,0,4.53,1.94,4.53,4.4v5.5c0,.34.18.5.51.5ZM272.76,85.6h-.67c-1.82,0-5.45.05-5.45,2.62,0,1.07.85,2.17,2.58,2.17,2.21,0,3.54-2.28,3.54-4.26v-.52ZM283.65,90.3c-2.44,0-4.53-1.76-4.53-4.58s2-4.63,4.49-4.63c.97,0,2.64.46,2.64,1.41v.66h1.47v-1.03c0-1.89-2.81-2.44-4.12-2.44-3.45,0-6.09,2.51-6.09,6.02s2.62,6,6.07,6c2.97,0,4.53-1.87,4.53-1.87l-.74-1.16s-1.36,1.62-3.73,1.62ZM301.02,89.59v-5.45c0-2.83-1.01-4.45-3.89-4.45-2.6,0-4.14,1.76-4.58,2.85h-.05s.05-.41.05-.94v-4.86c0-.94-.41-1.35-1.4-1.35h-1.63v1.35h.97c.32,0,.51.18.51.5v14.19h1.56v-5.5c0-.55.05-1.07.18-1.53.53-1.92,2.23-3.26,4.19-3.26,2.25,0,2.53,1.6,2.53,3.4v5.5c0,.98.41,1.39,1.4,1.39h1.63v-1.35h-.97c-.32,0-.51-.16-.51-.5ZM306.89,89.59v-8.23c0-.98-.41-1.39-1.4-1.39h-1.63v1.35h.97c.32,0,.51.18.51.5v8.23c0,.98.41,1.39,1.4,1.39h1.63v-1.35h-.97c-.32,0-.51-.16-.51-.5ZM306.8,75.41h-1.52v1.96h1.52v-1.96ZM321.28,89.59v-5.45c0-2.83-1.01-4.45-3.89-4.45-2.71,0-4.19,1.85-4.6,2.9h-.05s.05-.37.05-.82v-.52c0-.87-.44-1.28-1.4-1.28h-1.61v1.35h.97c.32,0,.51.18.51.5v9.63h1.56v-5.5c0-.55.05-1.07.18-1.55.53-1.89,2.23-3.24,4.21-3.24,2.23,0,2.51,1.6,2.51,3.4v5.5c0,.98.41,1.39,1.4,1.39h1.63v-1.35h-.97c-.32,0-.51-.16-.51-.5ZM335.04,84.98c0,.27-.05.78-.05.78h-8.88c.05,2.9,2.09,4.56,4.48,4.56,2.12,0,3.47-1.41,3.47-1.41l.76,1.16s-1.68,1.64-4.3,1.64c-3.43,0-6.05-2.46-6.05-6,0-3.76,2.6-6.02,5.7-6.02s4.85,2.44,4.85,5.29ZM333.43,84.53c-.09-2.37-1.56-3.53-3.27-3.53-1.91,0-3.59,1.23-3.98,3.53h7.25ZM339.28,82.7c0-1.12.97-1.67,2.58-1.67.76,0,2,.32,2,1.16v.55h1.47v-.98c0-1.62-2.35-2.08-3.52-2.08-2.32,0-4.12,1.03-4.12,3.1,0,3.69,6.49,3.24,6.49,5.75,0,1.21-1.15,1.82-2.44,1.82-2.28,0-3.56-1.73-3.56-1.73l-.9,1.07s1.43,2.01,4.44,2.01c2.3,0,4.05-1.3,4.05-3.22,0-3.81-6.49-3.22-6.49-5.79ZM106.46,55.04v-26.46h-8.89v16.25c0,6.32-3.57,11.94-10.01,11.94-4.41,0-5.53-2.92-5.53-7.22v-16.32c0-3.19-1.4-4.65-4.69-4.65h-8.47v7.5h2.8c.98,0,1.54.49,1.54,1.53v13.75c0,9.65,4.69,13.47,12.32,13.47,6.16,0,10.64-3.68,12.32-7.36h.14s-.07.76-.07,1.6v.97c0,2.5,1.61,3.96,4.69,3.96h8.19v-7.43h-2.8c-.98,0-1.54-.56-1.54-1.53ZM168.56,55.04v-13.82c0-9.3-4.27-13.47-11.69-13.47-5.67,0-10.29,3.47-12.18,7.29h-.14c-1.54-4.79-5.04-7.29-10.43-7.29s-9.87,3.89-11.55,7.36h-.14s.07-.76.07-1.53v-1.04c0-2.5-1.54-3.96-4.69-3.96h-8.19v7.5h2.8c.98,0,1.54.49,1.54,1.53v26.39h8.82v-15.55c0-1.6.21-3.06.56-4.44,1.12-4.51,4.13-8.19,8.61-8.19s4.83,3.26,4.83,7.08v21.11h8.89v-15.55c0-1.67.14-3.12.56-4.51.98-4.44,4.13-8.12,8.54-8.12,4.13,0,4.9,3.06,4.9,7.08v16.39c0,3.33,1.4,4.72,4.76,4.72h8.4v-7.43h-2.73c-.98,0-1.54-.56-1.54-1.53ZM200.62,64c-3.29,0-4.55-1.81-4.55-3.89,0-.9.07-1.53.07-1.53h-.14s-2.73,6.25-10.78,6.25c-6.37,0-12.18-3.96-12.18-11.04,0-11.11,15.4-12.01,21.22-12.01h1.12v-.28c0-5.07-2.03-6.94-6.58-6.94-1.61,0-4.76.42-4.76,2.36v1.87h-8.26v-3.75c0-6.6,9.38-7.29,13.09-7.29,11.9,0,15.4,6.18,15.4,14.1v13.19c0,.97.56,1.53,1.54,1.53h2.8v7.43h-7.98ZM195.51,47.82h-1.54c-4.62,0-11.97.62-11.97,5.55,0,2.36,1.75,4.58,5.39,4.58,4.76,0,8.12-5,8.12-9.3v-.83ZM277.64,54c0-11.8-18.97-10.69-18.97-16.25,0-2.08,2.17-3.19,5.32-3.19,1.96,0,4.48.83,4.48,2.5v1.74h7.84v-3.68c0-5.76-7.7-7.36-12.53-7.36-7.42,0-13.86,3.26-13.86,10.35,0,11.46,18.83,11.39,18.83,16.39,0,2.36-2.1,3.47-4.83,3.47-6.09,0-10.64-5.21-10.64-5.21l-4.13,5.66v-1.84h-2.8c-.98,0-1.54-.56-1.54-1.53v-13.82c0-9.37-4.55-13.47-12.46-13.47-7.21,0-11.06,4.37-12.6,7.36h-.14s.14-.76.14-1.53v-1.04c0-2.5-1.54-3.96-4.69-3.96h-8.19v7.5h2.8c.98,0,1.54.49,1.54,1.53v26.39h8.82v-16.25c0-1.67.21-3.26.7-4.72,1.26-4.24,4.83-7.22,9.59-7.22,4.48,0,5.6,2.92,5.6,7.22v16.25c0,3.33,1.4,4.72,4.76,4.72h8.47v-5.4c.64.75,5.63,6.23,14.77,6.23,7.77,0,13.72-4.17,13.72-10.83ZM283.78,58.44h-5.39v5.55h5.39v-5.55ZM348.39,60.04c-2.66,0-7.91-1.04-7.91-9.24v-17.78h8.82v-3.96h-8.82v-9.65h-4.69v9.65h-6.26c-3.64,0-4.48.63-6.58,3.82l-5.11,7.78c-.49.9-1.12,2.08-1.12,2.08h-.14s-.63-1.18-1.19-2.08l-5.04-7.78c-2.1-3.26-3.01-3.82-6.58-3.82h-2.59v4.1h1.47c1.4,0,2.38.28,3.22,1.46l7.63,11.18-11.65,17.29v-3.2s-.63.14-1.61.14c-2.66,0-7.91-1.04-7.91-9.24v-17.78h8.82v-3.96h-8.82v-9.65h-4.69v9.65h-4.69v3.96h4.62v18.26c0,11.67,8.19,12.98,12.25,12.98,1.19,0,2.03-.14,2.03-.14v-.14h4.93l8.61-12.98c.63-.97,1.19-1.94,1.19-1.94h.14s.56,1.04,1.12,1.94l8.61,12.98h5.6l-12.32-18.19,7.63-11.25c.77-1.18,1.82-1.39,3.29-1.39h1.4v-.14h3.67v18.26c0,11.67,8.19,12.98,12.25,12.98,1.19,0,2.03-.14,2.03-.14v-4.24s-.63.14-1.61.14ZM53.86,46.05v11.48c0,4.21,1.76,5.98,5.88,6h-26.08v-20.66c0-2.12.18-4.06.71-5.83,1.69-5.47,6.32-9.36,12.28-9.36s7.21,3.71,7.21,9.18v4.37c.75-.01,2.11-1.26,3.75-1.68,1.6-.41,2.8.85,2.97,2.57.25,2.61-.81,5.04-3.41,5.23-1.41.1-2.52-.63-3.3-1.32ZM39.14,35.26c-.12,1.93.96,3.17,2.94,3.12,1.7-.05,2.61-1.21,2.79-2.96-.23-1.56-.98-2.69-2.8-2.77-1.83-.08-2.83.95-2.94,2.62ZM50.8,42.74c-4.13.79-8.46,2.51-13.8-.93,1.18,5.11-.57,10.29,4.41,11.51,4.88,1.2,6.96-3.45,8.91-7.1.49-.91,1.45-1.9.48-3.48ZM49.69,33.68c-1.74-.13-2.89.9-3.08,2.48-.23,1.87.98,2.95,2.79,3.38,1.68-.11,2.85-.93,3.03-2.59.2-1.88-.75-3.13-2.74-3.27ZM20.39,10.39h-3.56v-5.72c-2.76.38-5.89.79-8.61,1.32C2.97,7.02-.65,11.5.1,16.71c1.82,12.67,3.9,25.31,6.03,37.93.89,5.26,4.49,7.84,9.66,8.35,2.13.21,4.41.47,6.56.52V12.33c0-1.32-.71-1.94-1.96-1.94ZM66.43,27.44c-.03-.54-.34-2.67-.44-3.16-.58-4.9-1.32-9.58-2.11-14.45C62.62,2.1,58.29-.87,50.57.22c-4.93.69-9.88,1.19-14.83,1.78-2.82.35-.65.09-3.41.47.88.97,1.32,2.38,1.32,4.3v15.8c0,2.21-.18,3.8-.18,3.8h.18c2.14-4.33,7.74-8.92,15.58-8.92,10.15,0,15.85,5.21,15.85,17.13v17.57c0,1.24.71,1.94,1.96,1.94h3.43c-1.29-8.43-2.68-17.98-4.03-26.65Z"/>
</svg>

En version par appel d'uri :

<img src="/svg/humans.svg" alt="humans.txt We are people, not machines">

Quelle que soit la configuration, les couleurs sont toujours assurées.

Même mécanique que sur le <mark> précédent, mais posée directement en attribut de présentation dans le fichier, pas en CSS de page. Cette différence est ce qui rend le fichier portable : un SVG chargé via <img src="..."> est traité comme du contenu remplacé, il ne reçoit jamais le CSS de la page qui l'inclut. Si color-scheme avait été déclaré uniquement sur la page hôte, l'adaptation clair/sombre aurait fonctionné en usage inline, mais cassé net dès que le même fichier est appelé via <img> ou en background-image ailleurs.

En le posant sur la balise <svg> racine du fichier lui-même, l'asset fonctionne à l'identique quel que soit son point d'intégration.

Le mode contraste

Deux mécanismes à ne pas confondre, en plus des deux premiers.

forced-colors: active : déclenché essentiellement par le mode Contraste élevé de Windows. Le navigateur remplace radicalement la palette de la page par un jeu de couleurs système imposé, sans que l'auteur puisse s'y opposer sur les éléments concernés (sauf forced-color-adjust: none, volontairement écarté de cet article).

prefers-contrast: more / less / custom : une simple préférence lue en media query, sans remplacement forcé. À l'auteur de l'implémenter manuellement, comme le raccourci clavier c sur Kortic qui renforce le contraste des textes, boutons et bordures.

Les deux couches sont indépendantes et peuvent se cumuler.

Point de vigilance avec un toggle manuel

Si le site propose un bouton pour forcer un thème indépendamment de l'OS, color-scheme doit suivre ce choix, pas rester figé sur la préférence détectée au chargement. Sinon les couleurs système désynchronisent du reste de l'interface dès que l'utilisateur force manuellement un thème différent de celui de son OS.

Pourquoi ça compte, au-delà de l'esthétique

WCAG 1.4.11 (Contraste des éléments non textuels) s'applique aux icônes et graphismes qui portent une fonction, pas seulement au texte. Un SVG en CanvasText garantit un contraste correct avec Canvas en toute circonstance de thème, sans recalcul manuel de valeurs de contraste à chaque variante claire/sombre/contrastée.

Couleurs système

CSS Color 4 qui suivent color-scheme.

Sans paire :

• ButtonBorder
• GrayText (texte désactivé)
• LinkText
• VisitedText
• ActiveText

Les anciens mots-clés (Window, WindowText, ButtonHighlight, ButtonShadow, Menu, MenuText, Scrollbar, ThreeD*, etc.) sont dépréciés et alias de ces couleurs.

AccentColor et AccentColorText ont un support plus récent, à vérifier selon la cible.

Une configuration qui appartient à l'utilisateur, pas au site

Il y a un point plus profond que le confort visuel. Une couleur système n'est pas une valeur que le site choisit à la place de l'utilisateur, c'est une référence vers une configuration que l'utilisateur a lui-même définie, dans son OS ou son navigateur. Certaines personnes ne se contentent pas d'un simple clair/sombre : elles configurent des couleurs personnalisées dans les réglages d'accessibilité de leur système (contraste élevé avec palette custom, daltonisme compensé par des teintes spécifiques, fond et texte choisis pour leur propre confort de lecture).

Coder fill="#000" ou color: #1a1a1a en dur, c'est imposer un choix esthétique qui ignore cette configuration, aussi soigné soit-il. Utiliser CanvasText à la place, c'est laisser remonter jusqu'au site le réglage que la personne a déjà fait ailleurs, une seule fois, pour l'ensemble de son usage numérique. Le site n'a pas besoin de deviner ce qui convient, il hérite directement de ce que l'utilisateur a déjà décidé pour lui-même.

À tester directement

Pas de captures d'écran ici, Kortic gère déjà tout ça en direct. Basculer le thème clair/sombre, activer le renforcement de contraste (touche c) ou en l'activant sur votre système, et tester le mode forced-colors du système suffit à voir la mécanique décrite plus haut s'appliquer en conditions réelles, texte comme SVG.

That's all, Folks !