False positive color-contrast: `font-size: 0` elements should be ignored

[straker]

This came up recently where an element with font-size: 0 is throwing a color-contrast violation when the text is not visible. Normally an element with font-size: 0 would have a width and height of 0 (which would be ignored), but explicitly setting the width and height of the element overrides that while still visually hidding the font.

<ol>
  <li>Visible text</li>
  <li style="font-size: 0; width: 16px; height: 16px; background: red; color: #282828;">Not visible</li>
</ol>

[WilcoFiers]

Wow, 1. I can't believe that works, and 2. I can't believe we never came across that.

[straker]

@WilcoFiers is there a min font-size that we should consider visible for color contrast? font-size: 1px is also super small and I can't see it on my screen (just a very thin black line where the font should be)

[WilcoFiers]

I'm not sure. I can't recall ever having seen it, so I wouldn't know why someone would do that. You could do some investigating on GitHub to see if you can find legitimate use cases for very small fonts. I'd tend to lean towards anything below 5px is basically invisible.

[straker]

font-size: 1px seems to be used a lot in conjunction with whitespace characters ( ), in emails and tables for line clears (some of those use actual letters), and sometimes to hide text (mostly used in conjunction with setting the font color to the page background). I've seen similar things with font-size: 2px.

However the more I look at it the more I wonder if we shouldn't try to guess the intent of the font-size use. I'd be fine with saying only font-size: 0 should fail the matcher and let everything else through since font-size: 1px is technically still visible (albeit very tiny and needs a magnifying glass).

[padmavemulapati]

Verified with the latest axe-core devbuild

Not seeing any color-contrast issues when font-size=0

code below:

<ol>
  <li>Visible text</li>
  <li style="font-size: 0; width: 16px; height: 16px; background: red; color: #282828;">Not visible</li>
</ol>

Screen.Recording.2025-07-25.at.6.13.35.PM.mov

Environment:

Label	Value
Product	axe-core
Version	4.10.3(Dev Branch Code base
OS-Details	_MAC- M1-15.3 _
BrowserDetails	Chrome Version 138.0.7 (Official Build) (64-bit)