Module 13: Color Contrast | Section508.gov

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Module 13: Color Contrast | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:title" content="Section508.gov" /> <meta name="twitter:description" content="Information about the Section508.gov website, GSA鈥檚 Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)." /> <meta property="og:type" content="article"> <link rel="canonical" href="https://www.section508.gov/training/web-software/andi-training-videos/color-contrast/" /> <meta property="og:url" content="https://www.section508.gov/training/web-software/andi-training-videos/color-contrast/" />   <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-chrome-192x192.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" /> <link rel="manifest" href="/assets/images/site.webmanifest" />  <link rel="stylesheet" type="text/css" href="/assets/css/index.css?1732224641581990839"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="/assets/js/uswds-init.min.js?1732224641581990839"></script>  <meta name="topic" content="Training (train)"> <meta name="sub-topic" content="Design, Develop, Testing for Accessibility Training or Tools"> <meta name="audience" content="federal employee (fedemp), 508 Program Manager (508pm), Developers and Testers (dev-test), Content Creators (creator), Public (public)"> <meta name="resource-type" content="Training"> <meta name="format" content="Video & Synchronized Media (video)"> </head> <body> <section aria-label="Official Government Site Banner" class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to secondary navigation</a> <a class="usa-skipnav" href="#content-section">Skip to main content</a> <div class="usa-banner" aria-label="Official website of the United States government" > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here鈥檚 how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default" > <span class="usa-banner__button-text">Here鈥檚 how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner-default" hidden="" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="Https" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false" > <title id="banner-lock-title-default">Lock</title> <desc id="banner-lock-description-default">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you鈥檝e safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </div> <button id="backtotop" title="Go to top" style="display: none">藙 Top</button> <div class="usa-overlay"></div> </section> <header class="usa-header usa-header--extended" role="banner"> <div class="usa-navbar"> <div class="usa-logo" id="extended-logo"> <span><a href="/" onclick="return navigate(this)"> <img src="/assets/images/508-logo-cropped-web-altgreen.png" alt="Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible." class="logo" /> </a></span> </div> <button class="usa-menu-btn">Menu</button> </div> <nav id="site-nav" role="navigation" class="usa-nav" aria-label="Primary Site Navigation"> <div class="usa-nav__inner"> <button class="usa-nav__close"><img alt="close" src="/assets/img/close.svg"></button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a aria-label="Policy & Management primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/manage/"><span>Policy & Management</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Acquisition primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/buy-sell/"><span>Acquisition</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Content Creation primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/create/"><span>Content Creation</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Design & Develop primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/develop/"><span>Design & Develop</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Testing primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/test/"><span>Testing</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Training, Tools & Events primary navigation" class="usa-nav__link usa-current" onclick="return navigate(this)" href="/training/"><span>Training, Tools & Events</span></a> </li> </ul> <div class="usa-nav__secondary"> <ul class="usa-nav__secondary-links"> <li class="usa-nav__secondary-item"> <a href="/blog/" class="external-link" onclick="return navigate(this)">Blogs & Updates</a> </li> <li class="usa-nav__secondary-item"> <a href="/tools/program-manager-listing/" class="external-link" onclick="return navigate(this)">My Agency鈥檚 508 PM</a> </li> <li class="usa-nav__secondary-item"> <a href="/content/about-us/" class="external-link" onclick="return navigate(this)">About Us</a> </li> </ul> <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input name="affiliate" type="hidden" value="gsa-section508-accessibility" /> <div role="search"> <label class="usa-sr-only" for="extended-search-field-small">Search</label> <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off"> <button class="usa-button primary-background-color" type="submit"><img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button> </div> </form> </div> </div> </nav> </header> <section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet: grid-col"> <span class="banner-title-color font-sans-lg margin-bottom-0"> ANDI Video Training </span> <br /> <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0"> Module 13: Color Contrast </h1> </div> </div> </div> </section> <div id="main-content" class="usa-layout-docs usa-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <aside class="usa-layout-docs__sidenav desktop:grid-col-3 padding-bottom-4"> <nav id="sec-nav" aria-label="Secondary Navigation"> <ul class="usa-sidenav menu"><li class="usa-sidenav__item"> <a href="/training/" >Training, Tools & Events</a> </li><li class="usa-sidenav__item"> <a href="/training-home/" >Training Overview</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Online Training Courses - Submenu" aria-expanded="false">Online Training Courses</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/online-course/accessible-for-executives/">Accessibility of ICT for Government Executives</a> </li><li class="usa-sidenav__item "> <a href="/training/online-course/ms-word-best-practices/">Microsoft Word & Accessibility Best Practices</a> </li><li class="usa-sidenav__item "> <a href="/training/online-course/micro-purchases/">Micro-Purchases and Section 508 Requirements</a> </li><li class="usa-sidenav__item "> <a href="/training/online-course/procuring-section-508-conformant-ict/">Procuring Section 508 Conformant ICT Products and Services</a> </li><li class="usa-sidenav__item "> <a href="/training/online-course/section-508-what-is-it/">Section 508: What Is It and Why Is It Important?</a> </li><li class="usa-sidenav__item "> <a href="/training/online-course/soliciting-and-evaluating-acrs/">Soliciting and Evaluating Accessibility Conformance Reports in Federal ICT Procurement </a> </li><li class="usa-sidenav__item "> <a href="/training-home#federal-acquisition-institute">Online Training Courses via FAI</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Training Videos Library - Submenu" aria-expanded="false">Training Videos Library</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Accessibility Requirements Tool - Submenu" aria-expanded="false">Accessibility Requirements Tool</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/art/introducing-art-01/">What is ART and When Do I Need to Use It?</a> </li><li class="usa-sidenav__item "> <a href="/training/art/introducing-art-02/">Where is ART and How Do I Use It?</a> </li><li class="usa-sidenav__item "> <a href="/training/art/introducing-art-03/">How Do I Use the Section 508 Requirements Created by ART?</a> </li><li class="usa-sidenav__item "> <a href="/training/art/introducing-art-04/">How Do I Generate a List for Multiple Procurements?</a> </li><li class="usa-sidenav__item "> <a href="/training/art/introducing-art-05/">How Do I Use JSON to Modify My Report?</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Document - Submenu" aria-expanded="false">Document</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx00/">Module 0: Introduction & Background</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx01/">Module 1: Save as a Word Document (.docx) with a Descriptive Filename</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx02/">Module 2: Use Styles to Create Headings</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx03/">Module 3: Use Built-in Features to Create Lists</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx04/">Module 4: Use Built-in Features to Organize Content</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx05/">Module 5: Use Built-in Features to Create Layout and Data Tables</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx06/">Module 6: Identify Distinct Languages</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx07/">Module 7: Create Unambiguous Names for Links</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx08/">Module 8: Duplicate Vital Information in Headers, Footers and Watermarks</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx09/">Module 9: Create Accessible Images and Other Objects</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx10/">Module 10: Create Accessible Textboxes</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx11/">Module 11: Use Color and Other Sensory Characteristics Plus Text to Convey Meaning</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx12/">Module 12: Create the Required Color Contrast</a> </li><li class="usa-sidenav__item "> <a href="/training/documents/aed-cop-docx13/">Module 13: Create Accessible Embedded Files</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Presentation - Submenu" aria-expanded="false">Presentation</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/presentations/creating-powerpoint-templates/">Creating PowerPoint Templates</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx00/">Module 0: Introduction & Background</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx01/">Module 1: Creating the Presentation鈥檚 Layout Design and Establishing the Logical Reading Order</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx02/">Module 2: Ensuring the Contrast Ratio Between Text and Background is Sufficient</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx03/">Module 3: Ensuring Color and Other Visual Characteristics that Convey Information are Also Described in Text</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx04/">Module 4: Formatting Columns Correctly</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx05/">Module 5: Formatting Lists Properly</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx06/">Module 6: Using Built-In Features to Create Data Tables</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx07/">Module 7: Adding Alternative Text to Images and Other Objects</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx08/">Module 8: Creating Links with Unique and Descriptive Names</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx09/">Module 9: Making Vital Background Information Accessible</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx10/">Module 10: Formatting Text for the Intended Language</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx11/">Module 11: Ensuring Descriptions of Embedded Audio, Video and Multimedia Files are Accurate</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx12/">Module 12: Excluding Flashing Objects</a> </li><li class="usa-sidenav__item "> <a href="/training/presentations/aed-cop-pptx13/">Module 13: Saving in the .pptx Format with a Descriptive Filename</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Spreadsheet - Submenu" aria-expanded="false">Spreadsheet</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx00/">Module 0: Introduction & Background</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx01/">Module 1: Using Built-in Features to Organize Content and Ensure Logical Reading Order</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx02/">Module 2: Ensuring the Contrast Ratio Between Text and Background is Sufficient</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx03/">Module 3: Ensuring Color and Other Visual Characteristics are Also Described in Text</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx04/">Module 4: Making Vital Background Information Accessible</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx05/">Module 5: Using Built-In Features to Create Data Tables</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx06/">Module 6: Adding Alternative Text to Images and Other Objects</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx07/">Module 7: Creating Links with Unique and Descriptive Names</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx08/">Module 8: Ensuring Descriptions of Embedded Audio, Video and Multimedia Files are Accurate</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx09/">Module 9: Excluding Flashing Objects</a> </li><li class="usa-sidenav__item "> <a href="/training/spreadsheets/aed-cop-xlsx10/">Module 10: Saving in the .xlsx Format with a Descriptive Filename</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="PDFs - Submenu" aria-expanded="false">PDFs</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/pdfs/aed-cop-pdf00/">Module 0: Introduction & Background</a> </li><li class="usa-sidenav__item "> <a href="/training/pdfs/aed-cop-pdf01/">Module 1: What is a PDF?</a> </li><li class="usa-sidenav__item "> <a href="/training/pdfs/aed-cop-pdf02/">Module 2: Testing a PDF for Accessibility</a> </li><li class="usa-sidenav__item "> <a href="/training/pdfs/aed-cop-pdf03/">Module 3: Remediating PDFs for Accessibility</a> </li><li class="usa-sidenav__item "> <a href="/training/pdfs/aed-cop-pdf04/">Module 4: Converting Scanned Documents into Section 508 Conformant PDFs</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="ANDI - Submenu" aria-expanded="false">ANDI</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/overview/">Module 1: Overview of ANDI</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/focus-element/">Module 2: Focus Element</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/links-buttons/">Module 3: Links & Buttons</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/images/">Module 4: Images</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/structure-headings/">Module 5: Structure Headings</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/heading-levels/">Module 6: Heading Levels</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/structure-lists/">Module 7: Structure Lists</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/page-language/">Module 8: Page Language</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/language-parts/">Module 9: Language of Parts</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/andi-page-title/">Module 10: Page Title</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/frames/">Module 11: Frames</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/iframes/">Module 12: iFrames</a> </li><li class="usa-sidenav__item active usa-current "> <a href="/training/web-software/andi-training-videos/color-contrast/">Module 13: Color Contrast</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/color-contrast-analyzer/">Module 14: Color Contrast Analyzer</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/anditraining-videos/data-tables/">Module 15: Data Tables</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/layout-tables/">Module 16: Layout Tables</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/css-content-positioning/">Module 17: CSS Content and Positioning</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/live-regions/">Module 18: Live Regions</a> </li></ul> </li><li class="usa-sidenav__item "> <a href="/create/synchronized-media/creating-accessible-media/">Creating Accessible Media</a> </li><li class="usa-sidenav__item "> <a href="/training/web-software/andi-training-videos/color-contrast-analyzer/">Color Contrast Analyzer</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Universal Design and Accessibility - Submenu" aria-expanded="false">Universal Design and Accessibility</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="https://www.youtube.com/watch?v=acKd-q2I3f0">An Introduction to Universal Design for Content Creators</a> </li><li class="usa-sidenav__item "> <a href="https://www.youtube.com/watch?v=ryfd3fmZHCY">An Introduction to Universal Design for Developers</a> </li><li class="usa-sidenav__item "> <a href="https://www.youtube.com/watch?v=d1X5XSEErdY">An Introduction to Universal Design for Managers</a> </li><li class="usa-sidenav__item "> <a href="https://www.youtube.com/watch?v=MD0XrzqML8Y">An Introduction to Universal Design for Procurement Professionals</a> </li></ul> </li><li class="usa-sidenav__item "> <a href="/training/alt-text/what-is-alternative-text/">What is Alternative Text?</a> </li></ul> </li><li class="usa-sidenav__item"> <a href="/events/" >Events</a> </li><li class="usa-sidenav__item"> <a href="/iaaf/" >IAAF</a> </li><li class="usa-sidenav__item"> <a href="/iaaf/archives/" >IAAF Archives</a> </li><li class="usa-sidenav__item"> <a href="/training/presentations-workshops/" >Presentations and Workshop Materials</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Section 508 Tools - Submenu" aria-expanded="false">Section 508 Tools</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/tools/">Tools Overview</a> </li><li class="usa-sidenav__item "> <a href="/art/">Accessibility Requirements Tool (ART)</a> </li><li class="usa-sidenav__item "> <a href="https://art-api.section508.gov/">ART API Server</a> </li><li class="usa-sidenav__item "> <a href="/buy/solicitation-review-tool/">Solicitation Review Tool (SRT)</a> </li><li class="usa-sidenav__item "> <a href="/tools/openacr-editor/">OpenACR Editor</a> </li><li class="usa-sidenav__item "> <a href="/tools/program-manager-listing/">Find Your 508 Program Manager</a> </li><li class="usa-sidenav__item "> <a href="/manage/playbooks/">Accessibility Playbooks</a> </li><li class="usa-sidenav__item "> <a href="/test/web-software/">Testing Tools for Web</a> </li><li class="usa-sidenav__item "> <a href="/content/glossary/">Glossary of Terms</a> </li></ul> </li></ul> </nav> </aside> <main class="usa-layout-docs__main desktop:grid-col-9" id="content-section"> <div class="usa-graphic-list"> <div class="field-name-module"><p>From: Accessible Name & Description Inspector (ANDI) Tool Overview</p> </div> <hr /> <p>Discover how to use the ANDI <em>Color Contrast</em> module to ensure that text has sufficient contrast with its background so that it can be read by people with moderately low vision (i.e. those who generally do not use contrast-enhancing assistive technology).</p> <video controls="controls" data-vscid="3qesx4ovd" style="width:100%"><source src="https://assets.section508.gov/files/videos/andi-13-color-contrast-oc.mp4" type="video/mp4" /></video> <h2 class="block-title">Related ANDI Video Series Modules</h2> <div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-title"> <span class="field-content"><a class="active" href="/training/web-software/andi-training-videos/overview">Module 1: Overview of ANDI</a></span> </div> </li> <li class="views-row views-row-2 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/focus-element">Module 2: Focus Element</a></span> </div> </li> <li class="views-row views-row-3 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/links-buttons">Module 3: Links & Buttons</a></span> </div> </li> <li class="views-row views-row-4 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/images">Module 4: Images</a></span> </div> </li> <li class="views-row views-row-5 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/structure-headings">Module 5: Structure Headings</a></span> </div> </li> <li class="views-row views-row-6 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/heading-levels">Module 6: Heading Levels</a></span> </div> </li> <li class="views-row views-row-7 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/structure-lists">Module 7: Structure Lists</a></span> </div> </li> <li class="views-row views-row-8 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/page-language">Module 8: Page Language</a></span> </div> </li> <li class="views-row views-row-9 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/language-parts">Module 9: Language of Parts</a></span> </div> </li> <li class="views-row views-row-10 views-row-even"> <div class="views-field views-field-title"><span class="field-content"><a href="/training/web-software/andi-training-videos/andi-page-title">Module 10: Page Title</a></span> </div> </li> <li class="views-row views-row-11 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/frames">Module 11: Frames</a></span> </div> </li> <li class="views-row views-row-12 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/iframes">Module 12: iFrames</a></span> </div> </li> <li class="views-row views-row-13 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content">Module 13: Color Contrast</span> </div> </li> <li class="views-row views-row-14 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/color-contrast-analyzer">Module 14: Color Contrast Analyzer</a></span> </div> </li> <li class="views-row views-row-15 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/anditraining-videos/data-tables">Module 15: Data Tables</a></span> </div> </li> <li class="views-row views-row-16 views-row-even"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/layout-tables">Module 16: Layout Tables</a></span> </div> </li> <li class="views-row views-row-17 views-row-odd"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/css-content-positioning">Module 17: CSS Content and Positioning</a></span> </div> </li> <li class="views-row views-row-18 views-row-even views-row-last"> <div class="views-field views-field-title"> <span class="field-content"><a href="/training/web-software/andi-training-videos/live-regions">Module 18: Live Regions</a></span> </div> </li> </ul> </div> <div class="border-base radius-lg border-1px" style="margin-top: 1.5em;"> <div class="padding-1"> <p class="text-large"><strong>Before You Go</strong></p> <p>We're always working to improve the information and resources on this website. To suggest a new resource for this or another page, please <a href="mailto:section.508@gsa.gov">contact us </a>.</p> </div> </div> <p><strong>Updated:</strong> September 2020</p> </div> </main> </div> </div> </div> <footer class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap padding-bottom-4"> <div class="desktop:grid-col-4"> <p class="text-bold">Government-wide Initiatives</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="https://www.gsa.gov/technology/government-it-initiatives/digital-strategy" target="_blank" onclick="return navigate(this)">Digital Strategy</a></li> <li> <a href="https://www.plainlanguage.gov/" target="_blank" onclick="return navigate(this)">Plain Language </a></li> <li> <a href="https://designsystem.digital.gov/" target="_blank" onclick="return navigate(this)"> U.S. Web Design System </a></li> <li> <a href="https://www.cio.gov/about/members-and-leadership/accessibility-cop/" target="_blank" onclick="return navigate(this)"> CIO Council Accessibility Community of Practice (ACOP)</a></li> </ul> </div> <div class="desktop:grid-col-2"> <p class="text-bold">Organization</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/about-us/" aria-label="About Us in Organization" onclick="return navigate(this)"> About Us</a></li> <li> <a aria-label="Contact Us details" href="/contact-us/" onclick="return navigate(this)"> Contact Us</a></li> <li><a href="/contributors/" aria-label="Section508.gov site Contributors" onclick="return navigate(this)"> Contributors</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Tools</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/art/" aria-label="Accessibility Requirements Tool" onclick="return navigate(this)"> ART</a></li> <li> <a href="/buy/solicitation-review-tool" aria-label="Solicitation Review Tool" onclick="return navigate(this)"> SRT</a></li> <li> <a href="/content/guide-accessible-web-design-development" onclick="return navigate(this)"> Developer Guide</a></li> <li> <a href="https://digitaldashboard.gov/" target="_blank" onclick="return navigate(this)"> DigitalDashboard.gov</a></li> <li> <a href="https://analytics.usa.gov/" target="_blank" onclick="return navigate(this)"> Analytics.usa.gov</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Resources</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/content/glossary" aria-label="Glossary for Section508" onclick="return navigate(this)"> Glossary</a></li> <li> <a href="/website-policies" onclick="return navigate(this)"> Website Policies</a></li> <li> <a href="/tools/program-manager-listing/" onclick="return navigate(this)"> Find Your Section 508 Program Manager</a></li> <li><a href="/manage/join-the-508-community/" onclick="return navigate(this)">Join the Community(Listserv)</a></li> </ul> </div> </div> </div> </footer> <div class="usa-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://gsa.gov" class="usa-identifier__logo" onclick="return navigate(this)"> <img class="usa-identifier__logo-img" alt="General Services Administration Logo" src="/assets/images/logos/gsa-logo.png"> </a> </div> <div class="usa-identifier__identity"> <p class="usa-identifier__identity-domain">Section508.gov</p> <p class="usa-identifier__identity-disclaimer"> An official website of the <a href="https://www.gsa.gov/" onclick="return navigate(this)">General Services Administration</a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,," > <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">About GSA</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Accessibility statement</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">FOIA requests</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">No FEAR Act data</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Office of the Inspector General</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Performance reports</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Privacy policy</a> </li> <li class="usa-identifier__required-links-item"> <a href="/website-policies/#reuse-and-copyright" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Reuse and Copyright</a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services,," > <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link" onclick="return navigate(this)">Visit USA.gov</a> </div> </section> </div>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script> <script src="/assets/js/uswds.min.js?1732224641581990839"></script> <script src="/assets/js/app.js?1732224641581990839"></script> <script> $(document).ready(function(){ // Check if the user already dismissed alert banner if (window.localStorage.getItem('dismiss_alert')) { $('#alert_banner').hide(); } $("#dismiss_alert").click(function(){ // Save on LocalStorage window.localStorage.setItem('dismiss_alert', true); $('#alert_banner').hide(); }); }); </script> </body> </html>

CINXE.COM

Module 13: Color Contrast | Section508.gov