The rule: desktop only, and hide it on mobile
The single most common mistake is showing the code to phone users. It cannot be scanned, it takes vertical space, and it makes the page look careless.
Show the code above the tablet breakpoint and hide it below. This is one media query and it is the difference between a smart feature and an obvious bug.
What a website code should do
Every good case is a handoff, where the next step genuinely belongs on the phone:
- Log in without typing. Scan on the desktop, confirm on the phone. The QR login explainer covers the token exchange behind it.
- Pair a device. Set-top boxes, dashboards, kiosks and smart displays where typing a password is torture.
- Install the app. One code that sends iPhones to the App Store and Android to Play, through a smart app code.
- Continue on mobile. A long form, a boarding pass, a ticket or a map that is more useful in a pocket than on a monitor.
- Two-factor enrolment, which is the most widespread use of QR codes on the web, covered in the authenticator guide.
- Pay from the phone, where banking apps live.
Screens scan differently from paper
- Keep the on-screen code at 200 px or more. Below that, phone cameras struggle with the pixel grid.
- Use pure black on pure white, no gradients or brand tints behind it.
- Beware dark mode. An inverted code on a dark UI scans slower on many phones. Render the code on a white card even in dark themes.
- Do not animate the area around the code. Motion defeats camera autofocus.
- Refreshing codes for login should show a visible countdown and a regenerate button, so an expired code is understood rather than treated as broken.
There are additional quirks to scanning a code shown on a monitor, including refresh-rate banding, in the scan from a screen guide.
Always print the alternative
Every code on a website should sit next to a link, a short URL or a manual entry code. Some users are on a desktop with no phone nearby, some are on a phone already, and some are using a screen reader that cannot describe a square.
That last point is not optional. A QR code is an image, and it needs a text alternative that carries the same information. The alt text guide explains what that alternative should say.
When not to use one
- On a mobile-only page, where nobody can scan
- To open a page on the same device, which is a link with extra steps
- As decoration in a hero image, which trains people that your codes do nothing
- To replace a copyable code in a support flow, where selecting text is faster and more accessible
Add a QR code to a web page in 4 steps
Confirm it is a real handoff
Login, pairing, app install, payment or continue-on-mobile. If the next step works fine on the same device, use a link.
Render it desktop-only
Hide the code below the tablet breakpoint. Phone users cannot scan their own screen.
Draw it 200 px or larger on white
Pure black on pure white, no motion nearby, and a white card even in dark mode.
Always offer the text alternative
A short URL, a manual code and real alt text, so keyboard and screen-reader users are not excluded.
Frequently asked
Should a QR code appear on the mobile version of a site?
No. A phone cannot scan its own screen, so the code is dead weight. Hide it below the tablet breakpoint and show a normal link instead.
How large should a QR code be on screen?
At least 200 px, drawn as pure black on pure white. Below that size the camera struggles with the display's pixel grid, especially on high-density monitors.
Why do QR codes fail in dark mode?
Inverted codes are supported by modern phones but decode noticeably slower. Rendering the code on a white card inside the dark interface removes the delay.
What is the most common legitimate use of a QR code on a website?
Login and device pairing, followed by two-factor enrolment. All three are cases where the next step genuinely belongs on the phone rather than the desktop.
Do QR codes on websites cause accessibility problems?
They do when they are the only path. A square is invisible to a screen reader, so always pair it with a short URL, a manual code and meaningful alt text.
Read next
Need a different QR type? Browse all 48 QR types on the home page.