[{"data":1,"prerenderedAt":809},["Reactive",2],{"content-query-krJnE3Vgsp":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"heading":8,"subheading":9,"head":10,"body":50,"_type":804,"_id":805,"_source":806,"_file":807,"_extension":808},"/tools/annotation-color-finder","tools",false,"","Annotation Color Finder","A tool for documentation teams. Upload a few screenshots of your product and find the annotation colors that stand apart from your interface, so your arrows, boxes and callouts are seen first. Scored with a custom model built on visual search research.",{"title":11,"description":12,"link":13,"meta":17},"Annotation Color Finder for Screenshots | LaunchBrightly","Upload product screenshots and find the annotation colors that stand apart from your interface. Free, research-backed, and it runs entirely in your browser.",[14],{"rel":15,"href":16},"canonical","https://launchbrightly.com/tools/annotation-color-finder",[18,21,24,27,29,31,33,36,39,42,44,46,48],{"name":19,"content":20},"keywords","Annotation Color, Screenshot Annotation, Color Contrast, Screenshot, Screenshots, Documentation, Help Center",{"name":22,"content":23},"copyright","© 2026 LaunchBrightly, Inc.",{"property":25,"content":26},"og:type","website",{"property":28,"content":16},"og:url",{"property":30,"content":11},"og:title",{"property":32,"content":12},"og:description",{"property":34,"content":35},"og:image","https://launchbrightly.com/images/tools/annotation-color-finder-og.png",{"name":37,"content":38},"twitter:site","@launchbrightly",{"name":40,"content":41},"twitter:card","summary_large_image",{"name":43,"content":16},"twitter:url",{"name":45,"content":11},"twitter:title",{"name":47,"content":12},"twitter:description",{"name":49,"content":35},"twitter:image",{"type":51,"children":52,"toc":788},"root",[53,58,100,648],{"type":54,"tag":55,"props":56,"children":57},"element","annotation-color-finder",{},[],{"type":54,"tag":59,"props":60,"children":62},"section-wide",{"id":61},"applyit",[63,70],{"type":54,"tag":64,"props":65,"children":66},"p",{},[67],{"type":68,"value":69},"text","Apply it to every screenshot, automatically",{"type":54,"tag":71,"props":72,"children":73},"template",{"v-slot:lead":7},[74,88],{"type":54,"tag":64,"props":75,"children":76},{},[77,79,86],{"type":68,"value":78},"Set your annotation color once in a ",{"type":54,"tag":80,"props":81,"children":83},"a",{"href":82},"/product/custom-styling",[84],{"type":68,"value":85},"Style Template",{"type":68,"value":87}," to\nautomatically apply it across all your annotated screenshots, using LaunchBrightly,\nthe platform that keeps screenshots fresh across all articles.",{"type":54,"tag":89,"props":90,"children":94},"link-button",{"align":91,"event":92,"link":93},"center","sign_up","https://app.launchbrightly.com/signup",[95],{"type":54,"tag":64,"props":96,"children":97},{},[98],{"type":68,"value":99},"Create a free account",{"type":54,"tag":101,"props":102,"children":103},"prose-for-wide",{},[104,111,124,129,136,141,146,152,165,171,176,187,193,198,204,209,215,220,226,231,286,291,297,330,336],{"type":54,"tag":105,"props":106,"children":108},"h2",{"id":107},"what-makes-a-good-annotation-color",[109],{"type":68,"value":110},"What makes a good annotation color",{"type":54,"tag":64,"props":112,"children":113},{},[114,116,122],{"type":68,"value":115},"An annotation has one job: to be seen first, and to be recognized as something added on top of the screenshot. We covered the practical side in ",{"type":54,"tag":80,"props":117,"children":119},{"href":118},"/blog/best-practices-for-product-screenshot-annotations-in-your-documentation",[120],{"type":68,"value":121},"best practices for screenshot annotations",{"type":68,"value":123},". This tool puts numbers on it.",{"type":54,"tag":64,"props":125,"children":126},{},[127],{"type":68,"value":128},"Research on how people find one colored item among many points to three things that matter (Healey, 1996). The tool scores each of them, plus two checks for legibility.",{"type":54,"tag":130,"props":131,"children":133},"h3",{"id":132},"_1-distance-from-the-colors-your-interface-uses",[134],{"type":68,"value":135},"1. Distance from the colors your interface uses",{"type":54,"tag":64,"props":137,"children":138},{},[139],{"type":68,"value":140},"The more a target resembles the items around it, the longer it takes to find (Duncan & Humphreys, 1989). Once the color difference is large enough, the target is found at a glance however cluttered the display is (Nagy & Sanchez, 1990).",{"type":54,"tag":64,"props":142,"children":143},{},[144],{"type":68,"value":145},"The tool reads a scaled-down copy of each screenshot (320 pixels on its longest side), groups the colors into a 3D color map, and measures how far a candidate color is from the nearest color your interface really uses. Distance is measured with CIEDE2000, the color-difference formula standardized by the CIE. The result is a number called ΔE (\"delta E\"): the size of the difference between two colors as people see it. A ΔE of 1 is the smallest difference you can notice side by side; at 30 or more the two colors are unmistakably different. A single stray pixel does not count as \"used\"; a small button does.",{"type":54,"tag":130,"props":147,"children":149},{"id":148},"_2-outside-the-range-of-your-interface-colors",[150],{"type":68,"value":151},"2. Outside the range of your interface colors",{"type":54,"tag":64,"props":153,"children":154},{},[155,157,163],{"type":68,"value":156},"Distance alone is not enough. A color that sits ",{"type":54,"tag":158,"props":159,"children":160},"em",{},[161],{"type":68,"value":162},"between",{"type":68,"value":164}," two colors already on screen is hard to find even when it is far from both; a color outside the range the others span is easy (D'Zmura, 1991; Bauer, Jolicoeur & Cowan, 1999). So the tool draws the outline of your interface's colors and checks that the candidate falls outside it. You can see this outline in the color map.",{"type":54,"tag":130,"props":166,"children":168},{"id":167},"_3-a-color-name-your-interface-does-not-use",[169],{"type":68,"value":170},"3. A color name your interface does not use",{"type":54,"tag":64,"props":172,"children":173},{},[174],{"type":68,"value":175},"At equal distance, a target is harder to find when it shares a color name with the items around it: a blue among other blues (Healey, 1996; Daoutis, Pilling & Davies, 2006). The tool sorts every pixel into one of eleven basic color names and prefers a color whose name is rare or absent in your interface.",{"type":54,"tag":64,"props":177,"children":178},{},[179,185],{"type":54,"tag":180,"props":181,"children":182},"strong",{},[183],{"type":68,"value":184},"This is why black rarely works.",{"type":68,"value":186}," In a light interface, black can be the single most distant color. But text, icons, borders and shadows are already black and gray, so a black box reads as part of the interface. Black, gray and white fail this criterion in almost every screenshot.",{"type":54,"tag":130,"props":188,"children":190},{"id":189},"_4-contrast",[191],{"type":68,"value":192},"4. Contrast",{"type":54,"tag":64,"props":194,"children":195},{},[196],{"type":68,"value":197},"A distinct hue still has to be visible. WCAG 2.2 asks for a contrast ratio of at least 3:1 for graphics that are needed to understand content. The tool reports how much of your screenshot area the color is clearly visible against, with full credit at 3:1 and partial credit down to 1.5:1. This is what rules out yellow on a white interface.",{"type":54,"tag":130,"props":199,"children":201},{"id":200},"_5-color-blind-safety",[202],{"type":68,"value":203},"5. Color-blind safety",{"type":54,"tag":64,"props":205,"children":206},{},[207],{"type":68,"value":208},"Roughly 1 in 12 men has a color vision deficiency. The tool simulates the three main types (Machado, Oliveira & Fernandes, 2009), repeats the distance measurement for each, and scores the worst case.",{"type":54,"tag":130,"props":210,"children":212},{"id":211},"why-only-vivid-colors-are-suggested",[213],{"type":68,"value":214},"Why only vivid colors are suggested",{"type":54,"tag":64,"props":216,"children":217},{},[218],{"type":68,"value":219},"In a study of 123 people, colors at maximum saturation and brightness attracted the most attention on every background tested, chosen 67% of the time (Camgöz, Yener & Güvenç, 2004). Muted colors such as brown or olive can be far from an interface and still not draw the eye, so the suggestions are limited to vivid colors. Your brand colors are scored whatever they are.",{"type":54,"tag":105,"props":221,"children":223},{"id":222},"how-the-score-is-calculated",[224],{"type":68,"value":225},"How the score is calculated",{"type":54,"tag":64,"props":227,"children":228},{},[229],{"type":68,"value":230},"Each of the five criteria gets a score from 0 to 1, and the total is their weighted geometric mean: distance 35%, contrast 20%, color range 15%, color name 15%, color-blind safety 15%. A geometric mean is used so that failing one criterion pulls the total down sharply; a color has to do reasonably on all five.",{"type":54,"tag":232,"props":233,"children":234},"ul",{},[235,246,256,266,276],{"type":54,"tag":236,"props":237,"children":238},"li",{},[239,244],{"type":54,"tag":180,"props":240,"children":241},{},[242],{"type":68,"value":243},"Distance:",{"type":68,"value":245}," 0 at ΔE 5 or less, 1 at ΔE 30 or more.",{"type":54,"tag":236,"props":247,"children":248},{},[249,254],{"type":54,"tag":180,"props":250,"children":251},{},[252],{"type":68,"value":253},"Contrast:",{"type":68,"value":255}," full credit for each pixel at 3:1 or better, none below 1.5:1.",{"type":54,"tag":236,"props":257,"children":258},{},[259,264],{"type":54,"tag":180,"props":260,"children":261},{},[262],{"type":68,"value":263},"Color range:",{"type":68,"value":265}," 1 when the color is clearly outside the outline of your interface colors, 0 when inside.",{"type":54,"tag":236,"props":267,"children":268},{},[269,274],{"type":54,"tag":180,"props":270,"children":271},{},[272],{"type":68,"value":273},"Color name:",{"type":68,"value":275}," 1 when under 0.03% of your interface shares the name, 0 at 3% or more.",{"type":54,"tag":236,"props":277,"children":278},{},[279,284],{"type":54,"tag":180,"props":280,"children":281},{},[282],{"type":68,"value":283},"Color-blind safety:",{"type":68,"value":285}," the distance score, for the worst of the three simulations.",{"type":54,"tag":64,"props":287,"children":288},{},[289],{"type":68,"value":290},"The thresholds are set high on purpose. Color differences are harder to see on small and thin marks than on large areas (Stone, Szafir & Setlur, 2014; Szafir, 2018), and annotation outlines are thin and often scaled down in a help center. A slightly thicker outline helps for the same reason.",{"type":54,"tag":105,"props":292,"children":294},{"id":293},"what-this-tool-does-not-tell-you",[295],{"type":68,"value":296},"What this tool does not tell you",{"type":54,"tag":232,"props":298,"children":299},{},[300,305,310,315,320,325],{"type":54,"tag":236,"props":301,"children":302},{},[303],{"type":68,"value":304},"The studies above measured how fast people find colored targets in controlled displays. No study we know of tests annotation colors on product screenshots, so the model applies that research to a new setting. The weights are our judgment and are listed above so you can disagree with them.",{"type":54,"tag":236,"props":306,"children":307},{},[308],{"type":68,"value":309},"The evidence on color names is mixed. One study found that color categories did not explain which pale colors were found fastest (Lindsey et al., 2010). That is why color name carries less weight than distance.",{"type":54,"tag":236,"props":311,"children":312},{},[313],{"type":68,"value":314},"The tool has no built-in preference for red. Red often wins because few interfaces use much of it, and it will lose when yours does.",{"type":54,"tag":236,"props":316,"children":317},{},[318],{"type":68,"value":319},"Color names are assigned by a simple rule, and a mid-tone can land on either side of a boundary such as blue and purple.",{"type":54,"tag":236,"props":321,"children":322},{},[323],{"type":68,"value":324},"CIEDE2000 was built to measure small color differences, and large differences are measured less precisely. In a 2023 test across the available human color-difference data, a newer model, CAM16-UCS, performed best (Luo et al., 2023). We use CIEDE2000 because it is the established CIE standard.",{"type":54,"tag":236,"props":326,"children":327},{},[328],{"type":68,"value":329},"Colors mean things. If your interface uses red for errors, a red annotation may read as a warning even when it scores well.",{"type":54,"tag":130,"props":331,"children":333},{"id":332},"references",[334],{"type":68,"value":335},"References",{"type":54,"tag":337,"props":338,"children":341},"notabene",{"className":339},[340],"text-gray-500",[342],{"type":54,"tag":232,"props":343,"children":344},{},[345,368,388,408,428,448,468,488,508,528,548,568,588,608,628],{"type":54,"tag":236,"props":346,"children":347},{},[348,350,359,361,366],{"type":68,"value":349},"Bauer, B., Jolicoeur, P., & Cowan, W. B. (1999). ",{"type":54,"tag":80,"props":351,"children":356},{"href":352,"rel":353,"target":355},"https://doi.org/10.1016/S0042-6989(98)00302-2",[354],"nofollow","_blank",[357],{"type":68,"value":358},"Convex hull test of the linear separability hypothesis in visual search",{"type":68,"value":360},". ",{"type":54,"tag":158,"props":362,"children":363},{},[364],{"type":68,"value":365},"Vision Research, 39",{"type":68,"value":367},", 2681–2695.",{"type":54,"tag":236,"props":369,"children":370},{},[371,373,380,381,386],{"type":68,"value":372},"Camgöz, N., Yener, C., & Güvenç, D. (2004). ",{"type":54,"tag":80,"props":374,"children":377},{"href":375,"rel":376,"target":355},"https://doi.org/10.1002/col.10214",[354],[378],{"type":68,"value":379},"Effects of hue, saturation, and brightness: Part 2: Attention",{"type":68,"value":360},{"type":54,"tag":158,"props":382,"children":383},{},[384],{"type":68,"value":385},"Color Research & Application, 29",{"type":68,"value":387},", 20–28.",{"type":54,"tag":236,"props":389,"children":390},{},[391,393,400,401,406],{"type":68,"value":392},"Daoutis, C. A., Pilling, M., & Davies, I. R. L. (2006). ",{"type":54,"tag":80,"props":394,"children":397},{"href":395,"rel":396,"target":355},"https://doi.org/10.1080/13506280500158670",[354],[398],{"type":68,"value":399},"Categorical effects in visual search for colour",{"type":68,"value":360},{"type":54,"tag":158,"props":402,"children":403},{},[404],{"type":68,"value":405},"Visual Cognition, 14",{"type":68,"value":407},", 217–240.",{"type":54,"tag":236,"props":409,"children":410},{},[411,413,420,421,426],{"type":68,"value":412},"Duncan, J., & Humphreys, G. W. (1989). ",{"type":54,"tag":80,"props":414,"children":417},{"href":415,"rel":416,"target":355},"https://doi.org/10.1037/0033-295X.96.3.433",[354],[418],{"type":68,"value":419},"Visual search and stimulus similarity",{"type":68,"value":360},{"type":54,"tag":158,"props":422,"children":423},{},[424],{"type":68,"value":425},"Psychological Review, 96",{"type":68,"value":427},", 433–458.",{"type":54,"tag":236,"props":429,"children":430},{},[431,433,440,441,446],{"type":68,"value":432},"D'Zmura, M. (1991). ",{"type":54,"tag":80,"props":434,"children":437},{"href":435,"rel":436,"target":355},"https://sites.socsci.uci.edu/~mdzmura/pubs/DZmura1991ColorInVisualSearch.pdf",[354],[438],{"type":68,"value":439},"Color in visual search",{"type":68,"value":360},{"type":54,"tag":158,"props":442,"children":443},{},[444],{"type":68,"value":445},"Vision Research, 31",{"type":68,"value":447},", 951–966.",{"type":54,"tag":236,"props":449,"children":450},{},[451,453,460,461,466],{"type":68,"value":452},"Garg, S., Padalkar, K., & Mueller, K. (2011). ",{"type":54,"tag":80,"props":454,"children":457},{"href":455,"rel":456,"target":355},"https://doi.org/10.1007/978-3-642-24028-7_58",[354],[458],{"type":68,"value":459},"Magic Marker: A color analytics interface for image annotation",{"type":68,"value":360},{"type":54,"tag":158,"props":462,"children":463},{},[464],{"type":68,"value":465},"Advances in Visual Computing, ISVC 2011",{"type":68,"value":467},", 629–640. An earlier system that scores annotation colors from the colors of the image.",{"type":54,"tag":236,"props":469,"children":470},{},[471,473,480,481,486],{"type":68,"value":472},"Healey, C. G. (1996). ",{"type":54,"tag":80,"props":474,"children":477},{"href":475,"rel":476,"target":355},"https://www.cs.ubc.ca/sites/default/files/tr/1996/TR-96-10_0.pdf",[354],[478],{"type":68,"value":479},"Choosing effective colours for data visualization",{"type":68,"value":360},{"type":54,"tag":158,"props":482,"children":483},{},[484],{"type":68,"value":485},"Proceedings of IEEE Visualization '96",{"type":68,"value":487},", 263–270.",{"type":54,"tag":236,"props":489,"children":490},{},[491,493,500,501,506],{"type":68,"value":492},"Lindsey, D. T., Brown, A. M., Reijnen, E., Rich, A. N., Kuzmova, Y. I., & Wolfe, J. M. (2010). ",{"type":54,"tag":80,"props":494,"children":497},{"href":495,"rel":496,"target":355},"https://doi.org/10.1177/0956797610379861",[354],[498],{"type":68,"value":499},"Color channels, not color appearance or color categories, guide visual search for desaturated color targets",{"type":68,"value":360},{"type":54,"tag":158,"props":502,"children":503},{},[504],{"type":68,"value":505},"Psychological Science, 21",{"type":68,"value":507},"(9), 1208–1214.",{"type":54,"tag":236,"props":509,"children":510},{},[511,513,520,521,526],{"type":68,"value":512},"Luo, M. R., Xu, Q., Pointer, M., Melgosa, M., Cui, G., Li, C., Xiao, K., & Huang, M. (2023). ",{"type":54,"tag":80,"props":514,"children":517},{"href":515,"rel":516,"target":355},"https://doi.org/10.1002/col.22844",[354],[518],{"type":68,"value":519},"A comprehensive test of colour-difference formulae and uniform colour spaces using available visual datasets",{"type":68,"value":360},{"type":54,"tag":158,"props":522,"children":523},{},[524],{"type":68,"value":525},"Color Research & Application, 48",{"type":68,"value":527},"(3), 267–282.",{"type":54,"tag":236,"props":529,"children":530},{},[531,533,540,541,546],{"type":68,"value":532},"Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009). ",{"type":54,"tag":80,"props":534,"children":537},{"href":535,"rel":536,"target":355},"https://doi.org/10.1109/TVCG.2009.113",[354],[538],{"type":68,"value":539},"A physiologically-based model for simulation of color vision deficiency",{"type":68,"value":360},{"type":54,"tag":158,"props":542,"children":543},{},[544],{"type":68,"value":545},"IEEE Transactions on Visualization and Computer Graphics, 15",{"type":68,"value":547},", 1291–1298.",{"type":54,"tag":236,"props":549,"children":550},{},[551,553,560,561,566],{"type":68,"value":552},"Nagy, A. L., & Sanchez, R. R. (1990). ",{"type":54,"tag":80,"props":554,"children":557},{"href":555,"rel":556,"target":355},"https://doi.org/10.1364/JOSAA.7.001209",[354],[558],{"type":68,"value":559},"Critical color differences determined with a visual search task",{"type":68,"value":360},{"type":54,"tag":158,"props":562,"children":563},{},[564],{"type":68,"value":565},"Journal of the Optical Society of America A, 7",{"type":68,"value":567},", 1209–1217.",{"type":54,"tag":236,"props":569,"children":570},{},[571,573,580,581,586],{"type":68,"value":572},"Sharma, G., Wu, W., & Dalal, E. N. (2005). ",{"type":54,"tag":80,"props":574,"children":577},{"href":575,"rel":576,"target":355},"https://hajim.rochester.edu/ece/sites/gsharma/ciede2000/",[354],[578],{"type":68,"value":579},"The CIEDE2000 color-difference formula: Implementation notes, supplementary test data, and mathematical observations",{"type":68,"value":360},{"type":54,"tag":158,"props":582,"children":583},{},[584],{"type":68,"value":585},"Color Research & Application, 30",{"type":68,"value":587},", 21–30.",{"type":54,"tag":236,"props":589,"children":590},{},[591,593,600,601,606],{"type":68,"value":592},"Stone, M., Szafir, D. A., & Setlur, V. (2014). ",{"type":54,"tag":80,"props":594,"children":597},{"href":595,"rel":596,"target":355},"https://doi.org/10.2352/CIC.2014.22.1.art00045",[354],[598],{"type":68,"value":599},"An engineering model for color difference as a function of size",{"type":68,"value":360},{"type":54,"tag":158,"props":602,"children":603},{},[604],{"type":68,"value":605},"Proceedings of the IS&T 22nd Color and Imaging Conference",{"type":68,"value":607},", 253–258.",{"type":54,"tag":236,"props":609,"children":610},{},[611,613,620,621,626],{"type":68,"value":612},"Szafir, D. A. (2018). ",{"type":54,"tag":80,"props":614,"children":617},{"href":615,"rel":616,"target":355},"https://danielleszafir.com/colordiff_vis2017.pdf",[354],[618],{"type":68,"value":619},"Modeling color difference for visualization design",{"type":68,"value":360},{"type":54,"tag":158,"props":622,"children":623},{},[624],{"type":68,"value":625},"IEEE Transactions on Visualization and Computer Graphics, 24",{"type":68,"value":627},", 392–401.",{"type":54,"tag":236,"props":629,"children":630},{},[631,633,640,641,646],{"type":68,"value":632},"W3C. ",{"type":54,"tag":80,"props":634,"children":637},{"href":635,"rel":636,"target":355},"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html",[354],[638],{"type":68,"value":639},"Understanding Success Criterion 1.4.11: Non-text Contrast",{"type":68,"value":360},{"type":54,"tag":158,"props":642,"children":643},{},[644],{"type":68,"value":645},"Web Content Accessibility Guidelines 2.2",{"type":68,"value":647},".",{"type":54,"tag":649,"props":650,"children":651},"faq-wide",{},[652,657],{"type":54,"tag":64,"props":653,"children":654},{},[655],{"type":68,"value":656},"Frequently asked questions",{"type":54,"tag":71,"props":658,"children":659},{"v-slot:FAQs":7},[660,677,693,709,725,741,757],{"type":54,"tag":661,"props":662,"children":663},"faq-card",{},[664,669],{"type":54,"tag":64,"props":665,"children":666},{},[667],{"type":68,"value":668},"Are my screenshots uploaded anywhere?",{"type":54,"tag":71,"props":670,"children":671},{"v-slot:body":7},[672],{"type":54,"tag":64,"props":673,"children":674},{},[675],{"type":68,"value":676},"No. The images are read and analyzed by your own browser. Nothing is sent to LaunchBrightly or anyone else, so it is safe to use screenshots of unreleased features or internal tools.",{"type":54,"tag":661,"props":678,"children":679},{},[680,685],{"type":54,"tag":64,"props":681,"children":682},{},[683],{"type":68,"value":684},"How many screenshots should I use?",{"type":54,"tag":71,"props":686,"children":687},{"v-slot:body":7},[688],{"type":54,"tag":64,"props":689,"children":690},{},[691],{"type":68,"value":692},"Three to five screens that show the range of your product: a dashboard, a settings page, a form, and anything with unusual colors such as charts or status labels. One annotation color has to work on all of them.",{"type":54,"tag":661,"props":694,"children":695},{},[696,701],{"type":54,"tag":64,"props":697,"children":698},{},[699],{"type":68,"value":700},"Can I upload screenshots that already have annotations?",{"type":54,"tag":71,"props":702,"children":703},{"v-slot:body":7},[704],{"type":54,"tag":64,"props":705,"children":706},{},[707],{"type":68,"value":708},"No, use clean ones. The tool treats every color in the image as part of your interface, so an existing red arrow or box counts as \"your product uses red\" and the tool will steer you away from the color you may want. Use the raw screenshots, before any arrows, boxes, highlights or blur are added.",{"type":54,"tag":661,"props":710,"children":711},{},[712,717],{"type":54,"tag":64,"props":713,"children":714},{},[715],{"type":68,"value":716},"Why did my brand color score so low?",{"type":54,"tag":71,"props":718,"children":719},{"v-slot:body":7},[720],{"type":54,"tag":64,"props":721,"children":722},{},[723],{"type":68,"value":724},"Usually because your product already uses it for buttons, links and highlights. An annotation in the same color looks like part of the interface. The breakdown under each color shows which criterion it failed.",{"type":54,"tag":661,"props":726,"children":727},{},[728,733],{"type":54,"tag":64,"props":729,"children":730},{},[731],{"type":68,"value":732},"We have light and dark mode. Which should I upload?",{"type":54,"tag":71,"props":734,"children":735},{"v-slot:body":7},[736],{"type":54,"tag":64,"props":737,"children":738},{},[739],{"type":68,"value":740},"Both. The suggestions are scored against everything you upload, so including dark-mode screens finds a color that holds up in each. If no single color scores well, use one per mode.",{"type":54,"tag":661,"props":742,"children":743},{},[744,749],{"type":54,"tag":64,"props":745,"children":746},{},[747],{"type":68,"value":748},"Should I just use the top suggestion?",{"type":54,"tag":71,"props":750,"children":751},{"v-slot:body":7},[752],{"type":54,"tag":64,"props":753,"children":754},{},[755],{"type":68,"value":756},"Treat the score as a shortlist. Check the preview on a few screenshots, try a thicker outline, and consider what the color already means in your product before you standardize on it.",{"type":54,"tag":661,"props":758,"children":759},{},[760,765],{"type":54,"tag":64,"props":761,"children":762},{},[763],{"type":68,"value":764},"How do I apply the color to all my screenshots?",{"type":54,"tag":71,"props":766,"children":767},{"v-slot:body":7},[768],{"type":54,"tag":64,"props":769,"children":770},{},[771,773,778,780,786],{"type":68,"value":772},"In LaunchBrightly, set it once in a ",{"type":54,"tag":80,"props":774,"children":775},{"href":82},[776],{"type":68,"value":777},"Custom Style Template",{"type":68,"value":779}," and every automated screenshot uses it. Change it later and ",{"type":54,"tag":80,"props":781,"children":783},{"href":782},"/product/auto-reprocess",[784],{"type":68,"value":785},"reprocess all your screenshots",{"type":68,"value":787}," in one click.",{"title":7,"searchDepth":789,"depth":789,"links":790},2,[791,800,801],{"id":107,"depth":789,"text":110,"children":792},[793,795,796,797,798,799],{"id":132,"depth":794,"text":135},3,{"id":148,"depth":794,"text":151},{"id":167,"depth":794,"text":170},{"id":189,"depth":794,"text":192},{"id":200,"depth":794,"text":203},{"id":211,"depth":794,"text":214},{"id":222,"depth":789,"text":225},{"id":293,"depth":789,"text":296,"children":802},[803],{"id":332,"depth":794,"text":335},"markdown","content:tools:annotation-color-finder.md","content","tools/annotation-color-finder.md","md",1791743992551]