ADA Standards
General Standards
Tables
Typesetting
Video & Motion Design
Website
Special Cases
Courseware Documents
Courseware Slide Decks
Simternship Documents
Color Contrast
On all documents, web pages, videos, and graphics, check color contrast by using either the Colour Contrast Analyser (CCA) tool or the WebAIM’s Color Contrast Checker.
Regular Text
All regular text must pass the “1.4.3 Contrast (Minimum) (AA)” requirement, which means it has at least a 4.5:1 contrast ratio against its background.
Not ADA compliant
ADA compliant
Large Text
Text that is over 18 points (24 pixels)
Bold text that is over 14 points (18.5 pixels)
All large text must pass the “1.4.3 Contrast (Minimum) (AA)” requirement, which means it has at least a 3:1 contrast ratio against its background.
Not ADA compliant
ADA compliant
Graphical Elements
Keyboard focus indication
UI component borders
Standalone icons
Info-critical chart components
Interactive controls
All graphical elements important to the understanding of a graphic or interface must pass the “1.4.11 Non-text Contrast (AA)” requirement, which means it has at least a 3:1 contrast ratio against its background.
Not ADA compliant
ADA compliant
Not ADA compliant
ADA compliant
ADA Contrast Grid for Stukent’s Primary Colors
Text: #FFFFFF
Text: #F7F8FB
Text: #607887
Text: #2264F2
Text: #122A3A
Sample Text
Sample Text
DNP
Sample Text
AA
Sample Text
AA
Sample Text
AAA
Sample Text
DNP
Sample Text
Sample Text
AA18
Sample Text
AA
Sample Text
AAA
Sample Text
AA
Sample Text
AA18
Sample Text
Sample Text
DNP
Sample Text
AA18
Sample Text
AA
Sample Text
AA
Sample Text
DNP
Sample Text
Sample Text
DNP
Sample Text
AAA
Sample Text
AAA
Sample Text
AA18
Sample Text
DNP
Sample Text
Key
AAA
Passes Enhanced Contrast (AAA)
AA
Passes Minimum Contrast (AA)
AA18
Passes Minimum Contrast for Large Text Only
DNP
Does Not Pass
Hyperlinks
Every hyperlink must be unique.
Change a hyperlink when it uses language like, “Click Here,” “More,” or “Read More.” These kinds of link descriptions can be confusing as they don’t tell a user where the link is taking them.
For more information about link purpose, visit WCAG Understanding SC 2.4.4.
Don't do this
Watch the video below to learn how easy it is for businesses to set up a Facebook or Instagram Shop.
(Video) https://www.facebook.com/watch/?v=557995641521125
Do this
Watch Facebook’s video to learn how easy it is for businesses to set up a Facebook or Instagram Shop
Image Alt Text
Add alt text to every image. Be concise but descriptive. Alt text is not a caption or full description of the image. Give the most important information. It should be about 20-30 words. Do not include “image of,” “picture of,” etc. The screen reader will do this for you.
Remember: screen readers can’t be paused and reversed. So any data a student misses while using their screen reader will require them to start the entire text thread over. Writing in simple, short, and accurate ways will help avoid anyone missing information.
For more information about non-text content, visit WCAG Understanding SC 1.1.1.
Gemini prompt to generate alt text
Please act as an ADA specialist, creating alt-text for images in a textbook. Here are your guidelines:
Do not begin alt text with “image of” or “picture of”.
Keep alt-text under 250 characters.
Include any text in the image in your description. For instance, if the image contains a road sign, describe what the sign says in the alt text.
If the image includes data a student might need, including a link or download to the written (non-image) data is a good way to support alt text. This gives the student more resources and keeps alt text short, reducing cognitive load.