Digital Accessibility

Cloud image background with black text that reads: Low contrast means that there is little difference between colours, less intensity, softer.

White fluffy clouds on a pale blue-grey sky are the ultimate low contrast pattern

Colours are often the same deepness, and from similar colour families.

Examples of low contrast colour combos: (two dots of each colour are grouped inside a black rectangle.  Blue/green, yellow/pink, red/yellow, black/red).

Underneath with a cream backdrop reads: Even with careful visual choices you should still provide image descriptions in the text of your document to be sure.

It reads: High contrast means opposite colors, opposite intensiity, light/dark.  (A checkerboard pattern follows.) High contrast is intense.  Black and white checkers are the ultimate high contrast pattern.  The edges are sharp, the colors are total opposite in shade and darkness.

A photo of a  light brown mountain with a mirror image of it upside down.  Text overlays show text examples in black and whit.  From top to bottom: Pure evil, Pure Evil (it's a curly font), low contrast, low contrast, compare, high contrast, high contrast.

Light blue text on a navy blue background says: To add text or logo over a photo, ad a solid coloured block. Two photos are below.  The photo on the left shows a person with sandy skin and a green hijab.  Text overlay reads like this or this.  To the right, a person with brown skin and a cute hat with  another person mostly out of frame has text overlays that read "this or this". At the bottom, a black backdrop with white text reads: "easy to read designs mean that more people will be reading.

The graphic square features three wide bands of colour: deep navy, pale blue, and white at the bottom.  The bottom of the image features tiny dots of colour blindness combinations sectioned into rectangles two by two.

The text of the image reads as follows:

However, when it comes to an elegant soft design, black and white checkers are not what you want.  Yes, you can still use colour in your designs.  There's many different types of colourblindness, so stick to black, white, and the same colour family (pictured with baby blue and navy blue), sticking to light and dark shades.  Some examples of different colourblindness experiences: 

(then the image shows these colour groupings: Blue/purple, blue/yellow, red/green, blue/grey, black/green, green/brown, blue/green, green/grey, red/pink, monochrome (no colour/black and white)

This is an example of using overlays and different intensities to create more readable text.  Image shows the text in dfferent colors and overlay setups, inclsuding a person doing yoga and swirling patterns.  Text reads: This guid serves as a general template.  When iin doubt, black and white, deep blue/ purple and white with helvatica aerial is best.

* Image description:  A text box with a pale yellow-green background and deep green text with lime and dark green accents.  The bottom half is black text on white.

Example in context.

Regular, Bold.

Notice how small bold text is easier to see than regular.

Examples of high contrast in one colour family

Perfect for colour blindness

The lime green is fine for decorations, but isn't high contrast.

Light Grey top half, light pink bottom half with a white stripe in the middle.  Top half reads: Best practices:  -Use sans serif bold fonts for long paragraphs  -Use high contrast colour palette -Use fancy curly fonts for short titles only, and in a larger size.  The bottom half shows examples of text styles

Light Grey top half, light pink bottom half with a white stripe in the middle.  Top half reads: Best practices:  -Use sans serif bold fonts for long paragraphs  -Use high contrast colour palette -Use fancy curly fonts for short titles only, and in a larger size.  The bottom half shows examples of text styles

The next image shows an aerial view of a black and grey laptop on a pale grey surface.  The keys are the only part that is easily visible.  Next to it is a black cellphone, pink post-it notes, and two pens, the one on the left is not as easy to see given their grey colouring.The next image shows an aerial view of a black and grey laptop on a pale grey surface.  The keys are the only part that is easily visible.  Next to it is a black cellphone, pink post-it notes, and two pens, the one on the left is not as easy to see given their grey colouring.

Multiracial mixed gender group smiling with computer 

In this case, the alt text and image description can be the same, presuming this is simply a stock photo/ people we don’t know- not our friends, family, or celebrities. 

Alt Text:  outdoor powerful portrait in neon clothes 

Side note: 

Go with what you know!  For this stock photo, we don’t know race, identity, or gender 

An up angle  perspective shot of a model with a confident face and brown skin in action outdoors.  They are wearing pink leggings, neon jacket, and their hair is in tiny brown braids in a pigtails.

Alt text: tack of pancakes photo 

ID: A big stack of pancakes with strawberries and syrup on top with a side of whipped cream. 

Describe what is important to YOU.  If I’d made that plate in ceramics or made the pancakes myself, I’d highlight tiny details I was proud of and wanted my friends or clients to notice.