Visual Clarity and Contrast
When testing a site or application's visual accessibility, there are a few items to keep in mind.
Contrast and the use of color
Color contrast
The key to ensuring proper color contrast is to check that text remains legible when selecting foreground and background colors or using images as backgrounds. The WCAG has specific guidelines for this in AA and AAA varieties. At minimum, you need to aim for the AA criteria, but AAA is even better if possible. The requirements for each criteria is as follows:
- 4.5:1 (AA) or 7.1:1 (AAA) color contrast ratio for regular sized, non-bold text.
- 3:1 (AA) or 4.5:1 (AAA) color contrast ratio for large text, which is defined by WCAG 2.2 as a minimum of 18pt regular text or 14pt bold text.
- For more information, you can read the full explanation of the specific success criteria and enhanced success criteria.
Using color to convey meaning
When using color to convey meaning, such as red to indicate an error or green to indicate success, it must not be used to convey meaning on its own. Use an icon, symbol or text alternative in conjunction with color to convey meaning. This is important because someone that is color blind might not be able to see certain colors depending on what kind of color blindness they have. If you use an icon or symbol, you need to provide either a “alt” attribute with an adequate description, or leave the “alt” attribute empty and provide a visual text explanation alongside the symbol.
Textual content
Text should be brief and as simple to understand as possible. This is particularly important for those that are prone to cognitive overload or have issues processing large amounts of information at once. In the case of links, buttons, and other form controls that have labels, this also creates simpler commands for people that control their computer with their voice or the Apple accessibility feature called Full Keyboard Access due to a motor impairment. If a technical word, phrase, or acronym must be used, provide clarification in some way.
Increased text sizes
Individuals with limited vision due to a wide range of visual impairments rely on magnification and larger text sizes. Pages should be readable, understandable, and operable when text is increased to 200% its normal size.
Audio, video, and animated content
If your page has audio or video content, provide an alternate method of consuming the information such as closed captions, a transcript, or audio description. If your page has video or animated content like GIFs or elements that move around, make sure it doesn’t flash more than three times or more per second and respect the "reduce motion" setting. This ensures that all users can consume all content provided on the page in a way that works for their needs, and so you don’t trigger an individual’s motion sickness or seizures if they are prone to them.
How can we find these issues?
There are two ways you can find visual accessibility issues: manually inspect the page or use automated tools, such as browser extensions and built-in accessibility inspectors in various browsers. These two methods are not mutually exclusive. Doing both ensures the maximum amount of issues are caught and documented as things to fix, as automated tooling, such as Lighthouse built into Chrome, only catches the low hanging fruit and their results may differ. Some useful extensions include:
- Tab order accessibility testing
- Axe devtools (you don't need to signup, just inspect to run)
- Wave Evaluation Tool
Check errors and contrast errors:
Adjust filters to A & AA (WCAG 2.1):
In the SiteImprove popup box, right next to the search bar, click on "filters".
In the filters dropdown menu, click on A and AA. There should be a checkmark that appears beside it.
Once you have all filters selected, click "apply filters".