How to Fill Text with an Image in PowerPoint
Have you ever seen a text with an image fill, like this one, and said to yourself, “I wish I could do that”? Well, I have some good news. If you have PowerPoint, you can! Just follow the six simple steps below. 1. Add Combine Shapes Tool to Your PowerPoint Ribbon If you haven’t already, the first thing you’ll need to do is add the Combine Shapes tool to your PowerPoint ribbon. Check out this tutorial to see how to do that. 2. Insert a Background Image The next thing you’ll need to do is find and insert the image you want to use as the fill for your text. For this kind of project, it’s best to choose an image that’s easily recognizable. 3. Insert & Format Your Text The third step is to insert your text. Once your text is inserted, you’ll need to choose a font. I recommend using a bold font so that more of the image is visible. Then, increase the size and boldness of the font as desired. Finally, position your text on the part of the image you want to appear as the fill. In this example, I’m going to move the text over a little so that no green shows through. 4. Insert a Rectangle Next, insert a rectangle that’s the same size as the image. In my case, the rectangle covers the whole slide. Then, right-click on the rectangle, select Send to Back, and choose Send Backward. Your text should now appear on top of the rectangle. 5. Combine Your Rectangle and Your Text Now select your text, followed by your rectangle, click on Merge Shapes, and select Combine. At this point, your rectangle should have taken on the color of your text, and the place where the text was should be transparent. If you try and move your text, you’ll notice that the rectangle is still independent of the image, like in the screenshot below. If you don’t like the part of the image that’s showing through, move the rectangle around until you’re satisfied with the result. If you don’t need the image and the text to be a single object, then you can stop here. If you do, then move on to step 6. 6. Subtract the Image from the Text Select both the image and the rectangle, and then click on Merge Shapes and select Subtract. The image and text should now be combined in one object, like in the screenshot below. If you’re following these steps and the result doesn’t look quite right, try selecting your objects in the reverse order. Now you can go ahead and add any other text or images around it to finish off the look you’re going for. And you’re all set! Want to learn more tips and tricks for creating graphics in PowerPoint? Check out the tutorials below: Guide to Creating Illustrations in PowerPoint for People Who Don’t Know How to Draw Creating Custom Shapes in PowerPoint How I Created These Handy People Icons in PowerPoint And if you’re on the lookout for beautiful, royalty-free images, be sure to check out Content Library 360, the library of 10.3+ million assets that comes with an Articulate 360 subscription. Click here to start your 30-day free trial. Like this article? Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).What to Include in an E-Learning Style Guide
An e-learning style guide is a great way to make sure your projects have a consistent look and feel. It allows you to identify best practices and set standards for how your organization develops courses. While some people might think a style guide limits creative freedom, there are many good reasons to put one in place. An e-learning style guide: ensures a polished and professional output serves as a quick reference tool saves time—meaning less time wasted reviewing and editing design choices expands on a company’s general brand guide, which often doesn’t take e-learning needs into consideration A style guide is especially helpful for organizations with multiple e-learning developers because it ensures consistency across projects. Ready to create an e-learning style guide, but not sure what exactly to include to make it useful? Below are a few must-haves you’ll want to consider. Logos The logo is an essential visual piece of any brand. Your style guide should explain where and when to use the logo. You might also outline the acceptable size, placement, and color variations for the logo, as well as examples of correct and incorrect use. Fonts Most organizations have a few fonts they prefer to use that have already been approved or reflect their corporate personality. Your style guide should outline which fonts to use, what size they should be, and when to use them. For example, you might use a bold 44 pt heading font for lesson titles and a regular 28 pt font for the body text on your slides. Tone or Voice Every company has a unique way of conveying their brand message to their audience. Whether that’s direct and serious or fun and playful, their tone or voice should come through in the course text. Study their website or other company materials to help you define how they communicate. Then share a few example paragraphs or specific copy that mirror a similar tone in your style guide. Writing Tips This could include rules for how to name courses, modules, lessons, assessments, activities, etc. You might also want to specify how to capitalize and punctuate lists and whether to use numbers as numerals or spelled out in full. Colors How a color appears may vary from one monitor to the next, so it’s important to provide actual hex values for your color palette. Specify whether your company allows various tints or shades of the colors and where specific colors are required. Visual Elements Images or illustrations can be a huge reflection of a brand. Consider including guidelines about the format, size, and types of graphics designers should use. Provide example images or illustrations that reflect the company’s brand. Buttons If the company has a standard look for buttons, include it in the style guide, along with tips on when to use each button. Templates Templates are a great way to speed up workflow. If you’ve created any templates—such as layouts, interactions, or quizzes—let people know where to find them in your style guide. If you want the courses to look on-brand regardless of content, create a player template that contains the company logo, custom colors, and specific menu settings that should be consistently applied. Audio Narration If your courses use audio narration, consider addressing that in your style guide. Include things like when to use narration, if a particular intro or outro is used, or if your courses use a specific person for narration versus text-to-speech. Quizzes & Feedback Quizzes are often part of courses, whether they’re brief knowledge checks at the end of a section or a final quiz at the end of the course. Your style guide should tell your developers when to use quizzes, whether there is a maximum number of quiz attempts allowed, and whether there’s a standard minimum passing score. It should also include information on how feedback is provided, or whether it’s provided at all. Miscellaneous Depending on your organization and your projects, you might include other items in your style guide—for example, tips for navigation flow or instructions for naming variables. Consider adding anything to the style guide that’s displayed or used across multiple courses. Additional Tips Remember, an e-learning style guide is a great way to give your projects a consistent look and feel. Here are a few more things to keep in mind. Don’t be too strict. Remember to allow some flexibility for creativity and originality. Show examples of what to do and what not to do. Examples are always helpful! Consider using your course creation apps to train your team on the finished style guide. Resources Looking for other resources to help you build your e-learning style guide? Check out these articles: How to Create a Branded Storyline 360 Prototype How to Brand Your Rise 360 Course Create a Cohesive Look with These 5 Storyline 360 Visual Design Pointers 3 Ideas for Balancing Branding Guidelines with E-Learning Design What do you like to include in your e-learning style guides? Please share your ideas in a comment below. Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Insider Tips for Working with Fonts in Storyline 360
Text is the digital representation of letters—so it’s a big part of most e-learning courses. And where there’s text, there are fonts! Fonts are the styling or design of your text and deciding which fonts to use for your Storyline 360 course is a critical early step. Once that’s done, it might be tempting to get straight to work. But before you get started, let’s walk through some things you should know about installing and working with fonts in Storyline 360. Installing Custom Fonts First things first: when you install Storyline 360, you get an assortment of popular open-source web fonts—Lato, Open Sans, and Montserrat, to name a few. Here’s a full list of the installed fonts in case you’re curious. If you’re already running Storyline 360, when you open an existing project, Storyline 360 will scan your project and let you know if any of the fonts you’ve used are missing from your computer so you can install or replace them. Once you’ve installed any custom fonts you’ve downloaded to your system (check out installation instructions here), they’ll automatically appear in the fonts drop-down list in Storyline 360 the next time you open up the application. Pro tip: If you install fonts while Storyline 360 is open, you’ll need to close Storyline 360 and then reopen it to see your newly installed fonts. It’s also worth noting that Storyline 360 does not support Adobe Type 1 PostScript fonts. However, it does support Adobe TrueType and OpenType fonts. Not sure if you have PostScript fonts in your project? Find out by following the instructions in this support article: Storyline 360: Adobe Type 1 PostScript Fonts Aren’t Supported. Testing Custom Fonts We use web fonts (WOFF files) in published Storyline 360 courses to ensure text looks exactly the way you designed it and remains sharp when it’s scaled up or down. However, sometimes browsers are unable to download the custom font files. This is often due to a server configuration or browser settings issue, but it can also be because the browser believes the file is corrupt. If the browser can’t download the custom font file, then it will substitute that font with a standard system font, so your course won’t look exactly the way you designed it. Though there are ways to overcome this issue (see this article), it’s still a good idea to test the custom fonts you plan to use before you apply them to your entire course. To test your custom font, create a slide or two using your font in Storyline 360 and then publish it. Upload the published output to the environment your learners will view it on—including desktops, smartphones, and/or tablets. Make sure the font you chose renders correctly across these devices and their web browsers. If the font doesn’t render correctly or scale well, swap it out for another custom font. Trust me—if you run into any issues, you’ll be glad you found them sooner rather than later. Choosing a Default Font By default, when you insert a textbox into a new Storyline 360 project, the font is Open Sans. You can manually change that font every time you insert a textbox, or you can set up a theme font. If you set up a theme font, your preferred font will appear automatically whenever you insert a new textbox. Creating a theme font saves time and ensures a more consistent visual design. The process is pretty straightforward. You can learn how to do it in this article: Storyline 360 Working with Theme Fonts. Swapping Out Fonts Quickly and Easily What if you need to update a font throughout an existing Storyline 360 project? If you created a theme font, simply update it and it’ll automatically swap out the font everywhere in your project. If you didn’t use theme fonts in your project, use the Find and Replace feature. Simply choose the font you want to replace and the font you want to use instead and Storyline 360 will do the rest! Here’s how it works: Go to the home tab on the Storyline 360 ribbon, click the drop-down arrow next to Find/Replace. Choose Replace Fonts. Use the “Replace” dropdown to select the font you want to replace. Use the “With” dropdown to choose the new replacement font and then click Replace. That’s all there is to it! And here’s a .GIF to show you the above steps in action. Wrap-Up Thanks to these pro tips, working with fonts in Storyline 360 is a breeze. But if you’re still struggling to decide which fonts to use, check out these helpful articles: Finding Fonts That Fit Your E-Learning 5 Formatting Tips for Creating Dyslexia-Friendly E-Learning 8 Questions to Ask When Choosing Fonts & Formatting Text for E-Learning Have any tips you want to share? Leave a comment below. I’d love to hear from you! And if you want to try something you learned here, but don’t have Articulate 360, be sure to start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.GIFs 101: How to Use, Find, and Make Them
Aside from—you know—the ability to access any information you need in seconds, GIFs are the best thing about the internet. In this post, we’ll talk about what GIFs are, when to use them in your e-learning, where to find them, and how to create your own. You’ll learn everything you need to know about GIFs. (Except for how to pronounce it. We’re staying out of that debate!) What are GIFs? Basically, GIFs are image files that include animation. GIF stands for Graphic Interface Format. And, unlike JPEGs and PNGs, GIF files support animated images. Early GIFs were super basic. They were composed of just a couple of alternating frames, for example: In the 30 years that GIFs have been around, the art form has evolved. Now it’s super easy to find high-quality clips from TV shows and movies, quick clips of cats doing funny things, fun custom artwork, and much more! How can I use GIFs in my e-learning courses? GIFs are also great for your e-learning projects. They offer an easy way to delight your learners with some unexpected movement. And you don’t have to embed a full video or build an animation into your course. Making your learners laugh or expressing an emotion with a GIF can make your e-learning more relatable and more fun. Plus, they’re handy for demonstrating a process or system. Instead of having learners click from one slide to the next to see how a process works, you can use a GIF to give learners that helpful context. GIFs look particularly at home in Rise courses, which are web-based. Check out this example on hurricane preparedness and this one on cardiology observations to see what we mean. Where can I find GIFs? GIFs are abundant online. Some popular places to find great ones include: GIPHY, the most popular search engine for GIFs, allows you to browse for images by category or search to find exactly what you need. Educational GIFs, though it hasn’t been updated recently, has a ton of GIFs on processes, history, how-tos, and more. Imgur is a place for people to share images. A lot of these images are GIFs, and a lot of the GIFs are great. Social media sites such as Twitter are great places to find GIFs. How do I make my own GIFs? There are a couple of ways to make an animated GIF, depending on how involved you want to get. The old-school way provides you with the most control over the process. Here’s a tutorial that shows you how to put together a GIF from several static panels in Photoshop. There are also several widgets that can help you make GIFs quickly and easily. You build them from video snippets using GIPHY’s own GIF Maker App. You can create a GIF from images on GIFMaker.org. Or you can make and style your own reaction GIFs on sites like And I Was Like and GifCam. Get your GIF on! You now have all the knowledge and tools you need to find and use GIFs in your projects. If you have any other questions about when and how to use GIFs in your e-learning (or if you’re just looking for the perfect one for your project), let us know in the comments. And be sure to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.Everything You Need to Know About Image Usage Rights
It’s tricky to find appropriate, usable images for e-learning projects. And sometimes after you’ve found the right photo, it’s unclear whether you can legally use it. Images are protected by copyright. So you can’t add any photo you find online to your e-learning project. But trying to do the right thing can raise more questions than answers: What if I just link to their website? Should I reach out to this person? Wait, I don’t see who owns this image! Usually images you’ll find on photo sites fall into one of a few categories. Here are some of the different usage terms you’ll find. Copyright Copyright law protects original works, including images. In most cases, you can’t copy or distribute a copyrighted image without permission from the person who created it. You should assume that any image you find online is protected by copyright. If possible, contact the copyright holder for permission to use their work. When you buy a stock photo, you’re buying the right to use that copyrighted image. Depending on which site you use, the image may be royalty-free or rights-managed. Royalty-free means that you’re not responsible for royalty payments. You’re usually able to use the image as you’d like. Rights-managed means there are restrictions on how you can use the image—so be sure to read your license agreement closely! Fair Use The fair use doctrine provides opportunities for using copyrighted images without permission. For instance, you can legally use a copyrighted image for personal and educational use, or for the public good. Most e-learning is commercial. As a course creator, you should assume that using copyrighted images in your work doesn’t qualify as fair use. But fair use also allows you to transform copyrighted images into something new. If you turn a copyrighted image into a completely new work, you can use that image freely. Creative Commons The Creative Commons non-profit provides free copyright licenses for creators. The copyright holder can determine several things with these licenses: Whether you need to credit them for their image Whether you can use their image for commercial purposes Whether you can modify their image What license you must use if you modify their image When using Creative Commons images, be sure to read the license carefully and use the image appropriately. Pro tip: Some photo sharing sites, such as Flickr, allow you to filter search results by specific Creative Commons licenses. Public Domain Typically an image becomes part of the public domain in one of two ways. The creator either gives up copyright willingly, or the copyright expires. These images aren’t protected by copyright, so you’re free to use them any way you’d like. Pro tip: WikiMedia Commons has a large database of images in the public domain. A Helpful Alternative Of course, the easiest way to source freely available images is by finding e-learning solutions that provide stock assets. Articulate 360 includes Content Library 360, an ever-growing library of visual assets that you can access right from within Rise and Storyline 360. The stock photos, images, icons, videos, course slides, and characters in Content Library 360 are 100 percent royalty- and attribution-free, so you can use them in your e-learning however you’d like. See what’s available in Content Library 360 when you start a free, 30-day trial of Articulate 360. You’ll also get access to award-winning authoring apps Storyline 360 and Rise, a project review app, and access to live online training led by industry experts. New to e-learning? Sign up for our E-Learning 101 email course, a series of expertly-curated articles that'll get you up to speed with course development.Guide to Creating Illustrations in PowerPoint for People Who Don’t Know How to Draw
Visuals are a key element of any e-learning course. They help attract the learner’s attention and reinforce key messages. If you don’t have a graphic designer on your team—or access to an asset library like Content Library—you may be struggling to find or create the visuals you need for your course. If that’s where you are, don’t worry! In this tutorial you’ll learn how to create your own illustrations in PowerPoint using freeform shapes. What Is a Freeform Shape? On the Insert tab of PowerPoint, you have access to a whole host of default shapes to help you create your own illustrations: But did you know that hidden among those default shapes is a freeform shape that allows you to draw your own personalized shape? It looks like this: In this tutorial, you’ll learn how to use this super-powerful feature to create your own illustrations—even if you have zero artistic ability. Set Default Shape Format When you draw a freeform shape, PowerPoint automatically applies the default shape format—meaning the fill and outline colors—to your shape. And while you could just use that and change the style afterwards, I recommend changing the default style to something with a contrasting border and no fill color. Why? If you’re tracing over a photo, the contrasting color makes it easier to see where you’re drawing. And with no fill color, you can still clearly see the image you’re tracing. So how do you set a new default shape style? It’s easy! Just insert any shape, format it however you’d like, right-click on the shape, and select Set as Default Shape: Now, when you draw your freeform shape, it’ll automatically take on the format you’ve defined. Find a Photo to Trace Let’s say you want to include a visual of a hand holding a phone in your course. Unless you’re already a gifted illustrator, it’s going to be difficult to draw that freehand. The easiest thing to do is search for a photo of what you’d like to draw and trace it. Here’s a good example of a photo you could use as a starting point: Tracing a photo is also a great solution for times when you’re not sure whether you have the right to use a given photo in your course. Draw a Freeform Shape Now that you have your photo, you can insert it into PowerPoint by clicking on the Pictures button on the Insert tab. Then, also on the Insert tab, click on the Shapes button, and select the freeform shape tool. There are two main ways to draw using the freeform shape tool in PowerPoint. 1. Press and hold your mouse: Use this technique to draw an illustration freehand. This option is best for people who are comfortable drawing and have a pretty steady hand on their mouse (or access to a graphic tablet). 2. Press and release your mouse: Use this technique to draw an illustration one point at a time. This option is best for those of you who (like me!) are not comfortable drawing freehand. It allows you to create a shape by connecting a series of points. But you don’t have to choose one or the other; you can actually combine these two methods while drawing the same shape. It’s up to you to decide what works best! To create a closed shape, continue drawing until you are back to your starting point. To create an open-ended shape (or a line), double-click at any point to exit the freeform shape tool. Edit Points Once you’ve finished drawing your shape, you can fine-tune it by editing each individual point. To do that, just right-click on the shape and select Edit Points: When you’re in Edit Points mode, you can see all the places you clicked to create your shape and adjust them as needed. To move a point, just click on it and drag it to the place you want it to be. If you want, you can take it a step further by right-clicking on a point and choosing one of the following options: Add point: If you messed up when you were drawing your shape, you can add in extra points afterwards and position them as needed instead of starting over from scratch. Delete Point: If you want to get rid of an unneeded point. Open Path (if it’s closed): If instead of a closed shape, you want to create an open-ended path, choose this option to unlink the first and last points you drew. Close Path (if it’s open): If you meant to create a closed shape, but accidentally created an open path, choose this option to link the first and last points you drew. Smooth Point: To make a point more rounded, choose Smooth Point or Straight Point. When you choose Smooth Point, the handles on the point will stick out straight, instead of forming a corner. When you drag on one side of the handle, the other side will automatically adjust, creating a symmetrical curve. By playing with the length and angle of these handles, you can change the shape of the curve. Straight Point: This option also makes your point rounded, but this time you’ll notice that the handles work independently, meaning that if you drag on one side of the handle, the other side of the handle doesn’t move. This allows you to create an asymmetrical curve. Corner Point: By default, all the points on your shape are corner points. If you change your point to a smooth or a straight point and aren’t satisfied with how it looks, choose this option to revert to the default setting. By adjusting your points, you can smooth out your drawing considerably, as you can see in the before and after photos below: Before After Format Shape Once your shape looks exactly the way you want, you can hide the image you used to trace your shape and change the color as needed. If need be, you can draw another freeform shape or use a combination of default shapes to complete your illustration. For this example, you could create a cell phone out of a combination of shapes. Start by inserting a rectangle with rounded edges to make up the base of your phone: Now, as you can see, the part of the thumb is now hidden by the phone. To make it look like the thumb is on top of the phone, add a second rectangle with rounded edges that starts below the thumb and goes until the bottom of the phone, like this: Now, right-click on the first rectangle you created and select Send to Back. Your illustration should now look like this: Now repeat this process with two gray rectangles with square edges to create your screen: Finally, insert a circle for the camera, a rounded-edge square for the speaker, and a rounded-edge square for the home button of the phone. Here’s what your finished illustration should look like: And there you have it! Thanks to PowerPoint, you can create your own custom illustrations without being a professional illustrator. Thirsty for more PowerPoint illustration tips? Check out these tutorials: Creating Custom Shapes in PowerPoint How I Created These Handy People Icons in Powerpoint Did you enjoy this article? Be sure tosubscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).5 Inspiring Font Pairings for Your Next E-Learning Project
Look at any e-learning project and one of the first things you’ll notice are the fonts. Theme fonts set the stage. They establish a project’s tone—and they make a big difference in helping learners read content more easily. But, with so many options to choose from, how can you possibly pick? Thankfully, you don’t have to search online for the perfect heading and body fonts. You can simply mix and match the built-in Storyline 360 fonts and system typefaces to make your content look polished and legible. Curious to see which fonts work well together? Take a look at these five pairings you can start using right away! 1. Montserrat Medium & Montserrat Want to combine similar fonts without falling into the “it’s boring” trap? Try pairing Montserrat Medium with Montserrat. These two fonts have the same base—just with different line thicknesses. The result is an engaging, easy-on-the-eye contrast. Together, these fonts create a sense of strength and tranquility. And because of their versatility and geometric lettering, the fonts are generally safe for any project. 2. Georgia & Verdana Pairing different fonts can sometimes feel daunting. How do you know which ones to mix and match? What if you end up combining fonts that conflict instead of contrast? Choose Georgia and Verdana and you can put those worries aside, as these two fonts were designed to work together. The elegant simplicity of Georgia combined with the clear and legible Verdana font makes this classic combo a nice choice for your projects. 3. Trebuchet MS & Garamond Need a fresh look? Sometimes combining the old with the new can give a sense of unique familiarity. To capture that balance, try Trebuchet MS and Garamond. The modern Trebuchet MS paired with Garamond—one of the oldest fonts—emits a friendly and sophisticated tone, giving you the best of both worlds. 4. Oswald & Open Sans The best font pairings have visual contrast—but that contrast can't look disjointed. After all, we still need to maintain cohesiveness. Use Oswald and Open Sans to create that ideal match. Oswald’s slightly elongated characteristics combine beautifully with many fonts. Match it with the neutral and friendly Open Sans and you’ll have a distinct and professional pairing that’s instantly pleasing to the eye. 5. Raleway & Roboto Light Need to add some personality to your projects? Look no further than the dynamic Raleway and Roboto Light duo. This sleek and modern font combination is the perfect mix! Raleway works great as a heading because its subtle, artistic look attracts just the right amount of attention. Roboto Light body text completes the picture because it’s versatile and easy to read. Wrap-Up Using any of these font combinations can help your courses look captivating, professional, and readable. And since anyone using Storyline 360 already has these fonts installed, you can easily share your file and rest assured knowing the text formatting will stay intact! Of course, these are just a few pairing options; we’re sure you have many other creative ideas up your sleeve. We’d love to hear them! Which built-in fonts are your go-tos for headings and body text? For more typography tips, check out these articles: 8 Questions to Ask When Choosing Fonts & Formatting Text Insider Tips for Working with Fonts in Storyline 360 How to Use Typography to Improve Your E-Learning Storyline 360: Working with Theme Fonts Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Contrast Considerations for Accessible E-Learning
E-learning is a visual medium. Whether you’re creating a fun, game-based scenario or a basic quiz, the visual design of e-learning sets the tone for the experience. When designing accessible e-learning, there are some additional considerations to keep in mind to ensure your course design is accessible. One of those considerations is contrast. In this article, we’ll talk about what contrast is, why it’s important, who it impacts, how to measure it, and how to ensure your e-learning courses have the optimal levels. What Is Contrast? When we talk about contrast in the context of accessibility, we mean the difference in brightness between two colors. To describe this difference, we use ratios. For example, white text on a white background would have the lowest possible contrast ratio—1 to 1 (1:1)—since there’s no difference between the background and the foreground. On the other hand, black text on a white background has the highest possible contrast ratio—21 to 1 (21:1). As you may have gathered, the bigger the first number, the more contrast there is between the two colors, and vice versa. Why Should You Care? If the contrast levels between your text or buttons and the background are too low, some of your learners might struggle to see—and therefore understand and interact with—your content. And since that’s the whole point of the course you’re designing, that’s a big problem. Not to mention, depending on your country and organization, you may be legally required to follow contrast guidelines. Failure to stick to these guidelines could result in a lawsuit. For information about the applicable laws in your country, check out this resource: Web Accessibility Laws & Policies. Who Benefits When You Optimize Contrast? People often think accessibility features like optimal contrast only benefit a small group of people. They wonder if it’s worth putting in the extra effort for just a few learners. But the reality is the range of people who find these features helpful is quite large. Optimal contrast doesn’t only benefit people who were born with low-vision impairments. It’s also great for people whose vision is getting worse with age, and those who are viewing your content outside on a sunny day or in low light. And even people with no visual disabilities in perfect lighting conditions appreciate designs with optimal contrast. They’re just easier on the eyes. Look at the images below, for example: Do you see how much harder it is to read the text on the left? That’s because the contrast ratio is too low, so the text blends into the background. Accessibility features like optimal contrast benefit not only those who need them to access your content—they benefit everyone. What’s the Ideal Contrast Ratio? When it comes to accessibility, higher contrast is generally better. However, it’s best to avoid the absolute highest level of contrast—for example, black text on a white background, or vice versa (21:1)—because it’s too harsh and can cause eye strain. Instead, try swapping the black out for dark gray to make it a little easier on the eyes. Take a look at this side-by-side comparison to see for yourself what a difference this small change makes: Obviously, there will be times when you want or need to use colors other than white and dark gray. For those times, you should aim for a minimum contrast ratio of 4.5:1. How do you know if you’re meeting that contrast ratio? Keep reading to find out! Measuring the Contrast Ratio It’s important to measure the contrast ratio using a dedicated tool—and not just trust your own perception. After all, everyone perceives things differently depending on a variety of factors, including our vision and lighting. Take a look at the example below: To me, the contrast ratio for this slide seemed pretty good! The white text appeared to stand out well against the dark pink background. But when I put the colors into my contrast checker, I was surprised to see that the contrast ratio wasn’t quite high enough. As you can see in the screenshot, these colors have a contrast ratio of 3.36:1, which is below our target of 4.5:1. Luckily, my contrast checker also suggested an alternative color that does meet the target contrast ratio, making it super easy for me to adjust my design. Here’s what it looked like after I applied the suggested color: When you compare these images side by side, it’s easier to tell the second version is better, but it’s still not obvious. That’s why it’s essential to use a contrast checker. The good news is that there are tons of free tools out there that allow you to measure contrast. All of them have slightly different features and use cases. Here are some of my favorites: Polypane is a web app that not only tells you if your contrast ratio is high enough, it gives you some options if it’s not. The only downside is that you have to input HEX codes instead of simply using an eyedropper. Colour Contrast Checker is a Chrome extension that allows you to check the contrast ratio using a handy eyedropper tool. Color Contrast Analyser is similar to Colour Contrast Checker, except that it’s a desktop app. It works on both PCs and Macs. Material Design Color Tool is a web app that allows you to play around with color schemes while making sure the contrast ratio is on point. It’s a great tool to start with if you haven’t decided on colors yet. There are tons of other free color contrast apps out there. If you’re not satisfied with these, do a quick search and see what else you find. Design Considerations The Web Content Accessibility Guidelines (WCAG) for contrast* can feel overwhelming. That’s because each criterion outlines not only the main guideline, but also several exceptions. The good news is, if you hold yourself to the main guidelines—and ignore the exceptions—it’s easier for you to remember what to do, and makes your course better for your learners. With that in mind, when you’re designing courses there are four main things to remember when it comes to contrast: All text should be at least size 12. All text should have a contrast ratio of at least 4.5:1** to the background. All parts of the interface (i.e., buttons) and graphics required to understand the content should have a contrast ratio of at least 3:1 to both the background and anything touching them. Graphics that are purely aesthetic and don’t contain text or convey meaning don’t have any contrast requirements. If you stick to these rules, you should be all set from a contrast perspective. Let’s take a look at an example. This is a menu slide, so each of these squares are clickable and therefore considered to be part of the interface. That means that not only does the text need to be sufficiently contrasted against the button color (4.5:1), but the buttons themselves need to be sufficiently contrasted against the background color (3.1). If the buttons were touching, they would also need to be sufficiently contrasted from one another (3:1). Since there’s a space in between, that’s not necessary. To help you take contrast into account from the very start, use this color scheme design templateor an accessible color palette builder app like this one. Wrap-Up Designing your course with contrast guidelines in mind is about more than just checking a box on your long list of accessibility requirements. It’s about making sure all learners can read and understand your content. What could be more important than that? Follow the tips outlined in this article and be confident that you’re set when it comes to contrast. However, if you want to dig into the details of the related WCAG guidelines, check out this WebAim article or the criteria links in the footer of this article. If you’re looking for more advice on designing accessible e-learning courses, be sure to check out these helpful resources: All About Accessibility. Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter). *WCAG 2.0 Guidelines for Contrast: 1.4.3 Contrast (Minimum) 1.4.6 Contrast (Enhanced) 1.4.11 Non-Text Contrast **According to the guidelines,large-scale text can have a contrast ratio as low as 3:1, but we simplified it here to make it easier to remember and because a higher contrast is better.4 Ways to Choose an E-Learning Color Palette
Visual elements play a significant role in e-learning, and colors are a key factor. That’s because the right color choices can help your course look polished, reinforce branding, set the tone for your topic, and sometimes even help learners process and remember information. But with so many options, how do you decide which colors to use in your e-learning projects? In this article, we share easy tips for creating a color palette that’s pleasing to the eye and positively impacts your audience. 1. Consider Branding Guidelines Some organizations may require your online courses to use a specific set of brand colors. If that’s the case for you, then the hard work of building a color palette has been done for you. But to use those colors effectively, there are a few things to consider. First, you don’t have to use every color in a company’s brand guide. Using too many colors can be visually overwhelming. Many color palettes include five colors, like this one. Don’t be afraid to simplify the color scheme. The 60-30-10 rule—which is generally used in interior design—also works for e-learning. The rule uses a color palette containing a: Primary color - used 60% of the time Secondary color - used 30% of the time Accent color - used 10% of the time This rule visually balances your project and keeps designs looking sleek and minimal. Second, if some of the brand colors are hard to work with, try creating a monochrome palette by selecting a primary color and then using different tints of the color for variety. This method is perfect for keeping a consistent and cohesive look. 2. Draw Inspiration from the Subject Matter If you have a little more design freedom, try using your subject matter to help you decide on your color theme. Colors can evoke different emotions and associations, so using your content to help you decide which colors to use can ensure you set the right tone for your audience. For example, if you were creating a course about construction safety, it might make more sense to use yellow, orange, and black as your main color palette. View | Download That’s because people usually associate construction equipment with those colors. Thoughtfully choosing a color palette related to your content can help learners connect with it. 3. Get Ideas from Online Sources Not every topic has a recognizable color theme to go with it. If your course content doesn’t lend itself well to a familiar color palette, then let technology be your guide! There are plenty of color palette generators and samples available online—many of which are free! Here are a few places you can go to get inspiration: Coolors - make a palette or explore trending ones Canva - search by color or theme word Adobe Color - generate themes or search for color palettes Design Seeds - use pre-created palettes made by designers With the help of these websites, you can rest assured knowing all the colors work well together. 4. Pull Colors from Existing Assets Sometimes, you may already have a few high-quality course assets—like images—before you have to choose a color theme. If that’s the case, try using one of those images as your starting point. When you use the colors from your imagery to determine your color palette, it easily brings the course together because they complement one another. And if you’re using Storyline 360, you can use the new persistent color selector to pick up colors from the photo to create a custom color palette for your project without breaking your workflow. Such a time saver! If you’re unsure which colors to pick from the photo, you can always upload the image to websites like Colormind or iColorpalette. They’ll automatically pull out some of the dominant colors in the image and generate a color palette for you. Accessibility and Contrast These are just a few ideas to help you choose an e-learning color palette. Keep in mind, just because a color palette looks good doesn’t mean it will work well in e-learning. So before you start designing your course, it’s a good idea to check if the colors you plan to use have enough contrast—the difference in brightness between two colors. You can use this contrast checker to ensure the colors you want to use will work in your online training. The higher the contrast, the easier it is for learners to view and interact with navigation buttons, backgrounds, text, and other critical course elements. In Summary And there you have it! So the next time you’re not quite sure which colors to use in your online training, just come back to this article to help you decide. Want more tips for designing visually stunning e-learning? Check out these articles: The Essential Guide To Minimalist Design for E-Learning 5 Formatting Tips for Creating Dyslexia-Friendly E-Learning Create a Cohesive Look With These 5 Storyline 360 Visual Design Pointers 5 Ways To Look Like an E-Learning Design Pro (Even if You’re Not!) Do you have your own tips for creating the perfect e-learning color palette? Share your ideas in a comment below. Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.10 Things You Could Create Instead of an E-Learning Course
I recently purchased my first random orbital sander for a furniture refinishing project. I found that it worked very well, removing decades of mustard-colored paint with minimal effort. In fact, it worked so well that everywhere I look I see potential refinishing projects where I can use my new sander to take something old or dull and jazz it up a bit! Our innate tendency to focus on using familiar tools—regardless of whether they’re the best fit for the project—is known as the “Law of the Instrument.” Maslow famously summarized the effect as follows: “I suppose it is tempting, if the only tool you have is the hammer, to treat everything as if it were a nail.” In my experience, this statement applies just as well to the world of training, a world often saddled with finite resources and limited tools for reaching learners—most typically instructor-led training, job aids, or e-learning courses. And when tool options are restricted and every project needs to be delivered “yesterday,” it’s understandable how folks end up framing them all as e-learning courses. Today’s authoring tools make e-learning course creation so much faster and easier, why not just import that content, publish it as a course, and call it done? Unfortunately, lengthy e-learning courses aren’t always the best approach. In fact, a course is often overkill, particularly when the risk of a learner failing to perform a task doesn’t put the organization (or its patrons) in jeopardy. Forcing someone to take a course on a fairly low-risk topic would be a bit like me enrolling in a carpentry school to learn how to use my new sander. So next time you’re faced with a stack of content and a looming deadline, take a few moments to consider what else you can create with the resources you have, instead of, or in addition to, an e-learning course. I came up with a few alternatives to the e-learning course hammer (so you don’t have to!): Not sure how to integrate a compelling but lengthy case study into the training mix? Turn it into a quick, skill-based practice scenario learners can complete on their own. Have a training manual full of instructor-led activities? Turn them into a series of short independent-study exercises that folks can complete online. Time to update that out-of-date training video? Instead of a costly professionally produced training video, ask learners to submit their own video best practices with their webcams. And, if amateur video isn’t your thing? Edit all of the user-generated videos into a few “best of” tips videos organized around specific topics aligned to learning outcomes. This example of curated TED Talks built with Rise should give you a few ideas. Need people to complete a form correctly? Create an entertaining interactive tour like this one from Jackie VanNice. Not sure what to do with an old job aid? Redesign it into a learner-customizable job aid or a hybrid tool like a mouse pad that acts as a shortcut key chart. Have some expert advice to share? Consider recording a series of short audio podcasts, each featuring a topic expert. This approach can be a great way to augment larger training or organizational change initiatives. For examples on using podcasts, check out these awesome contributions from the E-Learning Heroes community. Too much data? Bring that big data down to earth by creating an interactive infographic. Interactive infographics are a great way to make data more tangible and personal to learners. Check out the brilliant community examples in this weekly e-learning challenge for some serious info-design inspiration. Is your software’s quick-reference guide anything but quick? Resist the urge to turn all of that content into a course and instead create a library of short (five minutes or less) “how to” videos targeting critical tasks. Don’t miss this helpful article for some great software simulation and screencasting pointers. Tempted to turn those bullet-heavy, text-laden PowerPoint slides into another click-and-read course? Not so fast. Try morphing the most critical slides into a series of branching scenarios or an app-like decision-making tool that supports performance. How can you make policies and procedures, checklists, forms, or other important resources more accessible and helpful to learners? Use your authoring tool to create an online repository. Rise is great for putting some structure around important documentation. Check out this example for a creative way to gather and organize safety information. How are you embracing alternatives to e-learning courses? What ways are you pushing the envelope with your authoring tools? Share your experiences with a community of e-learning peers by posting in our Building Better Courses forum, or leaving us a comment below. And remember to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.
