Become a storytelling superhero in our on-demand Masterclass WATCH NOW

Become a storytelling superhero in our on-demand Masterclass    WATCH NOW

Color Contrast for Web Accessibility

To be mindful of people with disabilities, you can make an effort to plan and design websites that will facilitate the navigation and consumption of web content. This video teaches you the basics of color contrast for web accessibility in accordance with the WCAG (Web Content Accessibility Guidelines). By simply increasing contrast ratios, you can significantly improve the experience of your website visitors.

Video Transcription: Color Contrast for Web Accessibility


Hi, everyone. I'm Mark, from Vyond. Today, we're talking about color contrast and web accessibility. Whenever you create content, it's important to think of everyone who may want to watch it, including those with disabilities. Luckily, we have the Web Content Accessibility Guidelines, often referred to as WCAG 2.0, to provide a single shared international standard to ensure that web content is accessible to all.

According to the World Health Organization, there are more than 250 million people who suffer from some form of visual impairment alone. One area that's often overlooked when creating animations for web content is color contrast. This web content generally refers to visual information that's posted on a web page or application, like text, images, and video, all pretty important things to help tell our story.

According to the guidelines, the contrast ratio between text and its background should be at least 4.5 to 1, in order to meet the minimum conformance eligibility level of double-A, to look like this. This ratio becomes less prominent with larger fonts since it's easier to read at lower contrast. So, for example, if your type is at least 18pt or 14pt bold, the minimum contrast ratio drops to 3 to 1.

The WebAIM color contrast checker is a free resource that will calculate the score for both the regular and larger test sizes. It's perfect to calculate your values. Just enter your color values, and check the results for compliance. And that's all there is to helping everyone access your content.

Create Your Own Animated Videos

There’s a reason why Vyond is the leading platform for creating your own videos. Robust and powerful customization features are all wrapped into our simple, easy-for-everyone studio that comes fully loaded with everything you need to build engaging video experiences.

See where your creativity can take you with a 14-day Vyond free trial; no credit card required.