MENU
Campus Building Closeup

Color & Contrast

Ensure sufficient contrast between text and background.

Color cannot be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.

Most colors are set by Web Services for the entire website, however, in cases where you do need to choose colors it is important to do so with accessibility in mind.

Best Practices

Information and instructions must be conveyed in a manner that does not rely on color to be understood.

Most text and images of text should have a contrast ratio of at least 4.5:1.

Large scale text and images of text (such as headings) should have a contrast ratio of at least 3:1

Text that is part of a logo has no contrast requirement, however appropriate alt text must still be included with the image.

Images of Text

While it is technically acceptable to include images of text that meet contrast and alternative text requirements, images of text are not recommended as a best practice. If you find yourself without clear alternatives to using an image of text Web Services may be able to help.

Examples:

Crimson (#770000) on a white background has a contrast ratio of 11.76:1. 
I am crimson text.

Gold (#AB946C) on a white background has a contrast ratio of 2.92:1. 
I am gold text.

Blue (#084771) on a white background has a contrast ratio of 9.76:1. 
I am blue text.

Additional Resources

Edit Page