Visual Testing

The following easy tests can be used to check the visual accessibility of web pages using a combination of Window High Contrast settings, browser Zoom, and the free Colour Contrast Analyser tool.

1. Set your display resolution or browser window to 1280 px wide.
2. On a Windows computer, press left Alt + left Shift + PrtSc (Print Screen). If prompted to turn on High Contrast, click Yes. By default, Windows will activate a theme with a black background, white text, and blue or yellow links. (If High Contrast does not activate, check Windows Control Panel, Ease of Access Center, Make the computer easier to see, and confirm "Turn on or off High Contrast…" is checked.)
3. In your web browser, open the Settings menu (Alt + F), and set Zoom to 200%.
4. Visually review all elements of the screen except logos, decorative (meaningless) images, or images of text that are duplicative of actual text provided elsewhere on the screen. Check for:
   • Text that did not increase in size by 200%. (WCAG 1.4.4)
   • Text that did not take on high-contrast colors. (WCAG 1.4.5)
   • Text that was cut off, overlapped, or otherwise became unreadable. (WCAG 1.4.4)
   • Information that was conveyed by color that is now now distinguishable by any means. (WCAG 1.4.1)

Follow the instructions in our Color Contrast Guide to measure the contrast of any color combinations except in logos, decorative images, duplicative images, or disabled elements. Check for:

• Regular-sized text with a contrast ratio less than 4.5:1. (WCAG 1.4.3)
• Large text (24px or 19px bold, or larger) with a contrast ratio less than 3:1. (WCAG 1.4.3)
• User interface components (e.g., links, buttons, etc.) or graphics (e.g., icons, charts, etc.) with a contrast ratio less than 3:1 (WCAG 1.4.11)