Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Testing & RemediationHow to test: Open your website and manually review the pages to see if the use of color is used to convey meaning. This may require you to interact with the page (eg. submit a form). If color is used as a way to provide information to the user, indicate an action or prompt a response, confirm that there is an additional visual cue that portrays the same meaning. How to remediate:
- Remove any usage of color to convey meaning or;
- Anywhere color is used to convey meaning (eg. a form with required fields marked in the color red), also include an alternative visual way to indicate this to the user (eg. such as a star icon or the word "required")
Questions and Answers
If you are using chrome to test your site, you can use an extension called the Wave Scanner. The Wave scanner will scan a page for all sorts of accessibility requirements, including color contrast. This is a great tool for pass/fail evaluation. If you are looking for more in-depth knowledge and information about the color contrast on your pages, you can compare the color contrast of 2 colors at this website. That contrast checker tool will even give you insight into what level it passes and fails at.
Artwork and images themselves do not need to meet accessibility requirements.
There is one exception to this rule, but I am assuming that it won't be the one you are looking form. Company logos do not need to meet accessibility criterion. That said, it is recommended they do, and the rest of the page does. If you are planning on using the same 'failing' colors from the compony logo on the rest of you site that that will not pass. All text must meet the minimum contrast ratios put in place. For AA it is required that normal text has a ratio of at least 4.5:1, and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. You can check if the colors pass at this website or if you'd like the exact contrast ratio you can check out this test here.
No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.
Most of the time animated gifs will be accessible. There should be a few things to keep in mind though to ensure this remains true. For example, ask yourself if there is another way that the message can be communicated. Would a still image do? If not, think about providing an alternative or some way that users can forgo the animation. A useful tool when checking your gifs for accessibility may be this Photosensitive Epilepsy Analysis Tool. The thought behind this is that you can make sure the animation won't trigger seizures in people who are sensitive to them.
Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content, so keep these things in mind when building content:
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider
This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.