Skip to main content
Close menu William & Mary
Popular Topics
Suggested Results
News Events
William & Mary
Resources FOR...
Resources FOR...
William & Mary Brand Hub

W&M Color Contrast Checker

Color accessibility and contrast are critical in branding and marketing because they directly affect readability, comprehension and overall user experience. High contrast between text and background ensures that information is easily seen and understood across all devices and lighting conditions, reducing fatigue and confusion. Proper color contrast also preserves the integrity of a brand’s visual identity, ensuring consistent recognition and impact across media.

Accessibility Requirements

Beyond best practice, maintaining adequate contrast is a legal requirement under the Web Content Accessibility Guidelines (WCAG) for all digital content. These standards require minimum contrast ratios of 4.5:1 for regular text and 3:1 for large text or non-text elements. For more resources on checking color contrast ratios, visit the W&M Digital Accessibility website.

Check Your Color Combinations

The color contrast checker, below, is available to the W&M community to evaluate color combinations for accessibility and brand compliance. Questions about how to use the checker? Review the provided details. If you have questions on accessibility, contact the Digital Accessibility team to request a consultation.

Color Contrast Checker

Color Contrast Checker

Let’s get started. Pick two colors and select Check Contrast for guidance on the use of regular text, large text and non-text.

Preview

9.78:1
  • Regular Text Pass
  • Large Text Fail
  • Non-Text/Icons Pass

Color Details

  • Text or icon

    #ffffff
    White

  • Background

    #ffffff
    White

Recommendation

Recommended

This color combination meets accessibility requirements and aligns with brand standards. It is approved for use.

Best Practices

    Resources

    Tool Details

    What the Tool Provides

    For every color combination, the Color Contrast Checker displays:

    • a live preview showing how text or icons will appear against the selected background
    • the calculated WCAG contrast ratio to indicate why the combination passes or fails the thresholds
    • pass/fail results for regular and large text as well as non-text elements and icons
    • the corresponding HEX color values for each color that can be easily copied
    • best practice guidance and recommendations for 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.