- An official website of the City of Philadelphia government Here's how you know
- An official website
Color contrast checkers
These tools will help you find and fix accessibility issues. To make the best use of these tools, you should build them into your workflow when publishing a webpage or digital document.
Disclaimer: Reference on this page to any specific commercial product, process, or service, or any trade, firm, or corporation name is for information and convenience. It does not constitute endorsement, recommendation, or favoring by the City of Philadelphia.
Why it matters
People with low vision or color blindness may not be able to read text if it doesn’t contrast enough with its background. For example, low contrast is less readable, while high contrast is more readable.
What they do
These tools measure the contrast ratio between text and its background color to ensure it’s readable.
How to use these tools
Use an online tool or browser extension to check your color combinations. These are the minimum contrast ratios needed to meet the WCAG 2.1 AA standard:
- 4.5:1 for normal* text.
- 3:1 for large text (18 point/24 pixels, or 14 point/19 pixels for bold text).
*While there isn’t a strict minimum font size, aiming for 12pt or 16px for body text, and ensuring the text can be zoomed, are good practices for accessibility. These tools will tell you if your content meets WCAG 2.1 AA standards.
Available tools
- TPGi Color Contrast Analyzer it when you need to check colors in desktop applications, not just on websites, or when you want advanced features like a color blindness simulator.
- WebAIM Contrast Checker web tool. Use it when you need a quick online check, want to share your results with a link, or if you’re a developer who wants to use their API.
- Siteimprove Color Contrast Checker need a very fast and easy way to check the contrast of two colors on a website.