2e:null 2f:["$","title",null,{"children":"Visual acuity and device-pixel-ratio | Eric Portis | Observable"}] 34:T4a3,md`Here’s the key question: how many people have effective (so, possibly corrected) vision that good, when gazing upon the web? This is a suprisingly hard (maybe impossible?) question to answer! But the best rough idea I’ve been able to glean comes from a few sources. First, let’s set some limits:

legal blindness: 20/200; 1.0
maximum visual acuity ever recorded: 20/8; -0.4

20/8 vision corresponds to a DPR of 3.25. So, right off the bat we can say: **DPR > 3.25 is too many DPRs**. What happens between the limits? The best sense of this that I've gotten, comes from a couple of charts from [this paper](https://doi.org/10.1111/j.1600-0420.2005.00516.x), which give an idea of the distribution of “normal” vision amongst 17-18 year-olds, and how the mean changes with age. ![](https://eric-cloudinary-res.cloudinary.com/image/upload/v1552942657/visual-acuity-distribution.png) ![](https://eric-cloudinary-res.cloudinary.com/image/upload/v1552942656/visual-acuity-over-age.png) `35:[] 32:{"id":"7a0e3eac2559a46a","slug":"visual-acuity-and-device-pixel-ratio","title":"Visual acuity and device-pixel-ratio","thumbnail":"a4a0abb839afe48b5ec3cc129a2e32b0be2dddcf7931b934fb00679453f55287","access_level":"public","create_time":"$D2019-03-18T17:19:45.595Z","update_time":"$D2020-07-08T17:11:44.314Z","view_time":null,"first_public_time":"$D2019-03-18T21:43:45.164Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":252,"publish_version":252,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visual acuity and device-pixel-ratio","cells":[{"id":0,"value":"md`# Visual acuity and device-pixel-ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`How many DPRs is too many DPRs? How many DPRs is enough?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`The CSS \\`px\\` unit is a [length unit](https://drafts.csswg.org/css-values-3/#lengths). However, it isn’t defined in terms of any fixed length. Instead, in order to visually anchor a web that will be viewed in many, many different ways, on many types of screen, at all kinds of viewing distances: it’s [defined as a visual angle](https://drafts.csswg.org/css-values-3/#reference-pixel)!\n\n> The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees.\n\n> …it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`The [\\`window.devicePixelRatio\\`](https://drafts.csswg.org/cssom-view/#dom-window-devicepixelratio) (or DPR), then tells us how many actual, physical device pixels are contained within one linear CSS \\`px\\`. So, with just a DPR, we can figure out the approximate visual angle that a physical pixel will usually subtend on a viewer’s eye.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof dpr = {\n const form = html`\n \n `;\n const input = form.querySelector('input'),\n output = form.querySelector('output'),\n update = () => {\n output.textContent = input.value;\n form.value = input.value;\n }\n input.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"{ \n const [degrees, minutes, seconds] = decimal2DegreesMinutesSeconds( devicePixel );\n return html`\n

Visual angle subtended by one device pixel: ${ degrees }° ${ minutes }ʹ ${ Math.round(seconds) }ʺ

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`As luck would have it, common measures of human visual acuity are based on visual angles, too. So, we can say that, in order to get any benefit at all from the above DPR, a viewer would need vision rated at:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"{ \n const snellen = decimal2Snellen( devicePixel );\n const logMar = decimal2LogMAR( devicePixel );\n return html`\n

Snellen: ${ snellen[ 0 ] }/${ snellen[ 1 ] }
LogMAR: ${ logMar }

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`If we take that second chart, and draw:\n\n1. the range of recorded values from the first chart (in light blue)\n2. the levels of visual acuity required to “see” DPR 1, 2, and 3, in gray\n\n…we get this:\n\n![](https://eric-cloudinary-res.cloudinary.com/image/upload/v1552944699/visual-acuity-marked-up.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`\n## Conclusions\n\nThat marked-up chart tells me:\n\n- DPR 2 is good enough for most people\n- DPR 3 only benefits a very lucky few`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Complicating factors TODO\n\n### Viewing context\n\n#### What if the CSS \\`px\\` varies significantly from the ideal reference pixel?\n\nAny data on this?\n\n#### What if the user is at a non-standard viewing distance?\n\nHolding the phone a couple of inches from your face and squinting = the original assistive zoom. Don't disable it!\n\n![](https://i.startsatsixty.com.au/wp-content/uploads/20161108143559/woman-squinting-at-smartphone_161108-720x379.jpg)\n\n#### Light levels\n\nLow contrast ratios = less acuity possible, lower resolution needed.\n\n### Viewed content\n\n#### Contrast and edges in the image\n\nAgain with the lower contrast = less resolution. Most content is not pure black lines on a pure white background (which is what the LogMAR/Snellen acuity tests measure the ability to discern). Photographic imagrey, with much softer edges and much less contrast, can get away with less resolution. Most of the images on the web are photographic ^{[citation needed]}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"degreesMinutesSeconds2Decimal = function(degrees, minutes, seconds) {\n return degrees + ( minutes / 60 ) + ( seconds / ( 60 * 60 ) );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"decimal2DegreesMinutesSeconds = function( decimal ) {\n const degrees = Math.floor( decimal ),\n minutes = Math.floor( ( decimal - degrees ) * 60 ),\n seconds = ( decimal - degrees - ( minutes / 60 ) ) * 60 * 60;\n return [ degrees, minutes, seconds ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"decimal2Snellen = function(decimal) {\n const snellenFraction = decimal / degreesMinutesSeconds2Decimal(0, 1, 0),\n numerator = 20,\n denominator = Math.round( ( snellenFraction ) * 20);\n return [ numerator, denominator ]; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"snellen2Decimal = function( numerator, denominator ) {\n const snellenFraction = numerator / denominator;\n return snellenFraction * degreesMinutesSeconds2Decimal(0, 1, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"decimal2LogMAR = function( decimal ) {\n const [ degrees, minutes, seconds ] = decimal2DegreesMinutesSeconds( decimal );\n return Math.round( \n Math.log10( ( degrees * 60 ) + minutes + ( seconds / 60 ) ) * 100\n ) / 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"logMAR2Decimal = function( logMar ) {\n const minutes = 10 ** ( logMar );\n return degreesMinutesSeconds2Decimal(0, minutes, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"cssPx = 0.0213 // degrees","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"devicePixel = cssPx / dpr;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"