The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Testing & Remediation How to test:
Using a color contrast checker is a great way to check the contrast ratios that are present on your site. WebAIM provides an easy to use contrast ratio checker
that is free to use.
Another method is to use the formula that the W3C has put together. This formula and other relevant details can be found on the G18 technique page
on the W3C website.
How to remediate:
If the text is less than 18 point and not bold (and less that 14 if bold):
- Update the background color, text color or both to meet the 4.5:1 minimum contrast ratio
If the text is greater than 18 point and not bold (and at least 14 point if bold):
- Update the background color, text color or both to meet the 3:1 minimum contrast ratio
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?
Below are sliders that are accessible:
- 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.