{"id":2858,"date":"2025-11-18T10:28:05","date_gmt":"2025-11-18T15:28:05","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2858"},"modified":"2026-01-06T16:35:44","modified_gmt":"2026-01-06T21:35:44","slug":"color-contrast","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/color-contrast\/","title":{"rendered":"Color contrast"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Color contrast<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Color is a powerful design tool that helps convey meaning and draws attention to content. It must be used thoughtfully so it does not present a barrier to people with disabilities, such as those who are colorblind, have low vision, or use grayscale monitors.<\/p>\n

Appropriate use<\/strong><\/h2>\n

Text on a solid background:<\/strong>\u00a0The Web Content Accessibility Guidelines require that text\u2014and images of text\u2014provide a contrast ratio of at least 4.5:1. This is ratio between the foreground and background colors.<\/p>\n

Non-text elements:<\/strong>\u00a0For all other elements like buttons, images, links, and form fields, the same rules regarding color contrast apply.<\/p>\n

How to test for compliance<\/strong><\/h2>\n

You will need to use an automated checker like WebAIM\u2019s\u00a0WAVE Browser extension<\/a>. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues.<\/p>\n

When using an automated checker, it is possible to get false positives, in which case you will need to manually verify that they are true issues.<\/p>\n

Additionally, you should check any text in images and any text above an image (like a call out in a hero banner).<\/p>\n

Common mistakes<\/strong><\/h2>\n

Links:<\/strong>\u00a0A common mistake we see often is the color of hyperlinks on your page. In many cases, this is set in the .CSS file as part of the template, and is used against multiple backgrounds without consideration for all new colors.<\/p>\n

See the Rutgers\u00a0Color Contrast Look Up<\/a>\u00a0for which color combinations meet standards.<\/p>\n

WCAG standards<\/strong><\/h2>\n