Design quality
Scan your website at phone, tablet and desktop widths for layout, contrast and labelling problems, and compare every scan with an accepted baseline.
Atlas opens your Development website in a real browser at 375, 768 and 1440 pixels wide, finds design problems and gives each scan a score from 0 to 100. It also compares screenshots with a baseline you accept, so unexpected visual changes stand out.
Run a scan
Section titled “Run a scan”-
Open Search & health → Website health and the tab Design quality.
-
Click Scan website. Atlas checks up to 5 pages. If you see No Development website address, add it first with Open settings.
-
Read the results under Latest scan: Blockers, Warnings, Pages and Changed from baseline. Choose a Screen width and Page to see the issues on that page.
-
Compare Baseline and This scan side by side. Each issue comes with a Suggested fix (not applied automatically).
-
When a scan looks right, click Accept as baseline. Future scans are compared with it.
What it checks
Section titled “What it checks”- Content wider than the screen, clipped text and overlapping elements.
- Tap targets that are too small on phones.
- Text with too little contrast.
- Buttons, links and fields without an accessible label.
Recent scans lists past scans with their score, issue count and whether they are the baseline.
Limits
Section titled “Limits”- One scan at a time per environment, and up to 6 scans an hour.
- Development website only.
- Fixes are suggestions; Atlas never changes your website.