Résumé

Ce générateur de thème WordPress IA produit un theme.json à partir d'une couleur de marque. Il calcule une palette, contrôle le contraste WCAG du texte, des liens et des boutons, et fixe une échelle typographique modulaire. Les règles sont fixes, donc le résultat est prévisible et testable. Copiez le fichier dans un block theme, puis affinez-le dans l'éditeur de site.

Générez une palette theme.json et une échelle typographique en quelques secondes

Ce générateur de thème WordPress IA promet souvent un site entier. Celui-ci fait la partie que vous pouvez vérifier : une palette contrôlée en contraste, une échelle typographique modulaire et un theme.json prêt pour votre block theme.

Poser le folio

Générateur de thème de départ pour block theme

Choisissez une couleur de marque, un mode et une association de polices. La palette, le rapport de contraste et le theme.json se mettent à jour à chaque modification.

Palette

Base
Surface
Contrast
Primary
Accent

Contrôle du contraste (WCAG 2.x)

Texte courant sur le fond
Lien sur le fond
Texte du bouton sur Primary
Accent sur le fond

Aperçu

Un titre dans votre échelle

Le texte courant repose sur la couleur de fond. Un lien dans la couleur du lien suit le texte.

theme.json

Le fonctionnement

Ce que le générateur calcule réellement

Une palette à partir d'une couleur

Votre couleur de marque devient Primary. L'outil en lit la teinte et construit Base, Surface et Contrast à partir d'elle en HSL, à 97 %, 93 % et 11 % de luminosité sur une base claire, ou 9 %, 14 % et 92 % sur une base sombre. Accent se place à 150 degrés sur la roue chromatique.

Un contraste vérifiable

Quatre paires sont mesurées avec la formule de luminance WCAG 2.x : texte courant, lien, texte de bouton et accent. Chacune reçoit un ratio et une note. Si le lien échoue au niveau AA, sa luminosité change d'un cran à la fois jusqu'à le réussir.

Une échelle typographique modulaire

Medium vaut 1rem. Large, extra large et huge multiplient par votre ratio une, deux puis trois fois, et small le divise. Avec le ratio 1.2, vous obtenez 0.833, 1, 1.2, 1.44 et 1.728 rem.

Marginalia

Pourquoi les tokens de design passent avant les patterns

Un pattern de hero, une grille de cartes et un pied de page lisent tous les mêmes slugs de palette. Si ces slugs portent des valeurs qui échouent au contraste, chaque pattern hérite de l'échec, et vous le découvrez sur le téléphone du client. Corriger les tokens d'abord fait que les patterns que vous construisez, ou générez avec Pattern Forge, partent de couleurs qui passent déjà. Testez le résultat sur un vrai site client, pas sur un bac à sable.

  • Les slugs de palette sont partagés par chaque bloc et pattern
  • Les slugs de taille de police gardent les titres cohérents entre les templates
  • Une seule modification de theme.json met à jour tout le site
Feuille de spécimen typographique et petits nuanciers de papier sur une table en bois
En pratique

Du fichier généré au thème en ligne

  1. 1

    Choisir les entrées

    Partez de la couleur de marque tirée du logo du client. Choisissez un mode clair, sauf si la marque est sombre par nature, puis l'association de polices qui correspond au ton.

  2. 2

    Lire le rapport de contraste

    Repérez les lignes marquées Échec ou Grand texte uniquement. Modifiez le fond ou la teinte neutre jusqu'à ce que le texte courant, le lien et le texte du bouton réussissent tous le niveau AA.

  3. 3

    Copier le fichier dans votre thème

    Cliquez sur Copier theme.json, collez le contenu à la racine de votre block theme, puis ouvrez l'éditeur de site et vérifiez que la palette apparaît dans le sélecteur de couleurs.

  4. 4

    Affiner à la main

    Le résultat sert de point de départ. Renommez les slugs selon votre système de design, ajoutez les réglages d'espacement et de mise en page, puis versionnez le fichier avec le reste du thème.

