CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Link Contrast Checker</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> <script src="linkcolor.js"></script> <script> function initialize() { f = '#000000', b = '#FFFFFF', l='#3333FF'; update(); } </script>  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/resources.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li><a href="/articles/">Articles</a></li> <li class="current"><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Link Contrast Checker</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/resources/">Resources</a> > Link Contrast Checker</p> <style> #contrastForm {float:none} .linkResults {display:inline-block; vertical-align:middle} .linkResults p {padding-bottom:2px} </style> <div class="section"> <noscript> <p><strong>This tool requires Javascript.</strong></p> </noscript> <form id="contrastForm"> <fieldset> <legend>Link Color</legend> <p class="error" id="lError">Please enter a valid <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet">hex triplet</a>, or use the color picker.</p> <label for="lHex" class="hidden">Hex</label> <input id="lHex" type="text" maxlength="7" required> <label for="lPick" class="hidden">color picker</label> <input id="lPick" type="color"> <div> <label for="lLightness">Lightness</label> <input id="lLightness" type="range" min="0" max="100" step="1"> <div class="gradient"></div> </div> </fieldset> <fieldset> <legend>Body Text Color</legend> <p class="error" id="fError">Please enter a valid <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet">hex triplet</a>, or use the color picker.</p> <label for="fHex" class="hidden">Hex</label> <input id="fHex" type="text" maxlength="7" required> <label for="fPick" class="hidden">color picker</label> <input id="fPick" type="color"> <div> <label for="fLightness">Lightness</label> <input id="fLightness" type="range" min="0" max="100" step="1"> <div class="gradient"></div> </div> </fieldset> <fieldset> <legend>Background Color</legend> <p class="error" id="bError">Please enter a valid <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet">hex triplet</a>, or use the color picker.</p> <label for="bHex" class="hidden">Hex</label> <input id="bHex" type="text" maxlength="7" required> <label for="bPick" class="hidden">color picker</label> <input id="bPick" type="color"> <div> <label for="bLightness">Lightness</label> <input id="bLightness" type="range" min="0" max="100" step="1"> <div class="gradient"></div> </div> </fieldset> </form> <div id="normal">The five <a href="/" id="samplelink">boxing wizards</a> jump quickly.</div> <div id="linkTextRatioContainer"> <div class="linkResults"> <h2>Link to Body Text</h2> <p>WCAG A: <span id="linkTextA"></span></p> </div> <span id="linkTextRatio" aria-live="polite" aria-atomic="false"></span> </div> <div id="linkBackRatioContainer"> <div class="linkResults"> <h2>Link to Background</h2> <p>WCAG AA: <span id="linkBackAA"></span></p> </div> <span id="linkBackRatio" aria-live="polite" aria-atomic="false"></span> </div> <div id="textBackRatioContainer"> <div class="linkResults"> <h2>Body Text to Background</h2> <p>WCAG AA: <span id="textBackAA"></span></p> </div> <span id="textBackRatio" aria-live="polite" aria-atomic="false"></span> </div> <p><a id="permalink" class="permalink" href="./?fcolor=000000&bcolor=FFFFFF">permalink</a></p> <div class="callout"> <div class="title">WebAIM Accessibility Testing Services</div> <p>The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.</p> <p class="calloutlink"><a href="/services/evaluation">Learn more about WebAIM Evaluation Services</a> </div> <h2>Explanation</h2> <p>For usability and accessibility, links should be underlined by default. Otherwise, <a href="/articles/contrast/#only">link text must have at least 3:1 contrast with surrounding body text</a>, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus.</p> <p>In addition, both links and body text must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA.</p> <p>Enter link, body text, and background colors in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or use the color pickers. The Lightness sliders can be used to adjust the selected color. Feedback will be presented for all three required contrast calculations.</p> <p>To check the contrast of large text, or to check against Level AAA contrast requirements, use <a href="/resources/contrastchecker/">our standard contrast checker</a>.</p> <div class="note"> <div class="title">New!</div> <p>This tool also functions as a basic API. Simply append <code>&api</code> to any permalink to get a JSON object with the contrast ratios. For example: <a class="apilink" href="https://webaim.org/resources/contrastchecker/?fcolor=FF0000&bcolor=FFFFFF&api">https://webaim.org/resources/contrastchecker/?fcolor=FF0000&bcolor=FFFFFF&api</a>.</p> </div> </div> </article>  <aside id="articlemeta"> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/articles/contrast/">Understanding WCAG 2 Contrast and Color Requirements</a></li> <li><a href="/resources/evalquickref/">Quick Reference: Testing Web Content for Accessibility</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="/resources/contrastchecker/">Contrast Checker</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2025 WebAIM</h2> <p id="contact"> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/salary-survey-results/">Global Digital Accessibility Salary Survey Results</a></li><li><a href="/blog/join-the-discussion/">Join the Discussion鈥擣rom Your Inbox</a></li><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>