{"id":3573,"date":"2025-09-09T18:37:09","date_gmt":"2025-09-09T16:37:09","guid":{"rendered":"https:\/\/blog.tomayac.com\/2025\/09\/16\/prompt-api-color-sensitivity\/"},"modified":"2025-09-09T18:37:09","modified_gmt":"2025-09-09T16:37:09","slug":"prompt-api-color-sensitivity","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2025\/09\/09\/prompt-api-color-sensitivity\/","title":{"rendered":"Prompt API color sensitivity"},"content":{"rendered":"\n\t\t\t<p>I was playing with stress-testing the\n<a href=\"https:\/\/developer.chrome.com\/docs\/ai\/prompt-api#multimodal_capabilities\">multimodal capabilities of the Prompt API<\/a>\nand thought a nice test case might be to have the model read the current time\npainted on a <code>&lt;canvas&gt;<\/code>. As with my\n<a href=\"https:\/\/blog.tomayac.com\/2025\/09\/03\/for-all-thats-holy-can-you-just-leverage-the-web-please\/#bonus\">last Prompt API exploration<\/a>,\nI'm again using a response constraint, the <code>HH:mm:ss<\/code> regular expression\n<code>\/^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$\/<\/code>. The prompt is <em>&quot;Read the\ntime that you can see in this image and print it in HH:mm:ss format.&quot;<\/em><\/p>\n<p>To my surprise, the model (Gemini Nano in Chrome) seems to be quite\ncolor-sensitive. I found that the model often gets the time wrong in dark mode\nwhen a red font is used to paint on the canvas. (The\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/system-color#:~:text=color%20of%20controls.-,Canvas,-Background%20of%20application\"><code>Canvas<\/code> CSS system color<\/a>\nis <code>#121212<\/code> in Chrome in dark mode.) I\n<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=FF0000&amp;bcolor=121212\">checked the contrast<\/a>\nbetween CSS <code>#ff0000<\/code> (that is, red) and CSS <code>#121212<\/code> (that is, black-ish) and\nit's <code>4.68:1<\/code>, which for large text passes both WCAG\u00a0AA and WCAG \u00a0AAA.<\/p>\n<p>Not something really super actionable, other than maybe a heads up to play with\ncolor-preprocessing if the model's recognition performance is poorer than you\nexpected.<\/p>\n<p>Oh, and almost forgot the results of my stress test: on my MacBook Pro 16-inch,\nNov 2024 with an Apple M4 Pro and 48\u00a0GB of RAM, the model was able to keep\nup with about one complete (but not necessarily correct) prompt response per\nsecond. (Yes, I know that this machine is not what the average user has.)<\/p>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/canvas-prompt-api.png\" alt=\"Test case showing the model gets the time wrong in dark mode when a red font is used to paint on the canvas.\" \/><\/p>\n<p>You can play with the\n<a href=\"https:\/\/tomayac.github.io\/blogccasion-demos\/canvas-prompt-api\/\">demo<\/a> embedded\nbelow, or check out the\n<a href=\"https:\/\/github.com\/tomayac\/blogccasion-demos\/tree\/main\/canvas-prompt-api\">source code<\/a>\non GitHub. Toggle between light mode and dark mode and choose red or\n<code>CanvasText<\/code> as the font color.<\/p>\n<iframe src=\"https:\/\/tomayac.github.io\/blogccasion-demos\/canvas-prompt-api\/\" allow=\"language-model\" style=\"border: none; width: 100%; height: 600px;\"><\/iframe>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2025%2F09%2F16%2Fprompt-api-color-sensitivity%2F&dp=%2F2025%2F09%2F16%2Fprompt-api-color-sensitivity%2F&dt=Prompt%20API%20color%20sensitivity\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2025\/09\/16\/prompt-api-color-sensitivity\/\">https:\/\/blog.tomayac.com\/2025\/09\/16\/prompt-api-color-sensitivity\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tI was playing with stress-testing the<br \/>\nmultimodal capabilities of the Prompt API<br \/>\nand thought a nice test case might be to have the model read the current time<br \/>\npainted on a &lt;canvas&gt;. As with my<br \/>\nlast Prompt API exploration,<br \/>\nI&#8217;m again using a res&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3573","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3573"}],"version-history":[{"count":2,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3573\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3573\/revisions\/3575"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}