Use color to help differentiate, classify information and add personality
Use color in additive manner. Elements shouldn’t rely on color only. For example: Add a text label next to an icon, use filled icons, use underline for text links instead of just blue
Consider different types of color blindness when designing your palette. Most common ones are protanomaly(reduced sensitivity to red light), deuteranomaly(a reduced sensitivity to green light and is the most common form of colour blindness - ref)
Fonts/Text formatting
Avoid using light font weights, at least regular to ensure enough contrast
Start with 16px body copy text, don’t go below 12px
Avoid using all caps UPPERCASE text styling, text will be read like U-P-P-E-R… by screen readers. Also, it is harder to read than title casing. If it needs to be, for Web use“text-transform: uppercase”
Avoid centered text: Starting points of each line vary too much which brings huge cognitive load which is inaccessible.
Avoid justified text: Words are spread too much unevenly which makes it hard to read.
UX Copy
UX copy needs accessibility, too. If you care about this in your product, please take people who struggle with literacy into account.
Don’t make your UX copy longer than needed and as short and distinct as possible.
Consider a reduced motion setting in your app or website for folks with Neurological disabilities(most common: Seizures)
Your design needs to work with reduced or without motion as well. Motion like animations or transitions only support your design story, are additive and meaningful but not necessary. Ask yourself the question: Does it enhance the story you are telling?
If you need to emphasize elements, don’t flash the element more than 3 times
If possible add alt text or descriptions for screen readers.
Also consider slow connections when images cannot load or your internet connection has hick-ups – Alt text for images can describe the image/graphic/photography before it has been fully loaded.
Use Closed Captioning to provide subtitles in videos to help people with hearing difficulties and disabilities.
SVGs:
Use title and description attributes. Similarly to alt tags. Understand content for screen readers. More info here.
The Basics
Contrast
Color
Fonts/Text formatting
UX Copy
Motion
Design Style-guide
Photography / Imagery / Video
SVGs: