Color Contrast | Digital Accessibility Office

What is color contrast?

Color contrast is the difference in brightness between foreground and background colors. For accessibility purposes, aim for a 4.5:1 ratio between the foreground color (e.g. text, links, etc.) and the background color. This ratio ensures people with moderately low vision can tell the colors apart and see your content.

Look for potential color contrast issues in the following:

Website templates or CSS that a developer will need to address
Digital and print documents like PDFs, brochures, maps, etc.
Text within an image like infographics, event fliers, etc.
Text on a semi-transparent background or on top of an image
Link text compared to its surrounding body text and background color
Color changes of interactive elements like links, buttons, etc.

Font size and weight (e.g. bold) can affect color contrast too. If text is 24 px or 19px and bold, it is large enough to pass at a 3:1 color contrast ratio. Most often headings are the only large text on a website.

Exceptions for color contrast include logos and incidental text or images. Examples of incidental text or images are inactive interface components or decorative elements.

How to Check Color Contrast

There are many tools available online to check color contrast. Check out these for more guidance:

You must meet WCAG AA criteria for color contrast. AAA is not (yet) required.

UNC’s Color Palette

UNC Creative developed UNC’s color palette to include guidance on using Carolina Blue for digital materials. It provides guidance specific to UNC’s branded colors.

Impact on Users

Color contrast impacts the readability of your content on the web and in print. It is especially important for users who are low vision or for users who are colorblind.

Good color contrast means all users can see your content no matter the device they’re using or the lighting of their surroundings. See an example of the impact color contrast has on users in this WAI Perspectives Colors with Good Contrast video.