Limites

Ce que cet outil ne fait pas

Pas de mises en page

Il produit des tokens, pas des templates. L'en-tête, le pied de page et la structure des pages viennent toujours de votre block theme ou des patterns que vous construisez dans l'éditeur de site.

Pas de polices web

Les deux associations utilisent des piles système pour éviter toute requête de police. Une typographie de marque demande une police variable auto-hébergée et une entrée fontFace, que vous ajoutez vous-même.

Pas de garantie de goût

Une palette peut réussir chaque contrôle de contraste et paraître plate. Considérez le résultat comme une base sûre, puis ajustez Accent et les neutres à l'œil sur une vraie page.

Questions sur le générateur

Est-ce vraiment un générateur de thème IA ?
Non, et l'outil le dit d'entrée. La palette, les contrôles de contraste et l'échelle typographique viennent de règles fixes : calcul des couleurs en HSL, formule de contraste WCAG et échelle modulaire. Le résultat reste ainsi prévisible et testable. Si vous voulez un modèle de langage dans la boucle, Pattern Forge génère des patterns Gutenberg à partir d'une consigne ; cet outil couvre les tokens de design qui se trouvent dessous.
Est-ce gratuit, et mes couleurs sont-elles stockées ?
C'est gratuit et sans compte. Tout fonctionne dans votre navigateur. Le seul envoi est un compteur anonyme qui enregistre l'utilisation de l'outil, sans aucune valeur de couleur ni texte du formulaire.
D'où vient le ratio de contraste ?
De la formule de luminance relative WCAG 2.x : chaque canal sRGB est linéarisé, pondéré à 0.2126, 0.7152 et 0.0722, et le ratio vaut (plus clair + 0.05) divisé par (plus sombre + 0.05). 4.5 pour 1 est le seuil AA du texte courant, 7 pour 1 le seuil AAA, et 3 pour 1 le seuil AA du grand texte.
Pourquoi la couleur du lien diffère-t-elle de ma couleur de marque ?
Une couleur de marque échoue souvent au seuil de 4.5 pour 1 sur un fond presque blanc ou presque noir. Le générateur garde votre couleur de marque comme Primary, pour les boutons et les aplats, et ajuste sa luminosité d'un cran à la fois jusqu'à ce que la variante Link réussisse le niveau AA sur le fond choisi.
Quelle version de WordPress le fichier cible-t-il ?
Le fichier utilise theme.json en version 3, introduite avec WordPress 6.6 (juillet 2024). Les installations plus anciennes peuvent exiger la version 2, qui a la même structure de palette et de typographie : vous pouvez changer le numéro et garder le reste.
Les piles de polices chargent-elles quoi que ce soit depuis le web ?
Non. Les deux associations utilisent des piles système et de type Georgia, donc aucune requête de police et aucun décalage de mise en page lié à une police web tardive. Si vous auto-hébergez plus tard une police variable, remplacez les valeurs fontFamily et gardez les slugs.
Fonctionne-t-il pour les sites de droite à gauche ?
Le fichier ne contient aucune valeur gauche ou droite : couleurs, tailles et familles de polices sont indépendantes du sens d'écriture. Vérifiez séparément votre police de repli pour l'arabe ou l'hébreu, car les piles système varient selon les plateformes.
Où placer le fichier dans mon thème ?
Enregistrez-le sous le nom theme.json à la racine d'un block theme, puis ouvrez l'éditeur de site. Les entrées de palette apparaissent dans le sélecteur de couleurs, les tailles dans le panneau typographie, et la section styles définit les valeurs par défaut de tout le site.

Passez les tokens à un pattern, pas à une page blanche

Une fois le theme.json en place, Pattern Forge rédige des patterns Gutenberg qui utilisent votre palette et votre échelle typographique. Monk est gratuit ; Scribe coûte $12/mo.

Illuminez votre site
Noon