Guides
Comment faire le travail, et ce que nous avons mesuré en construisant l’outil qui le fait.
Couleur
Comment convertir un code HEX en RGB, HSL et OKLCH, et quel format coller où
HEX pour le CSS, HEX sans # pour Figma, RGB pour la transparence, OKLCH pour les tokens : quelle notation coller où, et pourquoi le CMJN reste indicatif.
Comment transformer une couleur de marque en design tokens, de 50 à 950
D'un hex de marque à onze nuances et des tokens de rôle : quelle nuance sert au texte, aux bordures, aux fonds, et pourquoi votre hex n'y figure pas.
Couleurs complémentaires, triadiques et analogues : comment rendre chaque harmonie lisible
Complémentaires à 180°, triadiques à 120°, analogues à ±30° : ces relations de teinte ne garantissent aucun contraste. Comment garder le texte lisible.
Comment extraire une palette de couleurs d'une photo, et vérifier qu'elle peut porter du texte
Palette extraite d'une photo sans envoi : ce que calculent Dominant, Distinct et Accessible, et pourquoi ces couleurs échouent souvent en texte sur blanc.
Générer une palette de couleurs avec un vrai contraste pour le texte
Contraste sur blanc × contraste sur noir = 21 : toute couleur passe sur l'un des deux. Générez une palette qui s'accorde avec elle-même.
Comment créer une palette de couleurs Tailwind personnalisée qui passe le contraste
Une échelle Tailwind en onze paliers, exportée en @theme v4 ou config v3, et les paliers qui passent le contraste sur blanc, sur noir et en composants.
Contraste en mode sombre : pourquoi WCAG 2 vous induit en erreur
La formule WCAG 2 ajoute une constante de reflet fixe qui domine du côté sombre : une paire sombre peut afficher un ratio conforme et paraître terne.
Corriger le contraste des couleurs sans changer la couleur de votre marque
Le contraste dépend de la luminosité, pas de la teinte. Faites varier la luminosité de votre couleur : elle reste celle de la marque et passe le WCAG.
Les couleurs d'état de Bootstrap et Tailwind échouent pour les personnes daltoniennes
Nous avons mesuré le rouge et le vert d'état par défaut de Bootstrap et Tailwind en simulant le daltonisme : les deux paires se confondent presque.
Comment créer une palette accessible à partir d'une seule couleur de marque
Transformez un code hex de marque en système complet : gamme de luminosité, tokens sémantiques, variantes claire et sombre conformes au contraste.
Comment créer une palette de couleurs adaptée aux daltoniens
Quelles paires de couleurs résistent au daltonisme, lesquelles se confondent, et comment créer une palette catégorielle qui fonctionne pour tous.
OKLCH pour les designers : pourquoi il a remplacé HSL
La luminosité HSL ment. OKLCH est perceptuellement uniforme : des pas égaux paraissent égaux, parfait pour les gammes de nuances et le contraste.
Pourquoi 83.9% des sites web échouent au contraste des couleurs
WebAIM relève des défauts de contraste sur 83.9% du million de pages d'accueil les plus visitées, contre 79.1% l'an passé. Pourquoi cela empire-t-il ?
Pourquoi un texte courant en 14px ne peut jamais passer APCA
Pour APCA, un texte de 14px en graisse normale est inutilisable quel que soit le contraste, même noir pur sur blanc. Le raisonnement, et quoi faire.
Quel ratio de contraste vous faut-il vraiment ?
Guide pratique de 4.5:1, 3:1 et 7:1 : lequel s'applique où, ce qui compte comme grand texte, et les règles le plus souvent mal comprises.
Intégrer la vérification du contraste à la CI pour faire échouer le build
La revue manuelle du contraste ne passe pas à l'échelle et saute sous la pression des délais. Voici comment vérifier vos tokens dans une suite de tests.
WCAG 2 ou APCA : quelle norme de contraste utiliser en 2026 ?
WCAG 2 est la référence légale, APCA prédit mieux la lisibilité. Ce qui les distingue, où elles divergent et laquelle viser pour la mise en production.
Typographie
Créer une échelle typographique fluide avec CSS clamp()
Le calcul de clamp() pour une échelle typographique fluide, de 16px à 19px, et ce que clamp() ne vérifie pas : capitales et longueur de ligne.
Pourquoi 16px ne font pas 16px : la hauteur d'x de 872 familles de polices
Hauteur d'x de 872 familles : de 0.351 à 0.84 em, médiane 0.500, 19% à plus de 10% sous la référence APCA. Égaler 16px Helvetica demande 14.6 à 20.3 px.
Marque
Créer une charte graphique d'une page, avec les paires de couleurs conformes
Le contenu d'une charte graphique d'une page et sa matrice des combinaisons : 4 couleurs, 12 paires, chacune AA, grand texte seul ou refusée.
Tailles de favicon : les fichiers vraiment nécessaires et comment les créer
Les fichiers favicon nécessaires : un ICO, six PNG de 16 à 512 pixels, un manifeste et quatre balises head. Et votre logo tient-il à 16px ?
Quelle part d'un QR code un logo peut-il couvrir ? Nous l'avons mesuré
Tous les générateurs disent 30 %. Environ 5 000 décodages situent le plafond réel du logo à 4 % en niveau L et 19 % en H. Pourquoi 30 % est faux.
Rédaction
Comment ajouter des numéros de page à un PDF, à partir de n'importe quelle page
Numérotez un PDF dans le navigateur : couverture vierge, départ à n'importe quel nombre, page de départ et premier numéro réglés séparément.
Comment ajouter un filigrane à un PDF, et ce qu'un filigrane peut ou ne peut pas empêcher
Apposez DRAFT ou un nom sur chaque page d'un PDF dans le navigateur, avec la bonne opacité et le bon angle, et pourquoi un filigrane ne verrouille rien.
Comment convertir des photos ou des scans en un seul PDF
Réunissez des photos JPEG ou PNG dans un PDF sans les envoyer en ligne : ordre des pages, A4 ou taille de l'image, et ni pages couchées ni pages géantes.
Comment convertir les pages d'un PDF en JPG à la bonne résolution
PDF en JPG à 72, 150 ou 300 dpi : la taille en pixels d'une page A4 (2480 × 3508 à 300) et pourquoi 300 dpi donne quatre fois plus de pixels que 150.
Comment convertir un PDF en Markdown pour vos notes ou un chat IA
Convertissez un PDF en Markdown avec un titre par page, pour vos notes ou un chat IA, et ce qui se perd : tableaux, listes et titres internes aux pages.
Comment diviser un PDF en plusieurs fichiers ou extraire une plage de pages
Extrayez les pages 3 à 7 dans un fichier, coupez un document en parties égales ou enregistrez chaque page à part, dans le navigateur, limites précisées.
Extraire le texte d'un PDF, et pourquoi certains PDF ne donnent rien
Récupérez le texte d'un PDF dans le navigateur. Un scan ne donne rien : pas de couche de texte, et l'outil ne fait pas d'OCR. Colonnes parfois mêlées.
Faire pivoter un PDF et l'enregistrer dans le bon sens
Faites pivoter les pages couchées d'un PDF et enregistrez la rotation dans le fichier, pas seulement à l'écran. Stockage, pièges, Preview et qpdf.
Protéger un PDF par mot de passe sans l'envoyer en ligne
Chiffrez un PDF en AES-256 dans le navigateur : le mot de passe n'atteint aucun serveur. Mots de passe utilisateur/propriétaire, RC4, qpdf, Preview.
Réorganiser et supprimer des pages d'un PDF
Réordonnez les pages d'un PDF par glisser-déposer, supprimez-les d'un clic sur des vignettes créées dans le navigateur, et vérifiez la numérotation.
Comment rogner les marges d'un PDF, et pourquoi le rognage masque au lieu de supprimer
Rognez les marges d'un PDF en points, dans le navigateur. La CropBox change, la MediaBox et son contenu restent : rogner n'est jamais caviarder.
Supprimer le mot de passe d'un PDF que vous pouvez déjà ouvrir
Retirez le mot de passe d'un PDF que vous pouvez ouvrir, dans le navigateur. Pourquoi l'outil le demande, ce que garde la copie, et Preview ou qpdf.
Comment voir et supprimer le nom de l'auteur et les autres métadonnées d'un PDF
Voyez et effacez le titre, l'auteur et le sujet d'un PDF sans l'envoyer en ligne, et ce qui reste : mots-clés, créateur, dates et paquet XMP.
Ce que la compression PDF sans perte fait vraiment gagner, mesuré sur onze fichiers
Compression PDF sans perte, onze fichiers : texte réduit de 0.8 % à 6.5 %, images de moins de 0.05 %, pages supprimées conservées, désormais corrigé.
Pourquoi fusionner un PDF chiffré peut donner des pages blanches, mesures à l'appui
Un PDF AES-256 fusionné via pdf-lib et via @cantoo/pdf-lib : l'un a donné trois pages blanches et 49 caractères, l'autre le document entier.
Vidéo et audio
Comment extraire l'audio d'une vidéo en MP3, sans l'envoyer en ligne
Extrayez la bande son d'un MP4, MOV, WebM ou MKV en MP3 dans le navigateur : la limite de 13 minutes, le choix du débit, et ffmpeg.
Couper une vidéo sans réencodage : où tombe vraiment la coupe
Six fichiers mesurés : une coupe par copie part 4.06 s trop tôt en moyenne avec x264 par défaut, 0.46 s avec une image clé par 1 s ; l'excès est masqué.
Vidéo en GIF : le poids en octets par pixel et par image, mesuré
50 images en 480 × 270 : en GIF, une photo animée coûte 0.644 octet par pixel et par image, 53 fois le H.264 ; un enregistrement d'écran 0.111, 5.4 fois.
Convertisseurs
Comment agrandir une image sans qu'elle devienne floue, et ce que l'agrandissement ne peut pas faire
Agrandissez avec Lanczos3, comparez au moteur du navigateur sur votre propre image et arrêtez-vous à 4× : à 2×, trois pixels sur quatre sont interpolés.
Comment compresser un PNG sans perte de qualité
oxipng garde chaque pixel intact : un graphique en aplats passe de 21 493 à 3 350 octets, une photo s'allège de 14%. Ce que « sans perte » veut dire.
Comment convertir une image en data URI base64, et quand s'en abstenir
Le base64 ajoute un tiers à tout fichier, et une copie intégrée n'a pas son propre cache. Créer une data URI, et le seuil de 4 Ko à ne pas dépasser.
Créer un GIF animé à partir d'images, sans alourdir le fichier
Un GIF stocke chaque image en entier : son poids vaut pixels × images × un coût fixé par le contenu. Créez-en un et voyez le poids avant d'exporter.
Pourquoi les convertisseurs de pixels en pouces se contredisent, et quelle réponse vous concerne
Les mêmes 1920 pixels font 20 pouces en CSS, 26.67 à 72 ppi et 6.4 à 300 ppi. Pourquoi les convertisseurs divergent, et quel sens retenir.
Comment recadrer, faire pivoter et redimensionner une image en une seule fois sans perte de netteté
Recadrez, pivotez, redimensionnez, encodez une fois. Le coût des outils séparés, le flou des fortes réductions, et ce que change Lanczos3.
Réduire la taille d'un SVG sans le casser
Réduisez un SVG avec SVGO sans le casser : moins de décimales, viewBox et title conservés, ids vérifiés, et un gain jugé sur la taille gzip.
PNG en WebP : combien on gagne vraiment, mesuré sur onze images
PNG en WebP, qualité 0.82, Chromium : photos −92 % à −97 %, logo en aplats −69 %, icônes sous 128 px alourdies, jusqu'à +116 % à 16 px.