How to check accessibility on any element of a live website
An element-level accessibility check looks at one component at a time: can it be read, seen, focused and tapped? Pixel Poke runs these checks on whatever element you select on a live page, so you can find and fix a problem in the same place.
What Pixel Poke checks
- Accessible name: interactive elements such as buttons and links need a readable label.
- Text contrast: at least 4.5:1 for normal text, or 3:1 for text 18px and larger. The ratio is calculated against the element’s real background.
- Touch target: interactive elements should be at least 44 by 44 pixels.
- Visible focus: interactive elements should have a focus style people can see when they use the keyboard.
- Readable type: text should be 14px or larger.
- Alternative text: images need alt text.
Check, fix, recheck
- Turn on Pixel Poke and click the element you want to check.
- Run the accessibility check on the selection and read the findings.
- If contrast fails, adjust the color in the panel until it passes. If the target is too small, resize or add padding.
- Copy the CSS for the fix, or leave a note for the developer when the fix needs markup, such as a missing label or alt text.
Where it fits
These checks do not replace a full audit or testing with assistive technology. They catch common problems early, while you review a page, on the exact element where you see them.
FAQ
How do I check color contrast on a live website?
Select the text element with Pixel Poke and run the accessibility check. It calculates the contrast ratio against the element’s real background and shows whether it meets 4.5:1, or 3:1 for text 18px and larger.
What is the minimum touch target size?
Pixel Poke flags interactive elements smaller than 44 by 44 pixels.
Is this a full accessibility audit?
No. It checks one element at a time for common issues. Use it alongside a full audit and testing with assistive technology.