If you're new to Inspect by Toybox, follow these 5 simple steps below to become a Pro
To get started with Inspect, the first thing you'll do is create a new project or open an existing on your website.
Once you do, click the tab labeled "Inspect" in the footer.
To inspect elements on your page, simply start by hovering over any element. As you hover, you'll be able to see the clean CSS that is being applied. It's that simple :)
Toybox automatically checks every element to see if you pass WCAG color contrast ratio guidelines. In the bottom of the Inspect tooltip, you'll notice 4 different elements, detailed below:
The first number you'll see is the exact size of the element you've hovered over in pixels.
The second element shows the color contrast ratio as defined by WCAG (Web Content Accessibility Guidelines). To learn more about what this number means, please visit this link here.
The third element displayed is whether the element has passed the WCAG AA rating. If there is a green checkbox next to the AA, it means it has passed the requirements. If it's a red X, this means it did not pass the requirements. WCAG level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
The fourth and final element displayed is whether the element has passed the WCAG AAA rating. If there is a green checkbox next to the AAA, it means it has passed the requirements. If there is a red X, this means it did not pass the requirements. WCAG level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
As you're inspecting elements, simply click any element you'd like to leave a comment on. When you click, the Inspect tooltip will open the comment box and assignee field.
Click the input field to write and post your comment. If you'd like to move the Inspect tooltip, simply hover over the 3 dots at the top to drag it anywhere on the page. If you'd like to select the "Parent" element, simply click the Parent button directly on top of the pink bounding box.
Redlines are the fastest and easiest way to view the spacing between any elements on your page. To launch redlines, simply click on any element and then click the "Show Redlines" button directly above the pink bounding box.
Once you do, you'll be able to hover over nearby elements to see the spacing between them. When you're done using Redlines, click "Hide Redlines" to return to Inspecting.
