Blog

Captures d’écran d’apps en mode sombre, toujours lisibles

Publié le · mode sombre, captures d’écran, lisibilité, annotation

Captures d’écran d’apps en mode sombre, toujours lisibles

Les interfaces sombres punissent le balisage négligé : traits fins invisibles, couleurs qui jurent, légendes qui s’effacent. Des réglages simples pour des captures lisibles.

Les interfaces en mode sombre sont nettes à l’écran et deviennent illisibles dans la documentation. Les bordures grises fines disparaissent sur une page blanche, une annotation rouge se fond dans une UI rouge sombre, et une capture collée dans une présentation claire ressemble à un trou noir. Quelques choix règlent l’essentiel.

Annotez en fonction du fond

La palette d’annotation par défaut est réglée pour les interfaces claires. Sur une UI sombre, inversez la logique :

  • Utilisez des couleurs claires pour les traits : blanc, le bleu clair ou un vert vif. Le rouge foncé et le bleu foncé disparaissent sur un fond sombre.
  • Utilisez le style de texte Contour, pas Standard. Contour dessine un trait contrasté autour de chaque glyphe : une étiquette blanche survit aussi bien sur une carte sombre que sur une zone claire.
  • Augmentez l’épaisseur d’un cran. Un trait de 2 px qui se lit bien sur blanc paraît fin sur #1c1c1e.
  • Évitez les surlignages translucides sur du texte sombre. Un surligneur peu opaque sur un texte clair-sur-sombre réduit encore le contraste ; surlignez plutôt le fond de la ligne ou utilisez une forme.

Si vous annotez régulièrement la même app, enregistrez les couleurs retenues dans la palette pour que chaque capture soit cohérente.

Faites travailler le cadre avec l’image

Une capture sombre sur une page blanche a besoin d’une limite ; sinon les bords disparaissent et l’image ressemble à un rectangle de vide flottant.

  • Recadrez serré pour que la zone sombre soit clairement le sujet.
  • Ajoutez un fond clair dans l’éditeur d’images (Pro) quand la capture part dans un document ou une présentation. Un cadre gris clair ou blanc sépare l’image de la page et supprime l’effet « trou noir ».
  • Ajoutez un léger rayon de coin et une ombre dans le même panneau ; sur une capture sombre, l’ombre travaille plus que sur une capture claire.
  • Gardez le même rapport d’aspect d’une capture à l’autre, surtout pour des présentations.
POSER UNE CAPTURE SOMBRE SUR UN FOND · 1280 × 800

Choisissez le bon moment pour capturer

Les UI sombres ont souvent des états transitoires qui changent le contraste : surbrillances au survol, anneaux de focus, squelettes de chargement. Capturez l’état qui porte l’information, pas celui qui se trouve sous le pointeur.

  • Éloignez le pointeur de l’élément que vous documentez, sauf si le curseur fait partie du propos.
  • Attendez la fin des animations ; une capture d’une notification à moitié effacée ne sert à rien.
  • Si une infobulle est le sujet, capturez-la pendant qu’elle est ouverte ; l’image figée la conserve.

Balisez avec des formes avant de mettre du texte

Sur les interfaces sombres, les légendes texte rivalisent avec les libellés de l’UI. Préférez :

  • Un contour de forme dans une couleur vive autour d’une carte ou d’une ligne.
  • Un numéro à côté de l’élément, avec l’explication sous l’image.
  • Un projecteur (Pro) pour assombrir le reste d’un écran sombre chargé ; il augmente le contraste sans changer la palette de l’app.
  • Une loupe (Pro) pour une minuscule icône d’état qui est le sujet de la capture.

Utilisez du texte quand une phrase est vraiment nécessaire, et gardez-la en dehors de la zone la plus chargée de l’image.

Surligneur sur une interface sombre

Vérifiez le résultat là où il sera lu

Une capture qui paraît bonne dans l’écran de capture peut échouer à destination :

  • Dans le thème clair d’une messagerie, une capture sombre peut avoir besoin d’une bordure pour ne pas se fondre dans le fond des messages.
  • Dans un wiki en thème sombre, c’est la capture claire qui ressort ; gardez un traitement cohérent par document plutôt que par capture.
  • À l’impression, les fonds sombres consomment de l’encre et cachent les traits fins ; utilisez le fond clair ou n’inversez que pour l’impression.

Le choix par défaut le plus sûr pour des destinations mélangées est un fond clair avec une petite marge, un rayon cohérent et une ombre douce.

Une courte liste de contrôle

VérificationPourquoi
Les traits sont-ils assez clairs ?La palette sombre cache les couleurs sombres
Le texte est-il en style Contour ?Il survit aux fonds chargés
L’image est-elle encadrée ?Les bords sombres disparaissent sur une page blanche
L’état est-il le définitif ?Pas de notification ni de chargement à moitié effacés
Le curseur est-il hors du chemin ?Il rivalise avec l’UI
Le traitement est-il cohérent ?Une série doit ressembler à une série

Questions fréquentes

Pourquoi mes annotations disparaissent-elles sur des captures sombres ?

Les traits rouge foncé, bleu foncé et noir n’ont presque aucun contraste sur une interface sombre. Passez au blanc ou à une couleur d’accent vive, utilisez le style de texte Contour et augmentez l’épaisseur d’un cran.

Faut-il inverser une capture sombre pour un document ?

En général, non ; une UI inversée paraît étrange et les couleurs ne correspondent plus à l’app. Placez plutôt la capture sur un fond clair avec une marge et une bordure, qui la sépare de la page sans changer ses couleurs.

Faut-il Pro pour les fonds ?

Oui, les arrière-plans d’image sont une fonction Pro. Le recadrage, l’annotation et l’épinglage de la capture sont gratuits ; les réglages de fond et de cadre font partie de Pro.

Votre prochaine capture est à un raccourci de vous.

macOS 14.4+ (Apple Silicon et Intel) · Windows 10+ (64 bits)