JSFiddle - React, Tailwind, and code Playground

HTML

<input id=q value="naïve…coördinates!" /> 
<button onclick="alert(f(q.value))">go</button>

JavaScript

f=s=>[...s].map(a=>{for(x=document.createElement`canvas`.getContext`2d`,x.font="40Q A",x.fillText(a,10,50),d=x.getImageData(i=0,0,99,99).data;++i<1e4;)t+=d[j=i*4+3]>9&&g(j,p=0)<25},t=0,g=i=>d[i]?g(i+4,p++,d[i]=0,g(i-4),g(i+396),g(i-396)):p)|t