Agencies
Services
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.
The Basics
- Set your display resolution or browser window to 1280 px wide.
- 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 use the High Contrast Black theme, with white text, yellow links, green disabled text, and light blue selections on a black background. (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.) - In your web browser, open the Settings menu, and set Zoom to 200% (or press Ctrl + Plus five or six times, until it shows 200%).
- Visually review all elements of the screen (except logos, decorative images, or images of text that are duplicative of text provided elsewhere on the screen). Confirm that:
- All information can still be viewed; non is truncated, overlapped, or otherwise unreadable. (WCAG 1.4.4)
- All text doubled in size. (WCAG 1.4.4)
- All text took on high-contrast colors (e.g., white text, yellow links, black background). (WCAG 1.4.5)
- Any information that was conveyed by color (e.g., red for required) is still distinguishable (e.g., by an asterisk or icon). (WCAG 1.4.1)
- For any text that did not take on high-contrast colors (except logos, decorative images, or images of text that are duplicative of text provided elsewhere on the screen), use the Colour Contrast Analyser to sample the foreground (text) color and background color. 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)
Color Contrast
Using the Colour Contrast Analyser is easy, but you need to take care to do it correctly. For instructions, see our: