Which is the right Colour contrast for background and text respectively in a PowerPoint presentation?
|
People who are making a PowerPoint presentation should know the basic principles of design. In the following article we are going to overlook the main principle of the contrast. This information can be very helpful and will save you from ruining the overall effectiveness of your PowerPoint slides. As most resources about PowerPoint consider contrast issues unnecessary to be mentioned, we are going to review this topic and pay attention to some vital points. Show
During our University years and at work we see different kinds of PowerPoint presentations. Have you ever heard presenters apologizing for not being able to see properly the text on PowerPoint slides? Many people from the audience can’t see it as well. So why does this happen to us? In most cases the reason is in the size of the font which is too small. However the same problem can happen due to the sloppy color of the contrast. The most common contrast’s application in PowerPoint is the color. Alternatively the contrast can be made with the help of different shapes, sizes of your objects, types and sizes of your fonts, alignment and so on. You should remember that the contrast principle depend on all the surrounding elements. They should be different from your focal point. Your contrast will easily fail if your difference between the objects is either too weak or subtle. Let’s focus on the contrast besides colors. The easiest and the most effective way of showing the contrast in your PowerPoint presentation is by using different colors. You should involve and play with the difference in darkness and lightness between the selected colors. The colors of your presentation background and foreground should be different as well. If you need the strongest contrast you should use black and white colors. Always try to remain mindful in applying these basic principles in the design of your future PowerPoint presentation. You should be very careful using hues on your ppt slides. And keep in mind that some people from your audience may have color blindness issues. A person with a normal sight can see a perfect contrast between green and red. However someone from your audience can perceive the difference of these colors. Study carefully the basic attributes of colors, such as saturation, hue and lightness. This information may be very handy. As a designer of PowerPoint presentation you should always have an extra curve ball that can be thrown at them. Nowadays there are lots of modern and highly effective LCD displays or projectors. Such devices can lighten or alter the colors of your presentation slides while projecting them. You may spent lots of time selecting the best and the most matching combinations. But if your projector is old, everything can be spoilt. Too light meeting room is also not the best place for a successful presentation. There is one strict rule of thumb which you should follow – all the colors of your PowerPoint slides will be seen around 30% lighter comparing to what you see on your PC. Here is the list of common scenarios of ruining your PowerPoint slides:Gradient blends and steps If you use gradients, it is recommended to start with the darker on the lighter side. Your dark text on the slides should be on lighter objects.  Green-colored text If the color of your background is white, it is necessary to avoid some text colors. As practice shoes green is not the best choice as it may be handled by projectors quite badly. There must be some technical reasons but for sure green is very problematic on white background of your PowerPoint template. Therefore you should always be very careful choosing the text colors for your titles, the main data points and the rest of the key text. Select much darker colors for text with a white-colored background. Colors on dark ppt background Avoid using blue or red text color on a black ppt background. Your text may be washed out or indistinguishable to your audience. Standard colors such as blue, red, green should be avoided. Always use light colors for dark backgrounds. They will surely stand out while projecting your presentation. The final tip is to be always kind and attentive to your audience!
The Takeaways
Page Contents
IntroductionColor is an effective way to incorporate design aspects into your documents and websites. However, it is important to make sure that fonts and images have a sufficient contrast or use other mechanisms to help visually impaired users understand the content. While the official minimums for AA are an absolute minimum MSU requirement it is best to also remember that MSU has a broad MSU inclusion policy so if you find yourself tweaking something to just hit the AA minimum you probably ought to stop and ask yourself if there is any justification for hitting the bare minimum. Usually there will not be so try to think more inclusively and meet or exceed even the AAA minimums. The official contrast computation rules are not particularly perfect since they make some assumptions about green and/or hue that don't actually precisely track contrast recognition even in individuals without vision issues. For example, while it is technically possible to have some shades of green background on which white and black letters both exceed the minimum contrast ratio by a bit practically all users will likely find either the black or the white harder to read than the other. To properly test color and contrast issues you will need some way to accurately compare colors as can be done by following the instructions later in this document for "Installing the Colour Contrast Analyser" and using it. Another reason for being more inclusive with contrast is that text over images contrast is often created with a specific image or images in mind for which the contrast ratios work "perfectly" but then someone else comes along and substitutes a new image or two and suddenly the contrast ratios do not work. The same holds true for various fonts with varying stroke widths, character widths, font complexity, etc. What worked well over an initial image doesn't work so well over the new one. In fact, a good idea when you see text over images with no way, such as a background box or a background cloud which is tuned to guarantee success for a particular font of a particular size and a particular color, is to imagine that the image was changed to one with perhaps black where white is now or white where black is now or very busy content right behind a key word in the text or even different text in a different font or color. Just eyeballing it, do you think the contrast would still be acceptable? Focus, hover, active, visitedUnfortunately with the current wide variety of devices and browsers it is no longer appropriate to simply let the browser focus indicators handle their responsibility on their own. Other document display tools such as Word and PowerPoint don't give you the control that web pages with CSS (Cascading Style Sheets) do. When setting CSS for link, visited, hover, active, focus it is generally best to set the ones you need in that order for best behavior consistency. The indicators may be anything that does not cause the space taken up by the link or other active item to change size because changing size can cause reflow which causes page content to disconcertingly jump around and be distracting for all users. The general conventions are that a link which is in its native state is both a different color from normal text and underlined, when it gets the focus (and often hover) something changes, typically a dashed outline, once it has been visited the color substantially darkens, and when active there is also at least a color change. But there are no hard and fast rules except that all color combinations must be distinct with regard to contrast or otherwise differentiated and the size cannot change. One goal is to have an MSU recommended combination that balances the required differences available with the next branding or web styling guide. It is also best to have only one consistent style indicator for (at least) focus throughout a website. Making the focus distinction by, for example, outline in one place but underline in another place and foreground/background swapping in another is not appropriate and is confusing for everyone. Original browser focus indicators were a different color single-pixel-width outline for whatever had the current focus. With today's high-density pixel screens on all types of devices the single pixel width is no longer adequate and should always be set to at least 2 pixels wide. Solid is also more readily visible than dashed. Color choices must be done in a way that guarantees high contrast, something that is particularly difficult on images that are also links or controls (e.g., buttons). For such focusable items it may be necessary to provide alternative class definitions/designations understanding full well that the next webmaster will have to understand the need for choosing and applying an appropriate class if they change the images. Clear documentation of such requirements is the originator's responsibility. While borders can also aid in being a solution or an indicator they must be implemented in such a way that they work without changing the space taken up by the item, in other words they must remain consistent for browsers that use either the standard CSS box model or the original Microsoft box model. Don't Be Afraid of WhiteIn some circles there is a loud cry that the color white, especially as a background color, is too bright. Ignore the cry. If a white background is "too bright" it means the device operator that is complaining about the brightness has not properly adjusted the brightness and/or contrast of their device to meet their and their eyes' needs! Generally for websites/electronic documents you should assume that individuals will all be using their own devices and that they, or someone assisting them, can have properly set the device brightness and contrast for normal conditions. Occasionally it may need adjustment for working outdoors on a sunny day or in a darkened room but those are not document/page author/webmaster concerns. They very well might be concerns for an ATM kiosk maker but not for general electronic document creators. Black text on a white background is still great for reading but in bright sunlight even a book printed on dull newsprint paper can be impossible to read until it has been shaded from the direct sun. Likewise don't fall prey to demands for "night reading modes" and similar issues for web sites and electronic documents. Let those modes be created by (preferably) the operating system developers where it has to be done only once. Or maybe by browser or reader software applications where again any user adjustments apply across all websites/documents. Imagine your website links to other websites (as it very likely does) and your user nicely visits your website in a darkened room and uses your on-the-page dimming control to get the brightness down to where they like it. Then they follow a link to a well designed black-on-white site and get blasted by the intense brightness. Should they have to find the new site's control and adjust it too? No. It is likewise impossible for you to win with light characters on a dark background because some eyes need the brightness of the light characters boosted for best reading while other eyes need the brightness dimmed to avoid halos. Adhere to universal design principles for your page/document out of the box, use the full spectrum of colors with care, and don't try to provide an experience perfect for everybody in every situation or controls for adjustment of your website/document alone. TextIt is essential that there is appropriate contrast between text and the background behind it. In general, light colored text should have a dark background and dark colored text should have a light background. This covers text in all documents including web pages, Word documents, PowerPoint presentations, and PDFs. WCAG 2.0 AA 1.4.3 specifies that (assumed 16px, 12pt) text must have a minimum color contrast ratio of 4.5:1. However, AA minimums are just that, minimums, not magic bullets. The AAA level standard is 7:1. Be considerate of users that need AAA minimums when choosing color combinations (think "inclusion"). And keep in mind that the AA minimums are barely tolerable as is demonstrated at the W3C color vision example page, for persons (2,500 on the MSU campus) with colorblindness. When the text is large, 14pt (18.5px) and bold, or 18pt (24px) the allowed minimum contrast ratio is 3:1 at AA and 4.5:1 at AAA. (Click for more on fonts per se.) To get an idea of what these text sizes look like examine the below desktop image from a 96 dpi screen on a Windows computer in the Firefox browser. Appearance on the device you are viewing with will make a difference. The things to observe are that the default text size is indeed, 16px, that 16px and 12pt are the same size, that the Microsoft standard Times New Roman type shown in the image is a small format within its designated point size as compared against the more normal 12pt Ariel, and that 10pt Arial lower case letters are exactly the same height as lower case 12pt Times New Roman characters. There have been lawsuits over type size because, within the height of 12pt, font creators are free to make their characters whatever size they want (and still call it 12pt). For much more information on selecting fonts see the Generic Fonts Tutorial. The short answer is that the Arial font puts a normal size 12pt character in its 12pt space while the Times New Roman font puts only a 10pt character in the same 12pt vertical space. The WCAG standards were written based on 12pt characters in 12pt character spaces so be aware of that since the true 12pt characters are much more inclusive as the below image demonstrates. Or to say it the other way around, if you're going to use Times New Roman or any other small format font you should make its size larger than 12pt/16px in order to meet the intended goals of WCAG and MSU Inclusion. For Times New Roman that would be 120% but just setting that as a base size has its own issues as is described in the Generic Fonts Tutorial. As text size enlarges the distinctions between sizes become less critical. When text is over a background image or gradient or similar, effectively every point on the edge of every letter must meet at least the 4.5:1 or 3:1 minimum contrast criteria based on the font size. A single pixel wide boarder all the way around the letter can suffice on 96dpi screens but may be problematic on higher resolution screens with anti-aliasing (blending of colors to make edges appear visually smoother). Drop shadows that do not effectively appear on all edges are never acceptable for meeting the minimum contrast requirements when the character color vs. background itself does not. The minimum ratios assume fonts of normal stroke width and basic styling (e.g., serif/sans-serif) and allow the testing to be done with the nominal specified color of the font regardless of any anti-aliasing or, with anti-aliasing the text color can be taken in 2 pixels from the edge (but there is no guidance, other than nominal color, for the frequent case where a font has no pixel in 2 pixels from every edge). For any font the Digital Experience (DigitalX) team recommendation is that at least the AAA contrast level be met for nominal font color against the least contrasting background behind it and especially so on thin stroke or fancy fonts. "The minimum contrast success criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast." [from 1.4.3 Contrast (Minimum)] That statement applies to error, warning, and other type messages that may not be "page content" also; essentially it applies to any text shown that the user is expected to read regardless of when it is shown or how it is triggered. How to test contrast for mouseover highlights, boxes that disappear on loss of focus, etc. is covered below in the "Capturing Ephemeral Contrast" heading. Adding Meaning via ColorIt is also essential that color is itself not "the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element" per 1.4.1 Use of Color which is an A level requirement. Examples of other methods for text are underline (e.g., for links), added text (e.g., "Error:"), small images (e.g., a ? icon), font style (e.g., italics), and color contrast. When color contrast is used as the visually distinguishing technique the minimum contrast ratio allowed between regular text and the color distinguished text is 3:1 but in DigitalX we recommend at least 4.5:1 and the AAA 7:1 or beyond is even better as long as the color also meets the proper contrast ratio with the background color. While the WCAG 2.0 guidelines have no specific criterion for color contrast of non-text elements they do recommend "good contrast" and identify external standards with the expectation you will be meeting them. For such elements "good contrast" has generally been understood to mean at least 3:1 as is now explicitly specified in WCAG 2.1 1.4.11 (AA) Non-text Contrast. Be aware that many font-families have a thinner stroke for italics which may further degrade with color anti-aliasing so look carefully at text distinguished by both font-style and color to be sure the distinction will be readily visible across devices in any text size your document uses. That potential issue usually goes away if the font size is 120% of a default true 12pt or more. Also, for websites in particular, it is not sufficient for underline, for example, as an additional distinction to only appear when the mouse pointer is hovered over say a link or the link is tabbed to, the distinguishing characteristics must be visible full time such that a user scanning down the page using the right scroll bar will see it (nor, generally, will a mobile user). Also be aware that, while not outright forbidden, the use of an underline for any reason other than to identify a link is strongly frowned upon because of the prevalence of underlining for links. It is also poor for mouse hover or focus to cause a font change that changes the space taken up by the font because that will, in documents that allow text reflow, usually cause other content to move about on the page (which is generally disconcerting for all visual users, e.g., what happened?). Changing between fonts, especially uncommon fonts, is also not a good way to provide a distinction other than color because such changes assume that the device the user is on will have the font available and can render it distinctly from other fonts and that the user has not set their own font(s). Adding Meaning Via Text Color Plus ExamplesTurn in your final exam by Friday at 5:00 PM. First, is there anything wrong with the immediately above line? No, it properly conveys the message. Turn in your final exam by Friday at 5:00 PM. Now is there anything wrong with the immediately above line? Yes, the red (#FF0000) of the "Friday at 5:00 PM" does not have sufficient contrast to differentiate it from the (white, #FFFFFF) background. Pure red (#FF000) on pure white (#FFFFFF) always fails the minimum AA contrast ratio for normal size text. It is irrelevant whether or not the red is sufficiently contrasted from the black text of the rest of the line (though it is). Turn in your final exam by Friday at 5:00 PM. The immediately above line fixes the contrast from the previous example line and now technically the contrast of the red (#ED0000) versus the white (#FFFFFF) or the black (#000000) both pass at 4.6:1 so we could stop here and be AA compliant. But if you were to look at the contrast of the red to the black in the red/black text shown in the Colour Contrast Analyser for either the "Text" boxes or the color blindness examples you would see that some users might have trouble. Turn in your final exam by Friday at 5:00 PM. The above line adds a strong tag in addition to an acceptable 4.5:1 or better red (#DD0000) to the "Friday at 5:00 PM" text so now we have something that is very clear. But all we've done with the red and strong is add emphasis, albeit via two routes (color and strong). No meaning has been added relative to either the color or strong. Let's say there was a note at the beginning of the document that stated: "Red Strong text denotes deadlines that are non-negotiable (barring a documented emergency)." Now are our red color and strong tag adequate? What if generally we know that screen reader users do not have style changes read to them? What if strong is used in other contexts also. What if bold is used in other contexts. What if bold is not how strong is conveyed by the users override style sheet. We can add one more thing, actual text, and clear up the meaning of the red strong unequivocally for everyone. Color is not the only indicator of meaning below, in fact, we've added 3 indicators of which only 1 is color and in the process we've made the meaning very clear and inclusive even when "strong" is not shown as bold or not read by a screen reader. Turn in your final exam by Friday at 5:00 PM (non-negotiable). TemplatesUsing forms in HTML, Word, PDFs, etc. is often appropriate (see the Generic Forms Tutorial) but for some types of documents, such as templates, other means of identifying text that the user is expected to replace when they convert the template into their own document are needed. Color is often the first choice but it generally will not work on its own because screen reader users will not be hearing about color changes since any screen reader capability to read the colors will be turned off by default. To solve this problem most universally, three things should be done similar to the above "Adding Meaning via Color." In template documents, start with a table (because tables can be easily found and cleanly deleted) at the top with instructions that explain how the template text that is to be replaced is identified. The content of the table should include a cell row explaining how to delete the table just before the final save of the document the user is creating based on the template. Here is an example explanation of text to be replaced: Text in $$green and bold and bookended by pairs of dollar signs$$ below in this document should be replaced by your specific information. Merely showing the text in green would not be sufficient and, if the document otherwise includes meaningful bold text (such as for strong emphasis) then it may be good to add another indicator such as "$$green and bold and bookended by pairs of dollar signs and underlined$$" [intentionally not styled in this web tutorial] since, in this case, the underline in the template should not be confusable with a link and the underline will be replaced by the time the document is completed. In any event, the $$ in the above will be read (if default settings are kept) by a screen reader and it is easily searchable for all users creating their own document from the template. Any suggestions, even the above, should be carefully tested with screen readers and only ones that work should be used. LogosLogos, within themselves, are exempt from the color contrast standards. For MSU logos, the MSU branding standards also apply and when used properly substantially exceed the WCAG contrast standards. However, be careful when using MSU logos, or any images, with transparent areas. To see why look at the below image or visit the MSU Brand Logos and Marks page then set your computer's high contrast to a dark one. (In Windows 10 type "high contrast" into the "Type here to search" box in the taskbar, click the high contrast settings option, and Apply the "High Contrast Black" from the "Choose a theme" dropdown. Scroll the page and look at the logos all of which, as is, have transparent backgrounds.) In Microsoft browsers earlier than Edge, CSS backgrounds will be ignored and the transparent part of the logo will show through a black background making the dark MSU green almost invisible (see below image). Firefox currently sometimes does and sometimes does not ignore CSS background while Chrome essentially ignores the Windows 10 operating system accessibility settings. Modern Apple computers have a similar contrast setting (System Preferences > Accessibility > Display > Invert Colors) but instead of the logos essentially disappearing, the MSU green is turned to pink and/or the CSS backgrounds, or images, you apply are properly handled. The only fix for best consistency across browsers is to modify the logo with an appropriate color (typically white) in place of the transparency. You may also need a white CSS border for best appearance. Logos of other organizations, e.g., Facebook, Twitter, may also be subject to use or license agreements established by or with their owners. Checking Color ContrastIn the next few paragraphs this tutorial will briefly cover how to check color contrast using the Colour Contrast Analyser and the D2L color contrast checker but there are many other tools available. You will also find that when using the MSU Evaluation Protocol for WCAG 2.0 AA you are asked to subjectively evaluate visibility without the use of a tool. One caution, many color contrast testers that test a whole page only test the immediately visible page content and ignore error messages, hover changes, placeholders, etc., which also are required to meet the minimum contrast ratios. Installing the Colour Contrast Analyser (CCA)The Colour Contrast Analyser is a free tool made available by the Paciello Group and is used to assess the contrast of text against its background or any other contrast level between two colors. There are several versions available and we currently recommend the older versions because they more easily allow pixel specific selection which is essential when validating the contrast of fonts against a background. The instructions on using the tool further below are for the older version. The instructions immediately below for getting the older version are current as of this writing but subject to change so if you find they no longer work, please contact us at immediately. To install the older Windows version visit https://github.com/ThePacielloGroup/CCA-Win/releases/tag/2.5.0 and download and run CCA2.5.0.exe. (You may have to remove any extension, such as .htm, that might be placed after the downloaded file name and you may have to show "More info" and click "Run anyway" and/or other prompts to complete the installation.) For Apple computers go to https://github.com/ThePacielloGroup/CCA-OSX/releases/tag/2.4 and download and install the Colour.Contrast.Analyser.app.zip version. If you wish to try the most current version of the Colour Contrast Analyser, it will be available via The Paciello Group website for both PC and Mac operating systems. As of this writing installations of the older version and the newer version can both be installed simultaneously without conflict. The Paciello Group link will take you to a Github website where, for Apple computers CCA-1.0.0-mac.dmg is the correct file while for Windows computers, CCA-Setup-1.0.0.exe is the correct file to download and run for installation. Be aware that the 1.0.0 number in the middle of the file name will change as updates are made. The task bar icons for old and new CCA will be the same so you may want to be sure the newer one is second in line. If you use the new version you probably need to keep your version current because improvements will likely be ongoing particularly in regard to handling of operating system features such as multiple screens. The images shown below are from the recommended older version but the use process should still be essentially correct for any newer version. If the use instructions are no longer correct, please contact us at . Using the Colour Contrast AnalyserTo examine the color contrast of a page or site, begin by opening the Colour Contrast Analyser. The Windows version is shown first followed by the Apple version. In the Windows version, click the Eyedropper Icon under the "Foreground" section and on an Apple click the color picker rectangle to the far right of the words "Foreground Colour" near the top then at the bottom of the color picker click the Eyedropper Icon. The eyedropper tool allows you to use the mouse to select individual pixels of text, background, whatever. For text you should choose a sample pixel that best represents the text's color (usually somewhere in a vertical or horizontal line). Alternatively, if you know the hex value of the color of the text, you can enter it into the Hex dialog box but be careful, the tool often reports a contrast ratio even for invalid hex numbers rather than identifying the invalid entry as an error. In the following example, the brown hyperlink text of www.webaccess.msu.edu is examined. Note that the straight hyperlink underline is used for examination. The pixel selected is identified by the little box below the main downstroke in the "d". Then find and use the Eyedropper Icon for the Background section. Select an area of the background close to the sample text. Like with text color, if you know the hex value of a uniform background, you can also enter it into the Hex dialog box but if the background is an image or gradient you will need to pick a pixel. When examining the contrast of text against backgrounds that are not a single color (such as gradient backgrounds or image backgrounds), use, as is shown below, a background sample that is closest to the color of the text but not an anti-aliased part of the text (e.g., when checking light text, use the lightest color in the background immediately adjacent the text). Results will be shown in the Colour Contrast Analyser. MSU’s technical guidelines only require AA conformance. AAA conformance is not required but is recommended (think "inclusion"). The first example above ("edu") shows the foreground/background pair pass for everything except AAA on normal font size text while the second ("the") shows that the pair fail for all font sizes. Capturing Ephemeral ContrastTo handle flyout or dropdown menus and such other things that normally vanish (a major but common OS/application accessibility failure) when the CCA tool (or any other) window gets the focus, use your desktop computer's screen, window, or selection capture tool to grab at least what you will need to do the contrast analysis. On a Windows computer tapping the "Print Screen" (or PrtScrn or similar) will capture the current screen with any flyouts, etc., intact and you'll then need to paste that into a bitmap graphics program such as the Windows Accessories Paint program. On an Apple computer using Shift+Command+4 then selecting the area you want will automatically save the image to the desktop where clicking on it will open it in a preview window. Once your captured content is being viewed in its own window you can use the CCA eyedropper on that captured image. D2L Contrast checkerTo check your contrast for HTML web page content internal to D2L, launch the D2L HTML editor. You cannot readily check contrast for document types other than web pages in D2L with the D2L contrast checker. One route to the D2L web page contrast checker is from the profile button dropdown where you can select "Viewing as Course Editor" then More > Course Admin > Site Resources > Content. If Course Admin is visible without or in addition to the "More" option simply start from "Course Admin". Then navigate to a module and page that is a "Web Page" then click the "Edit HTML" button. Click in the text you want to check the contrast for to set the position of the edit cursor.
Color in Graphics, Charts, etc.When using color in a chart, to ensure all users, and particularly colorblind viewers, can access and understand your graphics, a few basic guidelines should be adhered to:
A generally good way to think of this is, If I printed this on a grayscale black and white printer, could a sighted user correctly understand the graphic? Could it also be understood without any description in the text? Unfortunately no charting program is known that gets accessibility correct without considerable creator effort. The most consistent failures are text that is too small, keys that are too small, and colors with inadequate contrast. The best way to understand the red/green/orange bullet in the above list is to use the Colour Contrast Analyser, set the colors to the ones you want to compare, and check the "Show contrast result for color blindness" checkbox. In general you shouldn't be able to use those colors (or any hue in their relative spectrums) in pairs and get a 3:1 contrast ratio anyway. Stay aware that in charts and graphs particularly, contrast distinctions still should exceed 3:1 even when the two colors are not side by side and there is no other distinction, such as lines that show what labels belong to what sections of, for example, a pie chart. High contrast lines between pie slices, or a pulled apart pie can help separate colors. Different line weights and dashing and point marks can also help. Below you will find several images of graphics. Text around these graphics will discuss the accessibility issues for all user disabilities, not just blindness. Incorrect Contrast Pie Chart Example:The contrast in the above pie chart fails on all but two adjacent colors and the fact that the key is in order starting from 12:00 o'clock and proceeding clockwise does not overcome that. Text sizes in this chart have been corrected from too small as output from the original program. Note that the default title and key text as output by the default chart settings exactly hit the 7:1 AAA contrast ratio. If the first slice does not start from a 12:00 o'clock radius you need to be certain that keys or labels can be correctly associated with their respective slices and that is usually more easily done with hatching or screening. Pie Contrast Improved with BordersWhile the borders added to the slices above help there are still contrast issues. In fact no single border color will work with sufficient contrast between the border and all slices. You may also note that adding the border caused the key color boxes to shrink dramatically because the white border was added to them too. Exploding the Pie, adding Percent DataIn the above version the pie slices have been separated by explosion and while some meet the minimum 3:1 contrast ratio with the white explosion separation some do not. Also note that the applicable pie slice portions as a percentage have been added in white text over a black background because there is no single text color that would otherwise work with the required contrast ratio when the percentages are applied directly over their respective slice. Note that in the above example the chart title and the key text color was changed to a full 21:1 so they stand out to the maximum extent for all users. Labeled Pie SlicesIn the above version of the Pie Chart all slices are individually labeled and the text is larger and bolder and with higher contrast than the minimum AAA requirements. This chart works on a desktop computer, on a phone, and readily enlarges 200% or more. Additionally the colors of the individual slices have been at least somewhat matched with user associations to the pie type they represent and slices that have too low of contrast with the white background have been given black borders. Unfortunately the leader lines that definitively tie each slice label to its slice are too low in contrast. Pie Chart FinalThis final version of the chart fixes the contrast issue with the leader lines and additionally makes the text "large" by using 14pt bold type. Could it be improved? Certainly, a drawing tool that anti-aliased the leader lines might make the image better as would more separation between the smaller slices. But is it going to work for all users? Certainly, and more so if this were a real chart with real data and had an alt text of "Pie Chart (about pies), Apple 35%, Cherry 25%, Pumpkin 20%, Chocolate 8%, Key-lime 6%, Mincemeat 3%, Other 3%." (Shouldn't Pecan and Coconut Cream be in there prominently somewhere?) Region Chart Showing Non-contiguous Hatching AreasA map such as the above is a better example where "convention" such as starting from 12:00 o'clock and going clockwise doesn't work so well and where order is not so obvious and there is a color or hatching key off to the side because lines from categories to single areas won't work. (Adapted from http://geo.msu.edu/extra/geogmich/ag_regions.html) Note here also that in this case the hatching all goes in the same direction thus avoiding irrelevant busyness or perhaps a jangling feeling. The touch of color has insufficient contrast compared to white but the hatching completely removes any ambiguity so the colors can stay as they are. Basic Bar ChartBar charts similar to this can be found all over the internet that purport to show that the colors of the two columns fail to properly meet the color contrast requirements. While it is true that the difference between the two colors chosen for the products, medium blue and dull yellow, do not have at least a 3:1 contrast ratio it is equally true that the colors in this chart are not needed to understand the chart. The fact that the left bar is also the leftmost item in the key is sufficient for ensuring that something other than color distinguishes the bars in each pair. The same would also hold if the key were in the upper right with "Product 1" above "Product 2." You should note however, that without the black boarders around the bars they would not pass the color contrast requirements relative to the background white. If you do find yourself with a chart where the labeling/key is not properly labeled by order you should correct the order (by cut and paste if necessary if you cannot set it in the graphing program). Likewise a pie chart where the first slice of pie starts with a radius from 12:00, top-dead-center and proceeds around clockwise to the right while the key is left-to-right or top-to-bottom is perfectly understandable as long as the color differences between adjacent slices have sufficient contrast, are separated by a line of sufficient contrast, are pulled apart so they are distinct, or are properly distinguished by hatching or screening. The reality is that the above chart has much more significant problems than color contrast. The text type size is not a minimum of 16pt except for the main title which exactly hits it and even then it has anti-aliasing issues. While all text in the chart probably met the 16pt size when the chart was created, the chart's reduction to the size here presented as a web image does not. There is also the issue of it being a time series which might be better shown as a line chart (more fully discussed later). Additionally the default 0 line has insufficient contrast and the product keys are too small to work on a phone. Fixed Bar Chart Gilded with HatchingThe above reworked bar chart does add hatching to one bar and will reduce the odds of misunderstanding but you should also be aware that hatching, when poorly done such as too bold and too close together of lines or wild variations in slope can result in moire effects that cause the lines to appear to move, take on colors of their own, or generally get lost in confusion, so some people recommend only using various dot screening densities or gray (or other color) shades but they too have their own issues with screen pixel density sizes, anti-aliasing, and screen color limitations. The need for color distinctions to have at least a minimum contrast ratio of 3 between them poses a limit on number of colors/shades that can be used while hatching and screens have a lot more flexibility. There are no simple perfect answers, imagine a 100% scale where the bulk of the results (or just the critical results) are in the 1-2% range but where other items are over 70% necessitating the full 100% range be shown. Often the choice of graph/chart/table type for showing the data is critical and careful selection of what to include and what to omit is worth the effort rather than using a poor choice and trying to force some (appropriate or inappropriate) means of differentiation to work. Even the hatching shown above could probably be improved for better visibility on phones and certainly the sized of the key boxes would be still better enlarged further, but, as previously noted, this chart works just fine without the hatching. Though it may not be the best chart type for the data. Other improvements to the previous version are that the previous text sizes of all parts have been enlarged to be at least 14pt bold. The added exact values of the chart bar heights have been added at the minimum recommended 12pt size. If the exact numbers are not important then it is not necessary to have them but the catch is that if you are going to include them in the alt text and won't also have them in a table associated with the chart you may be giving screen reader users more information than you are giving other users. The below chart takes the same data as the above bar charts and makes it into a line chart which is generally much more appropriate for showing something where the horizontal axis represents some type of time series. Line Chart for Time SeriesWhile the above chart is not as "full" looking as the bar chart is it is easier to follow the differences between the two products in their changes over time. Where this chart falls down is that the default order (due to the order in the data) of the two lines versus the key order is not conventional. It is, even again in spite of the inadequate-for-differentiation contrast of the two colors, possible to distinguish between the two lines due to the circles and triangles on the data points of the line. So as it stands this (with a proper alt text) will meet the WCAG 2.0 AA criteria. But the below version is even better. You may also observe that removed are both the redundant "Number of Sales" from the title and the vertical axis in this and the below line charts that originally appeared in the above bar charts. It might be arguable that removing that text could pose an understanding difficulty for a cognitively disabled user but on the other hand the clutter of the extra words might just as easily decrease ready grasp of the chart. Line Chart Key Order CorrectedThis version of the line chart makes sure that the lines are clearly identified by putting the appropriate key to the right of each of the product lines. While the 2 then 1 order of the product names seems odd it is only due to their arbitrary choice, if the products were "red bricks" and "yellow bricks" there would be no apparent unorderedness. Also done is that the original 14pt key labels and week labels have been upgraded to bold and the data point symbols have been changed to hollow symbols with the actual data value in each. These latter have a text size of 12pt. If the data point numbers were made any larger there would be overlap issues. Try out the two charts above on your phone and see which type, the unbolded vs bolded (for the product labels and the weeks) appears like it will work best for the most users. What is the best color background for a PowerPoint presentation?Stick with white or light beige on a dark background or black (or otherwise very dark color) on a light background. Your slides will have a more professional appearance as a result. Stay away from gradients in text unless the words are large and intended to be primarily decorative in nature.
What is background color and text color?Definition and Usage
The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read.
Which color is best for background?Best background image for best color perception
If you want the optimal desktop background, then a neutral gray is recommended. Our eyes can be influenced very easily by vibrant color: a neutral gray is the least distracting. The background is neutral grey. The eyes have no change for distraction.
|
