Colour Contrast Checker Tool

Before completing your component design, use this tool to validate that your chosen colour pairings meet official accessibility standards. Even if a combination appears legible to the naked eye, it may not provide enough contrast for users with low vision or color deficiencies. Testing ensures that our digital and physical environments remain inclusive and functional for everyone.    

Contrast requirements vary depending on how the color is being used. While a combination might fail for body text, it may still be acceptable for decorative elements or large-scale graphical components.

Text Use: Requires higher contrast to ensure readability across different screen types and lighting conditions.

Graphic Use: Applies to UX components like icons, borders, or form fields, which have a slightly lower threshold but are still critical for navigation.

Click on any icon within the color grid to see a detailed breakdown of the contrast ratio and specific pass/fail ratings for both text and graphical elements.