Skip to Main Content

Accessibility Best Practices

Font Color Contrast

Font Color Contrast

"The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read..." [1] So, how do you go about determining if the text on your site has a contrast ratio of at least 4.5 to 1? Fortunately, the answer is made fairly easy by the using WebAIM's website Contrast Checker.

This site allows you to enter a foreground color (the text) and a background color.

Screen capture of the WebAIM Contrast Checker page that allows users to enter a foreground and background color.

The site then automatically returns results that indicate whether the contrast will pass or fail each portion of the guideline, which includes minimum and maximum WCAG requirements for normal text, large text, and graphical / user interface components (like a text entry box).

Screen capture of the WebAIM Contrast Checker page that shows users whether or not the font contrase passes or fails the WCAG guideline.

Best Practice:

When using WebAIM's Contrast Checker, it is best practice to make sure that all minimum and maximum requirements are met.

Tip:

Large Text is generally defined as an 18 point text or 14 point bold text.

The University of Tennessee, Knoxville qualifies large text as text wrapped in the headline tags <h1>, <h2>, <h3>, or <h4>. [3] (Header tags are covered in the Content Markup tab.)

The caveat to using the WebAIM Contrast Checker website is that you must know the font and background color's HEX code. (Color HEX codes begin with the pound sign followed by a six numbers/letters. For instance, the color white is #FFFFFF and black is #000000.) Don't worry though, there are several websites available for you to find this information. Such as:

Tips:

When using the WebAIM Contrast Checker, if you want to use a specific color but it fails to meet the requirements, you can use the scrolling bar under the Lightness header to change the color hue by slight variations. Sliding to the right will lighten the color while sliding to the left will darken it.
Images of text are included in this guideline, but they will be discussed specifically in a separate tab.
Incidental text (text included in something like a photo) and corporate logos are excluded from this guideline.