The Web Developer's Eye Chart Test
Description
A three-part meme comparing different perspectives of a standard eye chart. The first section, titled 'what people with good eye sight see:', displays a crisp, clear Snellen eye chart with descending lines of capital letters. The second section, 'what people with bad eye sight see:', shows the same chart but progressively blurred, simulating poor vision. The final section, 'what web developers see:', replaces the letters entirely. Instead, it shows a hierarchy of HTML heading tags, starting with a large '<h1>' at the top, followed by '<h2>', '<h3>', '<h4>', '<h5>', and a tiny '<h6>' at the bottom, perfectly mimicking the decreasing font size of the eye chart. The humor stems from how a web developer's brain is conditioned to see any visual hierarchy of text in terms of the semantic HTML structure they use daily. It's a clever in-joke about how professional specialization shapes one's perception of even the most mundane things
Comments
7Comment deleted
I showed this to a designer and they saw six different font sizes. I showed it to a marketing person and they saw seven H1 tags
Forget 20/20 - my vision’s fine; it’s my blood pressure that spikes when marketing jumps from <h1> straight to <h4>. That’s the semantic equivalent of ripping the middle rows off the eye chart
After 15 years of arguing about semantic HTML, I still can't unsee the fact that most sites use h1 through h6 purely for font sizing while their actual document outline looks like someone threw spaghetti at a DOM tree
After years of semantic HTML debates, senior developers don't see visual design anymore - just a perfectly nested heading hierarchy. They'll argue for 20 minutes about whether that hero section deserves an h1 or if it's semantically an h2, while the designer quietly weeps into their Figma mockups. Bonus points if you've ever refactored an entire codebase because someone used h3 before h2, breaking the sacred document outline. The real eye test? Spotting a rogue h4 nested under an h2 during code review
An eye chart is the only UI where skipping H2 gets you dinged by both Lighthouse and the optometrist
If your design spec says “make it H1 for size,” that’s not typography - that’s a P0 for a11y and your document outline
Optometrists fix vision; web devs just nest another heading level for clarity