None legible default tooltips on desktop and web

The new default tooltip theme now defaults to a style that is not legible on desktop and web builds that have device pixel ratio 1.0. The new style also broke past default desktop and web style. The breaking change and none legible tooltip style was introduced when the new Material desktop tooltip design was implemented in Flutter.

Observations

• Is the change according to new Material design for tooltips? [YES]
• Did the change break past default tooltip style on desktop and web? [YES]
• Does the change work visually (is it easy to read?) on desktops with device pixel ratio 1.0? [NO]
• Does the change work visually (is it easy to read?) in Chrome browser on Windows platform? [NO]

Below is a size comparison with samples of tooltips on Windows platform, both desktop builds and Web builds on windows. The poor readability of the default font size 10dp is clearly demonstrated below.

Note: All images below need to be clicked on in Web GitHub to open the image at native pixel size. To get a sense of the look on a standard desktop, the desktop used for viewing the images should also use device pixel ratio 1.0.

The above composite example was generated by running this simple tooltip size simulator
https://gist.github.com/rydmike/82d2817761d52aa2c1eb47d0edf4bb5f

Using different builds and combining them into one PNG file and adding a few screenshot samples of Windows platform native tooltips to it as well for size and legibility comparison. I call the above sample code a "tooltip" simulator, since it is not using the actual Tooltip widget, but instead just the style the current tooltip uses. The used style was copied from the Tooltip widget on Flutter Channel dev, 1.24.0-10.2.pre.

In the above composite screenshot example it is shown that the current Material default size of 10dp, is not very clear, nor easy to read on Windows, not with any of the presented build types and use cases. The used font size and resulting default font type on Windows is too small for Flutter to be able to render the tooltip text clearly at device pixel ratio 1.0.

The above example also at the same time show the effect of what I suspect is related to issue #67034.

Summary of Findings

On Windows, when using an external monitor the most common device pixel ratio is 1.0, often on a 1920x1080 (full HD) monitor. Going forward with both Flutter Web apps and Desktop apps on Windows Platform, it is both relevant and convenient if the Material design would consider using a default dp size for tooltips that produces clear and legible tooltips at device pixel ratio 1.0.

Fixing the the slight extra blurriness that font rendering in Flutter currently suffers from (#67034) will still not improve the situation to the extent that font size 10dp and the default platform font used in the tooltips, would become clear enough at device pixel ratio 1.0.

This legibility issue also applies to Linux and MacOS platforms when device pixel ratio 1.0 is used.

I also got a report that the 10dp tooltip text has accessibility score 0 and the 10dp with lost pixels, via white text on semi transparent background has accessibility score -1.

For the tooltips to be legible on a screen with device pixel ratio 1.0, a minimum of 12dp is required.

Users can of course change the tooltip theme into something more legible themselves in their applications. I already did so for my applications. However, when I noticed this change and legibility issue, it just seemed a bit negligent, to leave the default theme for Flutter tooltips in a state that is no longer legible on the majority of desktops in the world and browsers on them.
That is why I thought it might be helpful and useful to bring up this minor design issue.

NOTE: This issue was reported earlier with another topic. Based on @HansMuller recommendation here #71052 (comment), it is opened as a new issue with focus on the new style not being legible. cc: @mariamhas @timsneath

Bitmaps sources for the composite comparison image

The source of the used bitmaps in the above composite image, were taken from the images below. The screenshots below also include dark mode examples for comparison.

Windows Desktop Build

DomCanvas Web Build running on Windows in Chrome

CanvasKIT Web Build running on Windows in Chrome

CanvasKIT + CanvasText Web Build running on Windows in Chrome

Footnote: What about higher device pixel ratios?

At higher device pixel ratios than 1.0, the amount of physical screen pixels available to render the font with, increases with the device pixel ratio amount per dimension. Small fonts thus become much easier to read, even if the screen pixel density would also be very high and the physical size thus small.

If you make bitmap renders at a higher device pixel ratio, the size of the actual image increases with the device pixel ratio, at the same time you can also see the impact the added pixels has in the font renders clearly.

Below are some screen shots of Desktop builds at device pixel ration 1.5, 1.75 and 2.0.

These are factors that may sometimes be in use on Windows laptops or hybrid laptop/tablet devices with hires screen and some times on external monitors when using e.g. a physically small 4k monitor where text size at device pixel ratio 1.0 becomes very small. The user then "zooms" the desktop with a factor of 150%, 175% or 200% (or similar) to make the text larger, this creates a "simulated" higher device pixel ratio also on desktops. Using zoming on a Windows desktop is corectly detected by Flutter and reported via MediaQuery.of(context).devicePixelRatio.

Desktop zoomed 150% (Device pixel ratio 1.5)

Desktop zoomed 175% (Device pixel ratio 1.75)

Desktop zoomed 200% (Device pixel ratio 2.0)

</details>