Introducing W&M's Color Contrast Checker Tool
Creating accessible digital content starts with choosing color combinations that are easy for everyone to read. Whether you're designing a webpage, presentation, email, social media graphic, or digital document, sufficient color contrast improves readability for all users, including people with low vision or color vision deficiencies, while helping maintain William & Mary's visual identity.
The new W&M Color Contrast Checker makes it easy to create content that is both accessible and on brand. Built using the university's official color palette, the tool evaluates every W&M foreground and background color combination against both WCAG accessibility requirements and W&M branding standards.
What the Tool Provides
For every color combination, the Color Contrast Checker displays:
- A WCAG contrast ratio for the selected colors.
- A live preview showing how text or icons will appear against the selected background.
- Pass/Fail results for regular and large text as well as non-text elements and icons.
- HEX color values that can be copied for both the foreground and background colors.
- Best practice guidance for using each color combination.
Understanding the Recommendation Levels
Each color combination is assigned one of four recommendation levels to help you make informed design decisions.
Recommended
The color combination meets WCAG accessibility requirements and aligns with W&M brand standards. These combinations are approved for use and should be your first choice whenever possible.
Limited Use
The combination may be appropriate in specific situations but has limitations. For example, it may only meet accessibility requirements for large text or should be used sparingly according to W&M brand guidelines. Always review the best practice recommendations before using these combinations.
Not Recommended
The color combination meets accessibility requirements but does not align with W&M branding standards. While it may be technically accessible, it is not recommended for maintaining a consistent university brand.
Do Not Use
The color combination does not meet WCAG accessibility requirements and should not be used in digital content.
We encourage everyone who creates digital content at William & Mary to use the Color Contrast Checker as part of their design process to help create digital content that is inclusive and maintains brand integrity.
For questions, please submit a request for assistance.